@extends('layouts.web')

@section('content')
<link rel="stylesheet" href="{{ asset('css/rome.css') }}">
<section class="intenal-heading">
    <div class="container">
        <div class="col-12">
            <h2>Book an Appointment</h2>
            <a href="index.php">Home</a>> <span>Book an Appointment</span>
        </div>
    </div>
</section>

<!--internal main section-->
<section class="internal-main-section">
    <div class="container">
        <div class="row ">
            <!-- <div class="col-xxl-4 col-xl-4 col-lg-5 col-md-12 col-sm-12 col-12">
                <div class="appointment-content">
                    <p>We welcome you to visit our luxury bridal studio located in Chermside, where our experienced bridal stylists will guide you every step of the way as you try on our beautiful collections in your own private bridal station.</p>
                    <p>Here at Angelic Bridal, we operate via appointment only to keep it all about YOU!</p>

                    <h4>ABOUT OUR APPOINTMENTS</h4>
                    <p>Appointments are for an hour, and due to limited spacing in our store guest numbers are limited to 4 per bride on weekends.</p>
                    <p>Booking appointments incur a $25 appointment fee. This fee is redeemable off the cost of your gown when you say “yes to the dress” with us in-store at your appointment.</p>
                    <p>As a time has been allocated to you in advance, the booking fee is non-refundable, and any cancellations and no shows are subject to no refund</p>
                    <p>Have an enquiry?</p>
                    <p>We are here to help, feel free to send us a message via our contact page</p>
                </div>
            </div> -->
            <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="col-12 " id="my_styles">
                    <ul class="nav nav-tabs prod-detail-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="firstappointment-button active" id="firstappointment-tab" data-bs-toggle="tab" data-bs-target="#firstappointment" type="button" role="tab" aria-controls="firstappointment" aria-selected="true">First Appointment</button>
                        </li>
                        <li class="nav-item " role="presentation">
                            <button class=" firstappointment-button" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#follow-up-appointment" type="button" role="tab" aria-controls="follow-up-appointment" aria-selected="false">Follow-up Appointment</button>
                        </li>
                    </ul>

                    @if ($errors->any())
                    <div class="alert alert-danger mt-2">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                            <li>
                                {{ $error }}
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    @if (session('failed'))
                    <div class="alert alert-danger mt-2">
                        {{ session('failed') }}
                    </div>
                    @endif

                    @if (session('success'))
                    <div class="alert alert-success mt-2">
                        {{ session('success') }}
                    </div>
                    @endif
                    <div class="tab-content mt-3" id="myTabContent">

                        <div class="tab-pane fade show active" id="firstappointment" role="tabpanel" aria-labelledby="firstappointment-tab">
                            <form action="{{ route('appointmentSubmit') }}" method="post">
                                @csrf
                                <h2 class="booking-heading-main">First Appointment</h2>
                                <div class="mt-4">
                                    <ul class="nav nav-tabs appointment-tabs" id="myTab" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link tab-pad active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Step 1</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link tab-pad" id="slot-tab" data-bs-toggle="tab" data-bs-target="#slot" type="button" role="tab" aria-controls="slot" aria-selected="false">Step 2</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link tab-pad" id="information-tab" data-bs-toggle="tab" data-bs-target="#information" type="button" role="tab" aria-controls="information" aria-selected="false">Step 3</button>
                                        </li>
                                        <!-- <li class="nav-item" role="presentation">
                                            <button class="nav-link tab-pad" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab" aria-controls="reviews" aria-selected="false">Step 4</button>
                                        </li> -->
                                    </ul>
                                    <div class="tab-content" id="myTabContent">
                                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                            <div class="steps-main">
                                                <!-- <form> -->

                                                <div class="row">
                                                    @foreach($categories as $key=>$category)
                                                    <!-- <div class="col-12">
                                                        <h2 class="booking-heading mb-2">{{ $category->name }}</h2>
                                                    </div> -->
                                                    @foreach($category->services as $service)
                                                    <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 d-flex">
                                                        <div class="booking-services-card text-center">
                                                            <div class="row">
                                                                <div class="col-12">
                                                                    <h4>{{ $category->name }}</h4>
                                                                    <h3>{{ $service->name }}<span>{{ isset($service->time) ? $service->time->label : '1h' }}</span></h3>
                                                                    <p>{!! substr($service->description,0,100).'...' !!}</p>
                                                                    <h4>{!! ($service->price==0) ? 'Free' : '$'.number_format($service->price, 2) !!}</h4>
                                                                </div>
                                                                <div class="col-12">
                                                                    <br />
                                                                    <div class="aval_dates">See Available Dates</div>
                                                                    <input class="form-check-input service_id d-none" type="radio" name="service_id" id="flexRadioDefault{{$key}}" value="{{ $service->id }}" {!! (old('service_id')==$service->id) ? 'checked' : '' !!}>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                    @endforeach
                                                    <!-- <div class="col-12 text-right">
                                                        <button type="button" class="btn  book-next " data-id="slot-tab">Next</button>
                                                    </div> -->
                                                </div>
                                                <!-- </form> -->
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="slot" role="tabpanel" aria-labelledby="slot-tab">
                                            <div class="steps-main">

                                                <div class="row">
                                                    <div class="col-md-4 mt-3">
                                                        <div class="appointment-content">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 mt-3 px-5 text-center">
                                                        <!-- <input type="text" class="form-control" name="appointment_date" id="result" placeholder="Select date" disabled=""> -->
                                                        <div id="calendar"></div>
                                                    </div>
                                                    <div class="col-md-4 mt-3 px-5">
                                                        <div class="right-time-card">
                                                            <!-- <h3>Time</h3>
                                                            <h4 id="appointment_date_label">Select Date</h4> -->
                                                            <input type="hidden" name="appointment_date" id="appointment_date" />
                                                            <input type="hidden" name="slot_id" id="slot_id" />
                                                            <!-- <hr /> -->
                                                            <div class="row p-3" id="slots">
                                                                <div class='col-12 ' id="slots-div"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-6 mt-3">
                                                        <button type="button" class="btn  book-back" data-id="home-tab">Back</button>
                                                    </div>
                                                    <div class="col-6 mt-3 text-right">
                                                        <button type="button" class="btn  book-next" data-id="information-tab">Next</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- </div> -->

                                        <div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
                                            <div class="steps-main">
                                                <form>
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <h2 class="booking-heading">Fill Information</h2>
                                                        </div>
                                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                                            <label for="" class="form-label">First Name<span class="red-star">*</span></label>
                                                            <input type="text" class="form-control" name="first_name" value="{{ old('first_name') }}" required>
                                                        </div>
                                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                                            <label for="" class="form-label">Last Name<span class="red-star">*</span></label>
                                                            <input type="text" class="form-control" name="last_name" value="{{ old('last_name') }}" required>
                                                        </div>
                                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                                            <label for="" class="form-label">Email<span class="red-star">*</span></label>
                                                            <input type="email" class="form-control" name="email" value="{{ old('email') }}" required>
                                                        </div>
                                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                                            <label for="" class="form-label">Mobile<span class="red-star">*</span></label>
                                                            <input type="text" class="form-control" name="phone" value="{{ old('phone') }}" required>
                                                        </div>
                                                        <!-- <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                                            <label for="" class="form-label">Appointment Date<span class="red-star">*</span></label>
                                                            <input type="date" class="form-control" name="wedding_date">
                                                        </div>
                                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                                            <label for="" class="form-label">Time <span class="red-star">*</span></label>
                                                            <input type="Time" class="form-control">
                                                        </div> -->
                                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                                            <label for="" class="form-label">Wedding Date<span class="red-star">*</span></label>
                                                            <input type="date" class="form-control" name="wedding_date" value="{{ old('wedding_date') }}" required>
                                                        </div>

                                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                                            <label for="" class="form-label">Number of Guest<span class="red-star">*</span></label>
                                                            <!-- <input type="text" class="form-control" name="no_of_guests"> -->
                                                            @php $no_of_guests=''; @endphp
                                                            @if( old('no_of_guests'))
                                                            @php $no_of_guests=old('no_of_guests'); @endphp
                                                            @endif
                                                            <select class="form-select" name="no_of_guests" required>
                                                                <option {!! ($no_of_guests==1) ? 'selected' : '' !!}>1</option>
                                                                <option {!! ($no_of_guests==2) ? 'selected' : '' !!}>2</option>
                                                                <option {!! ($no_of_guests==3) ? 'selected' : '' !!}>3</option>
                                                                <option {!! ($no_of_guests==4) ? 'selected' : '' !!}>4</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                                            <label for="exampleInputPassword1" class="form-label">Is this your first time trying on a bridal dress?<span class="red-star">*</span></label>
                                                            @php $first_try_bridal_dress=''; @endphp
                                                            @if( old('first_try_bridal_dress'))
                                                            @php $first_try_bridal_dress=old('first_try_bridal_dress'); @endphp
                                                            @endif
                                                            <select class="form-select" aria-label="Default select example" name="first_try_bridal_dress">
                                                                <option {!! ($first_try_bridal_dress==1) ? 'selected' : '' !!} value=1>Yes</option>
                                                                <option {!! ($first_try_bridal_dress==0) ? 'selected' : '' !!} value=0>No</option>
                                                            </select>
                                                        </div>

                                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                                            <label for="exampleInputPassword1" class="form-label">What size do you wear in womenswear?<span class="red-star">*</span></label>
                                                            @php $size_in_womenswear='';
                                                            $sizes=[6,8,10,12,14,16,18,20,22,24] @endphp
                                                            @if( old('size_in_womenswear'))
                                                            @php $size_in_womenswear=old('size_in_womenswear'); @endphp
                                                            @endif
                                                            <select class="form-select" name="size_in_womenswear" required>
                                                                @foreach($sizes as $size)
                                                                <option {!! ($size_in_womenswear==$size) ? 'selected' : '' !!}>{{$size}}</option>
                                                                @endforeach

                                                            </select>
                                                        </div>

                                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                                            <label for="" class="form-label">How did you hear about us ? <span class="red-star">*</span></label>
                                                            <input type="text" class="form-control" name="hear_about_us" value="{{ old('hear_about_us') }}" required>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="row">
                                                                <div class="col-6 mt-3">
                                                                    <button type="button" class="btn  book-back" data-id="slot-tab">Back</button>
                                                                </div>
                                                                <div class="col-6 mt-3 text-right">
                                                                    <button type="submit" class="btn  book-next">Next</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>

                                        </div>
                                        <!-- <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                                            <div class="steps-main-cart">
                                                <div class="row mt-3">
                                                    <div class="col-12">
                                                        <h2 class="booking-heading">You Have 1 Item in your Cart</h2>
                                                    </div>
                                                </div>
                                                <table class="table">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">Product</th>
                                                            <th scope="col">Price</th>
                                                            <th scope="col">Quantity</th>
                                                            <th scope="col">Subtotal</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <th scope="row">
                                                                <p>Weekend</p>
                                                                <p>Appointment Details:</p>
                                                                <p>Date: 27/07/2024</p>
                                                                <p>Time: 11:00am</p>
                                                            </th>
                                                            <td>$25.00</td>
                                                            <td>1</td>
                                                            <td>$25.00</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <div class="booking-services-card booking-cart">
                                                    <h4>Cart Totals</h4>
                                                    <table class="table">

                                                        <tbody>
                                                            <tr>
                                                                <td scope="row">Subtotal</td>
                                                                <td class="text-right">$25.00</td>
                                                            </tr>
                                                            <tr>
                                                                <td scope="row">Total</td>
                                                                <td class="text-right">$25.00</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div class="row">
                                                    <div class="col-4 mt-3">
                                                        <button type="submit" class="btn  book-back">Back</button>
                                                    </div>
                                                    <div class="col-8 mt-3 text-right">
                                                        <button type="submit" class="btn  book-next">Proceed to checkout</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--steps end-->


                        <!-- follow up -->
                        <div class="tab-pane fade" id="follow-up-appointment" role="tabpanel" aria-labelledby="follow-up-appointment-tab">
                            <div class="steps-main mt-1">
                                <h2 class="booking-heading-main mt-1 mb-1">Follow-up Appointment</h2>
                                <form action="{{ route('followUpAppointmentSubmit') }}" method="post">
                                    @csrf
                                    <div class="row">

                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                            @php $first_name=''; @endphp
                                            @if( old('first_name'))
                                            @php $first_name=old('first_name'); @endphp
                                            @endif
                                            <label for="" class="form-label">First Name<span class="red-star">*</span></label>
                                            <input type="text" name="first_name" value="{{ $first_name }}" class="form-control" required>
                                        </div>
                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                            @php $last_name=''; @endphp
                                            @if( old('last_name'))
                                            @php $last_name=old('last_name'); @endphp
                                            @endif
                                            <label for="" class="form-label">Last Name</label>
                                            <input type="text" name="last_name" value="{{ $last_name }}" class="form-control">
                                        </div>
                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                            @php $email=''; @endphp
                                            @if( old('email'))
                                            @php $email=old('email'); @endphp
                                            @endif
                                            <label for="" class="form-label">Email<span class="red-star">*</span></label>
                                            <input type="email" name="email" value="{{ $email }}" class="form-control" required>
                                        </div>
                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                            @php $phone=''; @endphp
                                            @if( old('phone'))
                                            @php $phone=old('phone'); @endphp
                                            @endif
                                            <label for="" class="form-label">Phone<span class="red-star">*</span></label>
                                            <input type="text" name="phone" value="{{ $phone }}" class="form-control" required>
                                        </div>
                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                            @php $wedding_date=date('Y-m-d'); @endphp
                                            @if( old('wedding_date'))
                                            @php $wedding_date=old('wedding_date'); @endphp
                                            @endif
                                            <label for="" class="form-label">Wedding Date<span class="red-star">*</span></label>
                                            <input type="date" name="wedding_date" value="{{$wedding_date}}" class="form-control" required>
                                        </div>
                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                            @php $appointment_date=date('Y-m-d'); @endphp
                                            @if( old('appointment_date'))
                                            @php $appointment_date=old('appointment_date'); @endphp
                                            @endif
                                            <label for="" class="form-label">Preferred Appointment Date<span class="red-star">*</span></label>
                                            <input type="date" name="appointment_date" value="{{ $appointment_date }}" class="form-control" required>
                                        </div>
                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                            @php $slot_id=0; @endphp
                                            @if( old('slot_id'))
                                            @php $slot_id=old('slot_id'); @endphp
                                            @endif
                                            <label for="" class="form-label">Preferred Appointment Time <span class="red-star">*</span></label>
                                            <select name="slot_id" class="form-control" required>
                                                @foreach($slots as $slot)
                                                <option value="{{ $slot->id }}" {!! ($slot_id==$slot->id) ? 'selected' : '' !!}>{!! date('h:i A',strtotime($slot->from_time)) .' - '. date('h:i A',strtotime($slot->to_time)) !!}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                            @php $previous_date=date('Y-m-d'); @endphp
                                            @if( old('previous_date'))
                                            @php $previous_date=old('previous_date'); @endphp
                                            @endif
                                            <label for="" class="form-label">Previous Appointment Date<span class="red-star">*</span></label>
                                            <input type="date" name="previous_date" value="{{$previous_date}}" class="form-control" required>
                                        </div>
                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                            @php $previous_quote_number=''; @endphp
                                            @if( old('previous_quote_number'))
                                            @php $previous_quote_number=old('previous_quote_number'); @endphp
                                            @endif
                                            <label for="" class="form-label">Previous Quote Number <span class="red-star">*</span></label>
                                            <input type="text" name="previous_quote_number" value="{{ $previous_quote_number }}" class="form-control" required>
                                        </div>


                                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                            @php $no_of_guests=''; @endphp
                                            @if( old('no_of_guests'))
                                            @php $no_of_guests=old('no_of_guests'); @endphp
                                            @endif
                                            <label for="" class="form-label">Number of Guest<span class="red-star">*</span></label>
                                            <input type="text" name="no_of_guests" value="{{ $no_of_guests }}" class="form-control" required>
                                        </div>



                                        <div class="col-6 mt-3 ">
                                            <input type="hidden" name="appointment_type" value="FU" />
                                            <button type="submit" class="btn  book-next">Book Appointment</button>
                                        </div>

                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- end follow up -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>

@endsection
@push('scripts')
<script src="{{ asset('js/rome.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script>