@extends('dashboard.admin.layouts.master')

@section('content')
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('clinic.bookings.add') }}</h1>
                </div>
                <a href="{{ route('admin.dashboard.clinic.bookings.index') }}" class="btn btn-sm fw-bold btn-secondary">{{ trans('clinic.common.back') }}</a>
            </div>
        </div>

        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-xxl">
                <form id="AdminBookingForm" action="{{ route('admin.dashboard.clinic.bookings.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="followup_id" value="{{ $followup?->id }}">
                    @if ($lead)
                        <input type="hidden" name="lead_id" value="{{ $lead->id }}">
                        <div class="alert alert-primary d-flex align-items-center gap-3 mb-5">
                            <i class="bi bi-people fs-2 text-primary"></i>
                            <div>
                                {{ trans('crm.convert.booking_for', ['name' => $lead->name]) }}
                                @if ($lead->offer || $lead->interest)
                                    <span class="text-muted">— {{ $lead->offer?->title ?? $lead->interest }}</span>
                                @endif
                                <a href="{{ route('admin.dashboard.crm.leads.show', $lead) }}" class="ms-2 fw-bold">{{ trans('crm.list.open') }}</a>
                            </div>
                        </div>
                    @endif
                    <div class="card card-flush py-4">
                        <div class="card-body">
                            @if ($followup)
                                {{-- Re-examination booking: patient and the original visit are fixed by the
                                     follow-up record and shown read-only; only the new date/time is editable.
                                     store() re-derives patient/doctor/clinic/type server-side from $followup
                                     rather than trusting these hidden fields, so this is a UX guard, not the
                                     security boundary. --}}
                                <input type="hidden" name="patient_id" value="{{ $followup->patient_id }}">
                                <input type="hidden" name="clinic_profile_id" id="clinic_profile_id" value="{{ $followup->clinic_profile_id }}">
                                <input type="hidden" name="doctor_id" id="doctor_id" value="{{ $followup->doctor_id }}">
                                <input type="hidden" name="type" value="followup">

                                <div class="alert alert-info mb-7">
                                    {{ trans('clinic.followups.booking_from_banner', [
                                        'patient' => $followup->patient->name,
                                        'date' => optional($followup->booking->scheduled_at)->format('Y-m-d'),
                                    ]) }}
                                </div>

                                <div class="row g-5 mb-7">
                                    <div class="col-md-6">
                                        <div class="text-muted fs-8 text-uppercase">{{ trans('clinic.followups.patient') }}</div>
                                        <div class="fw-bold fs-6">{{ $followup->patient->name }} — {{ $followup->patient->email }}</div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="text-muted fs-8 text-uppercase">{{ trans('clinic.followups.doctor') }}</div>
                                        <div class="fw-bold fs-6">{{ $followup->doctor->name }} ({{ $followup->doctor->specialty->name }})</div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="text-muted fs-8 text-uppercase">{{ trans('clinic.followups.clinic') }}</div>
                                        <div class="fw-bold fs-6">{{ $followup->clinicProfile->branch->name }} — {{ $followup->clinicProfile->name }}</div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="text-muted fs-8 text-uppercase">{{ trans('clinic.followups.last_visit') }}</div>
                                        <div class="fw-bold fs-6">{{ optional($followup->booking->scheduled_at)->format('Y-m-d') }}</div>
                                    </div>
                                </div>
                            @else
                                <div class="row g-9 mb-7">
                                    <div class="col-md-6">
                                        <label class="required form-label">{{ trans('clinic.bookings.patient') }}</label>
                                        <select name="patient_id" id="patient_id" class="form-select @error('patient_id') is-invalid @enderror">
                                            @if ($selectedPatient)
                                                <option value="{{ $selectedPatient->id }}" selected>{{ $selectedPatient->name }} — {{ $selectedPatient->email }}</option>
                                            @endif
                                        </select>
                                        @error('patient_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    @if ($branches->count() > 1)
                                        <div class="col-md-6">
                                            <label class="required form-label">{{ trans('clinic.clinics.branch_source') }}</label>
                                            <select id="branch_id" class="form-select">
                                                <option value="">—</option>
                                                @foreach ($branches as $branch)
                                                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif
                                </div>

                                <div class="row g-9 mb-7">
                                    <div class="col-md-6">
                                        <label class="required form-label">{{ trans('clinic.clinics.title') }}</label>
                                        <select name="clinic_profile_id" id="clinic_profile_id" class="form-select @error('clinic_profile_id') is-invalid @enderror">
                                            <option value="">—</option>
                                            @foreach ($clinics as $clinic)
                                                <option value="{{ $clinic->id }}" data-branch-id="{{ $clinic->branch_id }}" @selected(old('clinic_profile_id', $lead?->offer?->clinic_profile_id) == $clinic->id)>{{ $clinic->branch->name }} — {{ $clinic->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('clinic_profile_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="required form-label">{{ trans('clinic.doctors.title') }}</label>
                                        <select name="doctor_id" id="doctor_id" class="form-select @error('doctor_id') is-invalid @enderror">
                                            <option value="">—</option>
                                        </select>
                                        @error('doctor_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>

                                <div class="row g-9 mb-7">
                                    <div class="col-md-6">
                                        <label class="required form-label">{{ trans('clinic.bookings.type') }}</label>
                                        @php $selectedType = old('type', 'visit'); @endphp
                                        <select name="type" class="form-select @error('type') is-invalid @enderror">
                                            <option value="visit" @selected($selectedType === 'visit')>{{ trans('clinic.bookings.visit') }}</option>
                                            <option value="online" @selected($selectedType === 'online')>{{ trans('clinic.bookings.online') }}</option>
                                            <option value="followup" @selected($selectedType === 'followup')>{{ trans('clinic.bookings.followup') }}</option>
                                        </select>
                                        @error('type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                            @endif

                            <div class="row g-9 mb-7">
                                <div class="col-md-4">
                                    <label class="required form-label">{{ trans('clinic.bookings.date') }}</label>
                                    <input type="date" name="date" id="date" value="{{ old('date', $followup?->due_date?->format('Y-m-d')) }}" min="{{ now()->format('Y-m-d') }}" class="form-control @error('date') is-invalid @enderror">
                                    @error('date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            <div class="row g-9 mb-7">
                                <div class="col-md-12">
                                    <label class="required form-label">{{ trans('clinic.bookings.available_slots') }}</label>
                                    <input type="hidden" name="time" id="time_input" value="{{ old('time') }}">
                                    <div id="slotsContainer" class="d-flex flex-wrap gap-2">
                                        <div class="text-muted">{{ trans('clinic.bookings.pick_doctor_clinic_date') }}</div>
                                    </div>
                                    @error('time')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>
                        <div class="card-footer d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">{{ trans('clinic.common.save') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
    {!! JsValidator::formRequest('App\Http\Requests\Admin\Clinic\StoreAdminBookingRequest', '#AdminBookingForm') !!}

    <script>
        $(function () {
            var isFollowup = {{ $followup ? 'true' : 'false' }};

            if (!isFollowup) {
                $('#patient_id').select2({
                    ajax: {
                        url: '{{ route('admin.dashboard.clinic.bookings.patients-search') }}',
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            return { search: params.term, page: params.page || 1 };
                        },
                        processResults: function (data) {
                            return { results: data.data };
                        },
                        cache: true
                    },
                    placeholder: '{{ trans('clinic.bookings.patient_search_placeholder') }}',
                    minimumInputLength: 1,
                    allowClear: true
                });
            }

            var oldTime = '{{ old('time') }}';

            function renderSlots(slots) {
                var $container = $('#slotsContainer');
                $container.empty();
                $('#time_input').val('');

                if (!slots.length) {
                    $container.append($('<div class="text-muted"></div>').text('{{ trans('clinic.bookings.no_slots') }}'));
                    return;
                }

                slots.forEach(function (slot) {
                    var $btn = $('<button type="button" class="btn btn-sm btn-outline btn-outline-dashed btn-outline-primary"></button>')
                        .text(slot)
                        .data('slot', slot)
                        .on('click', function () {
                            $('#slotsContainer button').removeClass('btn-primary active').addClass('btn-outline-primary');
                            $(this).addClass('btn-primary active').removeClass('btn-outline-primary');
                            $('#time_input').val(slot);
                        });

                    if (slot === oldTime) {
                        $btn.addClass('btn-primary active').removeClass('btn-outline-primary');
                        $('#time_input').val(slot);
                    }

                    $container.append($btn);
                });
            }

            function refreshSlots() {
                var doctorId = $('#doctor_id').val();
                var clinicId = $('#clinic_profile_id').val();
                var date = $('#date').val();
                var $container = $('#slotsContainer');

                if (!doctorId || !clinicId || !date) {
                    $container.empty().append($('<div class="text-muted"></div>').text('{{ trans('clinic.bookings.pick_doctor_clinic_date') }}'));
                    $('#time_input').val('');
                    return;
                }

                $container.empty().append($('<div class="text-muted"></div>').text('...'));

                $.getJSON('{{ route('admin.dashboard.clinic.bookings.available-slots') }}', {
                    doctor_id: doctorId,
                    clinic_profile_id: clinicId,
                    date: date
                }).done(function (data) {
                    renderSlots(data.slots || []);
                });
            }

            function filterClinicsByBranch() {
                var branchId = $('#branch_id').val();
                var $clinic = $('#clinic_profile_id');

                $clinic.find('option[data-branch-id]').each(function () {
                    $(this).toggle(!branchId || $(this).data('branch-id') == branchId);
                });

                if ($clinic.find('option:selected').is(':hidden')) {
                    $clinic.val('');
                }
            }

            function refreshDoctors() {
                var clinicId = $('#clinic_profile_id').val();
                var oldDoctorId = '{{ old('doctor_id', $followup?->doctor_id ?? $lead?->offer?->doctor_id) }}';
                var $doctor = $('#doctor_id');

                $doctor.empty().append($('<option value=""></option>').text('—'));

                if (!clinicId) {
                    refreshSlots();
                    return;
                }

                $.getJSON('{{ route('admin.dashboard.clinic.bookings.clinic-doctors') }}', {
                    clinic_profile_id: clinicId
                }).done(function (response) {
                    (response.data || []).forEach(function (doctor) {
                        $doctor.append($('<option></option>').val(doctor.id).text(doctor.text));
                    });

                    if (oldDoctorId) {
                        $doctor.val(oldDoctorId);
                    }

                    refreshSlots();
                });
            }

            if (isFollowup) {
                // Doctor and clinic are fixed by the follow-up record (hidden inputs) — only
                // the date needs to trigger a slot refresh.
                $('#date').on('change', refreshSlots);
                refreshSlots();
            } else {
                $('#branch_id').on('change', filterClinicsByBranch);
                $('#clinic_profile_id').on('change', refreshDoctors);
                $('#doctor_id, #date').on('change', refreshSlots);

                filterClinicsByBranch();
                refreshDoctors();
            }
        });
    </script>
@endsection