@extends('layouts.contentNavbarLayout')

@section('title', 'Send New Proposal')

@section('content')
<div class="container">
    <h2 class="mb-4">Send New Proposal</h2>

    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <form action="{{ route('proposals.store') }}" method="POST">
        @csrf
        <div class="mb-3">
            <label class="form-label">Title</label>
            <input type="text" name="title" class="form-control" value="{{ old('title') }}" required>
        </div>
        <div class="mb-3">
            <label class="form-label">Client</label>
            <select name="client_id" class="form-control" required>
                <option value="" disabled selected>Select Client</option>
                @foreach($clients as $client)
                <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>
                    {{ $client->name }}
                </option>
                @endforeach
            </select>
        </div>
        <div class="mb-3">
            <label class="form-label">Project Type</label>
            <select name="project_type" class="form-control" required>
                <option value="" disabled selected>Select Project Type</option>
                @foreach($ptypes as $type)
                <option value="{{ $type->id }}" {{ old('project_type') == $type->id ? 'selected' : '' }}>
                    {{ $type->category }}
                </option>
                @endforeach
            </select>
        </div>
        <div class="mb-3">
            <label class="form-label">Industry</label>
            <select name="industry" class="form-control" required>
                <option value="" disabled selected>Select Industry</option>
                @foreach($industries as $industry)
                <option value="{{ $industry->id }}" {{ old('industry_id') == $industry->id ? 'selected' : '' }}>
                    {{ $industry->page_name }}
                </option>
                @endforeach
            </select>
        </div>
        <div class="mb-3">
            <label class="form-label">Solutions</label>
            <select name="solution" class="form-control" required>
                <option value="" disabled selected>Select Solution</option>
                @foreach($solutions as $solution)
                <option value="{{ $solution->id }}" {{ old('solution_id') == $solution->id ? 'selected' : '' }}>
                    {{ $solution->page_name }}
                </option>
                @endforeach
            </select>
        </div>

        <div class="mb-3">
            <label class="form-label">Description</label>
            <textarea name="description" class="form-control">{{ old('description') }}</textarea>
        </div>
        <div class="mb-3">
            <label class="form-label">Amount ($)</label>
            <input type="number" name="amount" class="form-control" step="0.01" min="0" value="{{ old('amount') }}"
                required>
        </div>
        <div class="mb-3">
            <label class="form-label">Sent Date</label>
            <input type="date" name="sent_date" class="form-control" value="{{ old('sent_date') }}">
        </div>
        <div class="mb-3">
            <label class="form-label">Expiry Date</label>
            <input type="date" name="expiry_date" class="form-control" value="{{ old('expiry_date') }}">
        </div>
        <div class="mb-3">
            <label class="form-label">Status</label>
            <select name="status" class="form-control">
                <option value="pending" {{ old('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="accepted" {{ old('status') == 'accepted' ? 'selected' : '' }}>Accepted</option>
                <option value="rejected" {{ old('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
            </select>
        </div>
        <div class="mb-3">
            <label class="form-label">Essential Modules</label>
            <textarea name="essential_modules" class="form-control">{{ old('essential_modules') }}</textarea>
        </div>
        <div class="mb-3">
            <label class="form-label">Benefits</label>
            <textarea name="benefits" class="form-control">{{ old('benefits') }}</textarea>
        </div>
        <button type="submit" class="btn btn-primary">Send Proposal</button>
    </form>
</div>




{{-- create --}}
<div class="card">
    <h5 class="card-header">Extended Modals</h5>
    <div class="card-body">
        <div class="row gy-3">
            <!-- Onboarding modals -->

            <!-- Horizontal Onboarding modals -->
            <div class="col-lg-4 col-md-6">
                <small class="text-light fw-medium">Horizontal Onboarding Modals</small>
                <!-- horizontal slider modal -->
                <div class="modal-onboarding modal fade animate__animated" id="onboardingHorizontalSlideModal"
                    tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-xl" role="document">
                        <div class="modal-content text-center">
                            <div class="modal-header border-0">
                                <a class="text-muted close-label" href="javascript:void(0);"
                                    data-bs-dismiss="modal">Skip Intro</a>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                </button>
                            </div>
                            <div id="modalHorizontalCarouselControls" class="carousel slide pb-6 mb-2"
                                data-bs-interval="false">
                                <div class="carousel-indicators">
                                    <button type="button" data-bs-target="#modalHorizontalCarouselControls"
                                        data-bs-slide-to="0" class="active" aria-current="true"
                                        aria-label="Slide 1"></button>
                                    <button type="button" data-bs-target="#modalHorizontalCarouselControls"
                                        data-bs-slide-to="1" aria-label="Slide 2"></button>
                                    <button type="button" data-bs-target="#modalHorizontalCarouselControls"
                                        data-bs-slide-to="2" aria-label="Slide 3"></button>
                                </div>
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <div class="onboarding-horizontal">
                                            <div class="onboarding-media">
                                                <img src="../../assets/img/illustrations/boy-with-rocket-light.png"
                                                    alt="boy-with-rocket-light" width="273" class="img-fluid"
                                                    data-app-light-img="illustrations/boy-with-rocket-light.png"
                                                    data-app-dark-img="illustrations/boy-with-rocket-dark.png">
                                            </div>
                                            <div class="onboarding-content">
                                                <h5 class="onboarding-title text-body">Example Request Information1</h5>
                                                <div class="onboarding-info">In this example you can see a form where
                                                    you can request some
                                                    additional information from the customer when they land on the app
                                                    page.</div>
                                                <form>
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            <div class="form-floating form-floating-outline mb-4">
                                                                <input class="form-control"
                                                                    placeholder="Enter your full name..." type="text"
                                                                    value="" tabindex="0" id="nameEx4">
                                                                <label for="nameEx4">Your Full Name</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="form-floating form-floating-outline mb-4">
                                                                <select class="form-select" tabindex="0" id="roleEx4">
                                                                    <option>Web Developer</option>
                                                                    <option>Business Owner</option>
                                                                    <option>Other</option>
                                                                </select>
                                                                <label for="roleEx4">Your Role</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <div class="onboarding-horizontal">
                                            <div class="onboarding-media">
                                                <img src="../../assets/img/illustrations/girl-doing-yoga-light.png"
                                                    alt="boy-with-rocket-light" width="273" class="img-fluid"
                                                    data-app-light-img="illustrations/girl-doing-yoga-light.png"
                                                    data-app-dark-img="illustrations/girl-doing-yoga-dark.png">
                                            </div>
                                            <div class="onboarding-content">
                                                <h5 class="onboarding-title text-body">Example Request Information2</h5>
                                                <div class="onboarding-info">In this example you can see a form where
                                                    you can request some
                                                    additional information from the customer when they land on the app
                                                    page.</div>
                                                <form>
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            <div class="form-floating form-floating-outline mb-4">
                                                                <input class="form-control"
                                                                    placeholder="Enter your full name..." type="text"
                                                                    value="" tabindex="0" id="nameEx5">
                                                                <label for="nameEx5">Your Full Name</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="form-floating form-floating-outline mb-4">
                                                                <select class="form-select" tabindex="0" id="roleEx5">
                                                                    <option>Web Developer</option>
                                                                    <option>Business Owner</option>
                                                                    <option>Other</option>
                                                                </select>
                                                                <label for="roleEx5">Your Role</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <div class="onboarding-horizontal">
                                            <div class="onboarding-media">
                                                <img src="../../assets/img/illustrations/boy-with-laptop-light.png"
                                                    alt="boy-with-laptop-light" width="273" class="img-fluid"
                                                    data-app-light-img="illustrations/boy-with-laptop-light.png"
                                                    data-app-dark-img="illustrations/boy-with-laptop-dark.png">
                                            </div>
                                            <div class="onboarding-content">
                                                <h5 class="onboarding-title text-body">Example Request Information3</h5>
                                                <div class="onboarding-info">In this example you can see a form where
                                                    you can request some
                                                    additional information from the customer when they land on the app
                                                    page.</div>
                                                <form>
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            <div class="form-floating form-floating-outline mb-4">
                                                                <input class="form-control"
                                                                    placeholder="Enter your full name..." type="text"
                                                                    value="" tabindex="0" id="nameEx6">
                                                                <label for="nameEx6">Your Full Name</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="form-floating form-floating-outline mb-4">
                                                                <select class="form-select" tabindex="0" id="roleEx6">
                                                                    <option>Web Developer</option>
                                                                    <option>Business Owner</option>
                                                                    <option>Other</option>
                                                                </select>
                                                                <label for="roleEx6">Your Role</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#modalHorizontalCarouselControls" role="button"
                                    data-bs-slide="prev">
                                    <i class="ri-arrow-left-double-line lh-1 me-1"></i><span>Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#modalHorizontalCarouselControls" role="button"
                                    data-bs-slide="next">
                                    <span>Next</span><i class="ri-arrow-right-double-line lh-1 ms-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/ horizontal slider modal -->


                <!--/ Form with Image horizontal Modal -->
                <div class="demo-inline-spacing">
                    <!-- horizontal slider modal -->
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                        data-bs-target="#onboardingHorizontalSlideModal">Multistep Slider modal</button>


                </div>
            </div>

            <!-- Transparent Modal -->

        </div>
    </div>
</div>
<!--/ Extended Modals -->

{{-- /end --}}
@endsection