@extends('layouts.admin.app')

@section('title', translate('Appointments'))

@push('css_or_js')

@endpush

@section('content')
    <div class="content container-fluid">
        <!-- Page Header -->
        <div class="d-flex flex-wrap gap-2 align-items-center mb-4">
            <h2 class="h1 mb-0 d-flex align-items-center gap-2">
                <img width="20" class="avatar-img" src="{{asset('assets/admin/img/icons/category.png')}}" alt="">
                <span class="page-header-title">
                    {{translate('Appointments')}}
                </span>
            </h2>
        </div>
        <!-- End Page Header -->

        <div class="row g-2">
            <div class="col-12 mb-3">
                <form action="{{ route('admin.appointments.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="input-label">{{ translate('user')}}</label>
                                        <select class="form-control" name="user_id" required>
                                            <option value="">Select User</option>
                                            @foreach($users as $user)
                                                <option value="{{ $user->id }}">
                                                    {{ $user->f_name . " " . $user->l_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="input-label">{{ translate('service_provider')}}</label>
                                        <select class="form-control appointment-service-provider"
                                                name="service_provider_id" required>
                                            <option value="">Select Service Provider</option>
                                            @foreach($serviceProviders as $serviceProvider)
                                                <option value="{{ $serviceProvider->id }}">
                                                    {{ $serviceProvider->f_name . " " . $serviceProvider->l_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="input-label">{{ translate('date')}}</label>
                                        <input type="date" name="date" id="date" class="form-control appointment-date"
                                               required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="input-label">{{ translate('slot')}}</label>
                                        <select class="form-control appointments-slots" name="slot" required></select>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end gap-3 mt-4">
                                <button type="reset" id="reset"
                                        class="btn btn-secondary">{{ translate('reset') }}</button>
                                <button type="submit" class="btn btn-primary">{{ translate('submit') }}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>


        <div class="row g-3">
            <div class="col-12">
                <div class="card card-body">
                    <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-top px-card pt-4">
                                <div class="row justify-content-between align-items-center gy-2">
                                    <div class="col-sm-4 col-md-6 col-lg-8">
                                        <h5 class="d-flex gap-1 mb-0">
                                            {{translate('Appointments Table')}}
                                            <span
                                                class="badge badge-soft-dark rounded-50 fz-12">{{ $appointments->total() }}</span>
                                        </h5>
                                    </div>
                                </div>
                            </div>
                            <!-- Table -->
                            <div class="py-4">
                                <div class="table-responsive datatable-custom">
                                    <table
                                        class="table table-borderless table-thead-bordered table-nowrap table-align-middle card-table">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>{{translate('Appointment ID')}}</th>
                                            <th>{{translate('Date')}}</th>
                                            <th>{{translate('Start Time')}}</th>
                                            <th>{{translate('End Time')}}</th>
                                            <th>{{translate('User')}}</th>
                                            <th>{{translate('service_provider')}}</th>
                                            <th>{{translate('status')}}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($appointments as $appointment)
                                            <tr>
                                                <td>{{ $appointment->id }}</td>
                                                <td>{{ $appointment->date }}</td>
                                                <td>{{ $appointment->start_time }}</td>
                                                <td>{{ $appointment->end_time }}</td>
                                                <td>
                                                    <div class="text-capitalize">
                                                        {{ $appointment->user->f_name . " " . $appointment->user->L_name }}
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="text-capitalize">
                                                        {{ $appointment->serviceProvider->f_name . " " . $appointment->serviceProvider->L_name }}
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="badge {{ $appointment->status->badge() }}">
                                                        <div class="text-capitalize">
                                                            {{ $appointment->status->label() }}
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="table-responsive mt-4 px-3">
                                    <div class="d-flex justify-content-lg-end">
                                        <!-- Pagination -->
                                        {!! $appointments->links() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Table -->
                </div>
            </div>

            @endsection

            @push('script_2')
                <script>
                    $(document).on('ready', function () {
                        $(document).on('change', '.appointment-date, .appointment-service-provider', async function () {
                            let date = $('.appointment-date').val(); // Get value of appointment date
                            let serviceProvider = $('.appointment-service-provider').val(); // Get value of appointment service provider

                            // Ensure that both date and service provider are provided before making the request
                            if (date && serviceProvider) {
                                $.ajaxSetup({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                                    }
                                });

                                try {
                                    let response = await $.ajax({
                                        url: '{{ route('admin.appointments.slots') }}',
                                        data: {
                                            date: date,
                                            service_provider: serviceProvider
                                        }
                                    });

                                    let slots = `<option value="">Select Slot</option>`;
                                    response.slots?.forEach(function (slot) {
                                        let capitalizedStatus = slot.status.charAt(0).toUpperCase() + slot.status.slice(1);
                                        slots += `<option value="${slot.key}" ${slot.status == "booked" ? "disabled" : ""}>
                                                ${slot.start_time} - ${slot.end_time} ${capitalizedStatus}
                                                </option>`;
                                    });
                                    $('.appointments-slots').html(slots);

                                } catch (error) {
                                    console.error("Error fetching appointment slots:", error);
                                }
                            } else {
                                // Clear slots if date or service provider is not provided
                                $('.appointments-slots').html(`<option value="">Select Slot</option>`);
                            }
                        });
                    });
                </script>
    @endpush