@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')

@section('content')

<div class="row align-items-center justify-content-between mb-3">
    <div class="col-auto">
        <h5>Appointment</h5>
    </div>
    <div class="col-auto">
        <a href="{{ route('appointment_report') }}" class="btn btn-primary">Appointment Report</a>
    </div>
</div>

{{-- Alert --}}
<div id="alertBox" style="display:none;"></div>

<div class="card border-0 shadow-sm">
    <div class="card-header">
        <h4 class="fw-bold mb-1">Book Appointment</h4>
        <p class="text-muted mb-0">Schedule a new patient appointment</p>
    </div>

    <div class="card-body">
        <form id="appointmentForm">
            @csrf

            {{-- Appointment Information --}}
            <div class="section-title mb-4">
                <h5><i class="ti tabler-calendar-event me-2"></i>Appointment Information</h5>
            </div>

            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Token id</label>
                    <input type="text" name="appointment_id" id="appointmentId"
                           class="form-control bg-light" value="{{ $nextId }}" readonly>
                </div>
                <div class="col-md-5">
                    <label class="form-label">Patient Name *</label>
                    <input type="text" name="patient_name" id="patientName"
                           class="form-control" placeholder="Enter Patient Name">
                    <div class="invalid-feedback" id="error_patient_name"></div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Patient Phone</label>
                    <input type="text" name="patient_phone" class="form-control"
                           placeholder="Enter Phone Number">
                </div>
            </div>

            {{-- Visit Details --}}
            <div class="section-title my-4">
                <h5><i class="ti tabler-stethoscope me-2"></i>Visit Details</h5>
            </div>

            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Department *</label>
                    <select name="department" id="departmentSelect" class="form-select">
                        <option value="">Select Department</option>
                        @foreach($specializations as $s)
                            <option value="{{ $s }}">{{ $s }}</option>
                        @endforeach
                    </select>
                    <div class="invalid-feedback" id="error_department"></div>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Doctor *</label>
                    <select name="doctor_id" id="doctorSelect" class="form-select">
                        <option value="">Select Department First</option>
                    </select>
                    <div class="invalid-feedback" id="error_doctor_id"></div>
                </div>

                <div class="col-md-4" id="doctorInfoDiv" style="display:none;">
                    <label class="form-label">Available Days</label>
                    <input type="text" class="form-control bg-light" id="doctorAvailableDays" readonly>
                </div>

                <div class="col-md-4" id="doctorTimeDiv" style="display:none;">
                    <label class="form-label">Available Time</label>
                    <input type="text" class="form-control bg-light" id="doctorAvailableTime" readonly>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Appointment Date *</label>
                    <input type="date" name="appointment_date" id="appointmentDate"
                           class="form-control" min="{{ date('Y-m-d') }}">
                    <div class="invalid-feedback" id="error_appointment_date"></div>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Appointment Time *</label>
                    <input type="time" name="appointment_time" id="appointmentTime" class="form-control">
                    <div class="invalid-feedback" id="error_appointment_time"></div>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Visit Type</label>
                    <select name="visit_type" class="form-select">
                        @foreach(['Consultation','Follow Up','Emergency','Routine Checkup'] as $vt)
                            <option value="{{ $vt }}">{{ $vt }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Token Number</label>
                    <input type="text" name="token_number" class="form-control"
                           value="{{ $token }}">
                </div>

                <div class="col-md-4">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select">
                        @foreach(['Scheduled','Confirmed','Completed','Cancelled'] as $st)
                            <option value="{{ $st }}">{{ $st }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- Symptoms & Notes --}}
            <div class="section-title my-4">
                <h5><i class="ti tabler-notes me-2"></i>Symptoms & Notes</h5>
            </div>

            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label">Symptoms / Reason for Visit</label>
                    <textarea rows="4" name="symptoms" class="form-control"
                              placeholder="Enter patient symptoms"></textarea>
                </div>
                <div class="col-12">
                    <label class="form-label">Additional Notes</label>
                    <textarea rows="3" name="notes" class="form-control"
                              placeholder="Additional notes"></textarea>
                </div>
            </div>

            <hr class="my-4">

            <div class="d-flex justify-content-center gap-2">
                <button type="reset" class="btn btn-light" id="resetBtn">Reset</button>
                <button type="submit" class="btn btn-primary" id="submitBtn">
                    <i class="ti tabler-calendar-plus me-1"></i>
                    <span id="submitText">Book Appointment</span>
                </button>
            </div>

        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {

    const doctors = @json($doctors);

    // Department change
    $('#departmentSelect').on('change', function() {
        const dept = $(this).val();
        const doctorSelect = $('#doctorSelect');

        doctorSelect.html('<option value="">Select Doctor</option>');
        $('#doctorInfoDiv').hide();
        $('#doctorTimeDiv').hide();

        if (!dept) return;

        const filtered = doctors.filter(d => d.specialization === dept);
        filtered.forEach(function(d) {
            doctorSelect.append(`<option value="${d.id}">${d.doctor_name}</option>`);
        });
    });

    // Doctor change
    $('#doctorSelect').on('change', function() {
        const doctorId = $(this).val();
        if (!doctorId) {
            $('#doctorInfoDiv').hide();
            $('#doctorTimeDiv').hide();
            return;
        }

        const doctor = doctors.find(d => d.id == doctorId);
        if (doctor) {
            $('#doctorAvailableDays').val(doctor.available_days ? doctor.available_days.join(', ') : '-');
            $('#doctorAvailableTime').val((doctor.start_time || '-') + ' to ' + (doctor.end_time || '-'));
            $('#appointmentTime').attr('min', doctor.start_time || '');
            $('#appointmentTime').attr('max', doctor.end_time || '');
            $('#doctorInfoDiv').show();
            $('#doctorTimeDiv').show();
        }
    });

    // Date validation
    $('#appointmentDate').on('change', function() {
        const doctorId = $('#doctorSelect').val();
        if (!doctorId) return;

        const doctor = doctors.find(d => d.id == doctorId);
        if (!doctor || !doctor.available_days || !doctor.available_days.length) return;

        const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
        const selectedDay = days[new Date($(this).val()).getDay()];

        if (!doctor.available_days.includes(selectedDay)) {
            alert(`Dr. ${doctor.doctor_name} is not available on ${selectedDay}.\nAvailable: ${doctor.available_days.join(', ')}`);
            $(this).val('');
        }
    });

    // Clear errors
    function clearErrors() {
        $('.form-control, .form-select').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    }

    // Show error
    function showError(field, message) {
        $(`[name="${field}"]`).addClass('is-invalid');
        $(`#error_${field}`).text(message).show();
    }

    // AJAX form submit
    $('#appointmentForm').on('submit', function(e) {
        e.preventDefault();

        clearErrors();

        const submitBtn = $('#submitBtn');
        const submitText = $('#submitText');

        submitBtn.prop('disabled', true);
        submitText.text('Booking...');

        $.ajax({
            url: '{{ route("store_appointment") }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    $('#alertBox')
                        .html(`<div class="alert alert-success">${response.message}</div>`)
                        .show();

                    setTimeout(function() {
                        window.location.href = '{{ route("appointment_report") }}';
                    }, 1000);
                }
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false);
                submitText.text('Book Appointment');

                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(field, messages) {
                        showError(field, messages[0]);
                    });
                } else {
                    $('#alertBox')
                        .html(`<div class="alert alert-danger">Something went wrong. Please try again.</div>`)
                        .show();
                }
            }
        });
    });

});
</script>

<style>
    .card { border-radius: 18px; }
    .form-control, .form-select { min-height: 50px; border-radius: 12px; }
    .form-control:focus, .form-select:focus { box-shadow: none; border-color: #696cff; }
    .section-title { border-left: 4px solid #696cff; padding-left: 12px; }
    .section-title h5 { margin: 0; font-weight: 700; }
    .card-header { border-bottom: 1px solid #edf1f7; }
</style>
@endsection