@extends('layouts.app')
@section('content')
    @php
        $locale = session()->get('locale') ? session()->get('locale') : App\Helpers\ConstantHelper::ENGLISH;
    @endphp
    <section class="pay-booking py-4 py-sm-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="top-head">
                        <h2>{{ __('label.book_your_appointment') }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-2 py-sm-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="services-tabs">

                        <div class="tab-content" id="nav-tabContent">
                            @include('customer.book-appoinment.nav-bar')

                            <div class="row justify-content-center">
                                <div class="col-md-7">
                                    <form class="form" role="post-data" method="POST"
                                        action="/api/book-appointments/store-slot" redirect="/book-appointments/detail"
                                        data-message="false">
                                        @csrf
                                        <input type="hidden" name="branch_id" value="{{ @$cart->branch_id }}">
                                        <input type="hidden" name="cart_id" value="{{ $cart->id }}">

                                        <div class="bg-light p-3 my-4">
                                            <div class="bnooking-help-txt">
                                                <h6>{{ __('label.below_you_can_find_list') }} <strong>
                                                        @foreach ($cart->services as $service)
                                                            {{ $locale == App\Helpers\ConstantHelper::ARABIC ? $service->name_ar : $service->name_en }}
                                                            @unless ($loop->last)
                                                                ,
                                                            @endunless
                                                        @endforeach
                                                    </strong></h6>
                                                <p>{{ __('label.select_date_and_time_for_slot_booking') }}</p>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>{{ __('static.selected_staff') }}<a
                                                                href="{{ url('book-appointments/staffs/' . $cart->branch_id) }}"><i
                                                                    class="fa fa-edit ml-2"
                                                                    style="color:green"></i></a></label>
                                                        <div class="form-control">
                                                            {{ $cart->staff->name }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>{{ __('label.appointment_date') }} <span
                                                                class="text-danger">*</span></label>
                                                        <input type="date" name="date" id="date"
                                                            class="form-control" value="{{ @$cart->date }}"
                                                            onchange="fetchAvailableSlots();" min="2025-12-10"
                                                            max="2025-12-25">
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>{{ __('label.Appointment Time') }} <span
                                                                class="text-danger">*</span></label>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <select class="chosen-select form-control" name="slot"
                                                                    id="slot">
                                                                    <option value="">
                                                                        {{ __('static.available_slots') }}</option>
                                                                </select>
                                                                @error('slot')
                                                                    <div class="text-danger">{{ $message }}</div>
                                                                @enderror
                                                                <input type="hidden" name="start_time" id="start_time"
                                                                    value="{{ @$cart->start_time }}" />
                                                                <input type="hidden" name="end_time" id="end_time"
                                                                    value="{{ @$cart->end_time }}" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="d-flex mt-4 justify-content-between">
                                            <a href="{{ url('/book-appointments/services/' . $cart->branch_id) }}"
                                                class="btn btn-outline-secondary">
                                                <i class="fas fa-chevron-left mr-1"></i> {{ __('static.back') }}
                                            </a>
                                            <button type="button" class="btn btn-primary" role="button"
                                                data-request="ajax-submit" data-target="[role=post-data]"><i
                                                    class="fas fa-chevron-right mr-1"></i> {{ __('label.next') }}</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            fetchAvailableSlots();
        });

        function fetchAvailableSlots() {
            var params = {};
            params['search'] = $("#date").val();
            params['branch_id'] = "{{ $cart->branch_id }}";
            params['staff_id'] = "{{ $cart->staff_id }}";
            var app_url = "{{ config('app.url') }}";
            $.ajax({
                beforeSend: function(xhr) {},
                url: app_url + '/branches/slots',
                method: "GET",
                dataType: "json",
                data: params,
                success: function(response) {
                    $("#slot").empty("");
                    var slots = response.data;
                    if (slots.length > 0) {
                        var options = '<option value="">' + '{{ __('static.select_slot') }}' + '</option>';
                        $.each(slots, function(index, value) {
                            let startTime = $("#start_time").val();
                            let endTime = $("#end_time").val();
                            let selected = '';
                            if (startTime && endTime) {
                                let selected_value = startTime + ' - ' + endTime;
                                selected = selected_value === value ? "selected" : "";
                            }

                            options += '<option value="' + value + '" ' + selected + '>' +
                                convertToAMPM(value?.split(" - ")[0]) + " - " + convertToAMPM(value
                                    ?.split(" - ")[1]) + '</option>';
                        });
                    } else {
                        var options = '<option value="">' + "{{ __('static.no_slot_available') }}" +
                            '</option>';
                    }
                    $("#slot").append(options);
                },
            });
        }

        function convertToAMPM(time24) {
            // Parse the time string in "hh:mm:ss" format
            const timeParts = time24.split(":");
            const hours = parseInt(timeParts[0]);
            const minutes = parseInt(timeParts[1]);

            // Determine whether it's AM or PM
            const ampm = hours >= 12 ? "PM" : "AM";

            // Convert the hours to 12-hour format
            const hours12 = hours % 12 || 12;

            // Format the time as "hh:mm AM/PM"
            const time12 = `${hours12.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")} ${ampm}`;

            return time12;
        }

        $("#slot").on("change", function() {
            var selectedSlot = $(this).val();
            if (selectedSlot) {
                // Split the selected slot into start and end times
                var parts = selectedSlot.split(' - ');
                var startTime = parts[0];
                var endTime = parts[1];

                // Do something with the startTime and endTime, e.g., display them
                $("#start_time").val(startTime);
                $("#end_time").val(endTime);
            } else {
                // Handle the case where "Select slot" or no option is selected
                $("#start_time").val("");
                $("#end_time").val("");
            }
        });
    </script>
@endsection