@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.schedules.title') }}</h1>
                </div>
                <a href="{{ route('admin.dashboard.clinic.doctors.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">
                <div class="card card-flush py-4">
                    <div class="card-body">
                        <p class="text-muted mb-7">{{ trans('clinic.schedules.intro') }}</p>

                        <div class="row g-9 mb-7">
                            @if ($branches->count() > 1)
                                <div class="col-md-4">
                                    <label class="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 class="col-md-4">
                                <label class="required form-label">{{ trans('clinic.schedules.select_clinic') }}</label>
                                <select id="clinic_profile_id" class="form-select">
                                    <option value="">—</option>
                                    @foreach ($clinics as $clinic)
                                        <option value="{{ $clinic->id }}" data-branch-id="{{ $clinic->branch_id }}">{{ $clinic->branch->name }} — {{ $clinic->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="required form-label">{{ trans('clinic.schedules.select_doctor') }}</label>
                                <select id="doctor_id" class="form-select" disabled>
                                    <option value="">{{ trans('clinic.schedules.choose_clinic_first') }}</option>
                                </select>
                            </div>
                        </div>

                        <button type="button" id="GoToScheduleBtn" class="btn btn-primary" disabled>
                            {{ trans('clinic.schedules.go') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(function () {
            var scheduleUrlTemplate = '{{ route('admin.dashboard.clinic.doctors.schedule.edit', ['doctor' => '__DOCTOR_ID__']) }}?clinic=__CLINIC_ID__';

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

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

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

            function refreshDoctors() {
                var clinicId = $('#clinic_profile_id').val();
                var $doctor = $('#doctor_id');

                $doctor.empty();
                updateGoButton();

                if (!clinicId) {
                    $doctor.append($('<option value=""></option>').text('{{ trans('clinic.schedules.choose_clinic_first') }}'));
                    $doctor.prop('disabled', true);
                    return;
                }

                $doctor.prop('disabled', false).append($('<option value=""></option>').text('—'));

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

            function updateGoButton() {
                var ready = $('#clinic_profile_id').val() && $('#doctor_id').val();
                $('#GoToScheduleBtn').prop('disabled', !ready);
            }

            $('#branch_id').on('change', filterClinicsByBranch);
            $('#clinic_profile_id').on('change', refreshDoctors);
            $('#doctor_id').on('change', updateGoButton);

            $('#GoToScheduleBtn').on('click', function () {
                var clinicId = $('#clinic_profile_id').val();
                var doctorId = $('#doctor_id').val();

                if (!clinicId || !doctorId) {
                    return;
                }

                window.location.href = scheduleUrlTemplate
                    .replace('__DOCTOR_ID__', doctorId)
                    .replace('__CLINIC_ID__', clinicId);
            });

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