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

<style>
    .card {
        border-radius: 18px;
    }

    .form-control,
    .form-select {
        min-height: 46px;
        border-radius: 10px;
    }

    .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;
    }

    .select2-container .select2-selection--single {
        height: 38px !important;
        border: 1px solid #ced4da !important;
        border-radius: .375rem !important;
        padding-top: 4px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }

    .select2-container {
        width: 100% !important;
    }
</style>

@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5 class="mb-0">
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('patient_list') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Add Patient
            </h5>
        </div>

        <div class="col-auto">
            <div class="d-flex gap-2">
                <a href="{{ route('blood_group') }}" class="btn btn-primary">
                    <i class="ti tabler-user-plus me-1"></i>
                    Add Blood Group
                </a>

                <a href="{{ route('address') }}" class="btn btn-primary">
                    Address
                </a>
            </div>
        </div>
    </div>


    <div class="card border-0 shadow-sm">
        <div class="card-header py-3">
            <h4 class="fw-bold mb-1">Add New Patient</h4>
            <p class="text-muted mb-0">Register a new patient in the clinic system</p>
        </div>

        <div class="card-body p-4">
            <form id="patientFullForm" action="{{ route('store_patient_full') }}" method="POST">
                @csrf
                {{-- Basic Details --}}
                <div class="section-title mb-4">
                    <h5><i class="ti tabler-user me-2"></i>Basic Details <small class="text-danger">( * Indicates mandatory
                            fields)</small></h5>
                </div>

                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">OP Number <span class="text-danger fw-bold">*</span></label>
                        <input type="text" name="sheet_no" class="form-control @error('sheet_no') is-invalid @enderror"
                            value="{{ old('sheet_no') }}" placeholder="Enter OP">
                        @error('sheet_no')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <!-- , $nextSheetNo -->

                    <div class="col-md-4">
                        <label class="form-label">Patient Name <span class="text-danger fw-bold">*</span></label>
                        <input type="text" name="patient_name"
                            class="form-control @error('patient_name') is-invalid @enderror"
                            value="{{ old('patient_name') }}" placeholder="Full Name">
                        @error('patient_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                                        <div class="col-md-4">
                        <label class="form-label">Age <span class="text-danger fw-bold">*</span></label>
                        <input type="text" name="age" id="age" class="form-control @error('age') is-invalid @enderror"
                            placeholder="Age" value="{{ old('age') }}">
                        @error('age')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Gender <span class="text-danger fw-bold">*</span></label>

                        <select name="gender" class="form-select @error('gender') is-invalid @enderror">
                            <option value="">Select Gender</option>
                            @foreach(['Male', 'Female', 'Other'] as $g)
                                <option value="{{ $g }}" {{ old('gender') == $g ? 'selected' : '' }}>
                                    {{ $g }}
                                </option>
                            @endforeach
                        </select>

                        @error('gender')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Mobile Number </label>
                        <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror"
                            value="{{ old('phone') }}" placeholder="Mobile Number">
                        @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>



 
                <div class="col-md-4">
                    <label class="form-label">
                        Place <span class="text-danger fw-bold">*</span>
                    </label>

                    <select name="place"
                            id="place"
                            class="form-control @error('place') is-invalid @enderror"
                            style="width: 100%;">

                        @if(old('place'))
                            <option value="{{ old('place') }}" selected>
                                {{ old('place') }}
                            </option>
                        @endif

                    </select>

                    @error('place')
                        <div class="invalid-feedback d-block">
                            {{ $message }}
                        </div>
                    @enderror
                </div>

                <div class="section-title my-4">
                    <h5>
                        <i class="ti tabler-calendar me-2"></i>
                        Appointment
                    </h5>
                </div>


                <div class="row g-3">

                    <div class="col-md-12">

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="bookAppointment" name="book_appointment"
                                value="yes" {{ old('book_appointment') == 'yes' ? 'checked' : '' }}>

                            <label class="form-check-label fw-bold">
                                Book Appointment
                            </label>
                        </div>

                    </div>
                                    <div id="appointmentSection" style="display:none;">

                    <div class="row g-3 mt-2">


                        <div class="col-md-4">

                            <label class="form-label">
                                Doctor <span class="text-danger">*</span>
                            </label>

                            <select name="doctor_id" class="form-select @error('doctor_id') is-invalid @enderror">

                                <option value="">
                                    Select Doctor
                                </option>

                                @foreach($doctors as $doctor)

                                    <option value="{{ $doctor->id }}" {{ old('doctor_id') == $doctor->id ? 'selected' : '' }}>
                                        {{ $doctor->doctor_name }} - {{ $doctor->specialization }}
                                    </option>

                                @endforeach

                            </select>

                            @error('doctor_id')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        <div class="col-md-4">

                            <label class="form-label">
                                Token Number
                            </label>

                            <input type="text" name="token_number" id="tokenNumber" class="form-control" 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"
                                value="{{now()->format('Y-m-d')}}">

                        </div>



                        <div class="col-md-4">

                            <label class="form-label">
                                Appointment Time
                            </label>

                            <input type="text" name="appointment_time" class="form-control"
                                value="{{ now()->format('h:i A') }}">

                        </div>


                    </div>

                </div>

                <hr class="my-4">

                <div class="d-flex justify-content-center gap-2 mb-3">
                    <button type="reset" class="btn btn-label-secondary">Reset</button>
                    <button type="submit" class="btn btn-primary" id="submitBtn">
                        <i class="ti tabler-device-floppy me-1"></i>
                        <span id="submitText">Add Patient</span>
                    </button>
                </div>
                <hr class="my-4">

                </div>
                    <div class="col-md-4">
                        <label class="form-label">Blood Group (Optional)</label>

                        <select name="blood_group_id" id="blood_group_id" class="form-select select2">
                            <option value="">Select Blood Group</option>

                            @foreach($bloodGroups as $bloodGroup)
                                <option value="{{ $bloodGroup->id }}" {{ old('blood_group_id') == $bloodGroup->id ? 'selected' : '' }}>
                                    {{ $bloodGroup->group }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Alternate Number (Optional)</label>
                        <input type="text" name="alternate_number" class="form-control"
                            value="{{ old('alternate_number') }}" placeholder="Alternate Number">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">DOB </label>
                        <input type="date" name="dob" id="dob" class="form-control @error('dob') is-invalid @enderror"
                            max="{{ date('Y-m-d') }}" value="{{ old('dob') }}">
                        @error('dob')<div class="invalid-feedback">{{ $message }}</div>@enderror

                    </div>

                </div>

                {{-- Emergency Contact --}}
                <div class="section-title my-4">
                    <h5><i class="ti tabler-phone me-2"></i>Emergency Contact</h5>
                </div>

                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Guardian Name </label>
                        <input type="text" name="guardian_name" class="form-control" value="{{ old('guardian_name') }}"
                            placeholder="Guardian Name">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Guardian Mobile No </label>
                        <input type="text" name="guardian_mobile" class="form-control" value="{{ old('guardian_mobile') }}"
                            placeholder="Mobile Number">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Relation</label>
                        <select name="guardian_relation" class="form-select">
                            <option value="">--Select--</option>
                            @foreach(['Father', 'Mother', 'Spouse', 'Sibling', 'Friend', 'Other'] as $r)
                                <option value="{{ $r }}" {{ old('guardian_relation') == $r ? 'selected' : '' }}>{{ $r }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Guardian Alternate No (Optional)</label>
                        <input type="text" name="guardian_alternate_no" class="form-control"
                            value="{{ old('guardian_alternate_no') }}" placeholder="Alternate Number">
                    </div>
                </div>


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

                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Reason of Visit</label>
                        <textarea name="reason_of_visit" class="form-control @error('reason_of_visit') is-invalid @enderror"
                            rows="4" placeholder="Describe reason for visit">{{ old('reason_of_visit') }}</textarea>
                        @error('reason_of_visit')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>



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

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    <script>
        $(document).ready(function () {

            $('#patientFullForm').on('submit', function () {

                let btn = $('#submitBtn');

                btn.prop('disabled', true);

                $('#submitText').html(`
                <span class="spinner-border spinner-border-sm me-1"></span>
                Processing...
            `);

            });

        });
    </script>
    <script>
        $(document).ready(function () {

            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });

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


        });
    </script>


<script>
    (function initSelect2WhenReady() {
        // Some layouts load their own jQuery bundle after this page's scripts,
        // which wipes out the select2 plugin registered on the earlier $.
        // Poll until $.fn.select2 genuinely exists before initializing anything.
        if (typeof jQuery === 'undefined' || typeof jQuery.fn.select2 === 'undefined') {
            setTimeout(initSelect2WhenReady, 50);
            return;
        }

        var $ = jQuery;

        $('.select2').select2({
            placeholder: "Select Blood Group",
            allowClear: true,
            width: '100%'
        });

        $('#place').select2({
            placeholder: "Search or Type Place",
            allowClear: true,
            tags: true,
            width: '100%',

            language: {
                noResults: function () {
                    return "Place not found.";
                }
            },

            ajax: {
                url: "{{ route('place.search') }}",
                dataType: 'json',
                delay: 250,

                data: function (params) {
                    return {
                        q: params.term
                    };
                },

                processResults: function (data) {
                    return data;
                },

                cache: true
            },

            minimumInputLength: 1
        });
    })();
</script>


    <script>
        document.addEventListener("DOMContentLoaded", function () {

            const dobInput = document.getElementById("dob");
            const ageInput = document.getElementById("age");

            function calculateAge() {

                if (!dobInput.value) {
                    // No DOB selected - allow manual age
                    ageInput.removeAttribute("readonly");
                    return;
                }

                const dob = new Date(dobInput.value);
                const today = new Date();

                let age = today.getFullYear() - dob.getFullYear();

                const monthDiff = today.getMonth() - dob.getMonth();

                if (
                    monthDiff < 0 ||
                    (monthDiff === 0 && today.getDate() < dob.getDate())
                ) {
                    age--;
                }

                ageInput.value = age >= 0 ? age : "";

                // DOB selected - prevent manual change
                ageInput.setAttribute("readonly", true);
            }


            dobInput.addEventListener("change", calculateAge);


            // On page load
            calculateAge();

        });
    </script>

    <script>

        $(document).ready(function () {

            function toggleAppointment() {

                if ($('#bookAppointment').is(':checked')) {

                    $('#appointmentSection').show();

                    $('#appointmentSection')
                        .find('input,select')
                        .prop('disabled', false);

                }
                else {

                    $('#appointmentSection').hide();

                    $('#appointmentSection')
                        .find('input,select')
                        .prop('disabled', true);

                }

            }


            $('#bookAppointment').change(function () {

                toggleAppointment();

                if ($(this).is(':checked')) {
                    generateToken();
                }

            });


            $('#appointmentDate').change(function () {

                generateToken();

            });


            // Important for validation error
            toggleAppointment();


            @if(old('book_appointment') == 'yes')
                generateToken();
            @endif


    });


        function generateToken() {

            let date = $('#appointmentDate').val();

            $.ajax({

                url: "{{route('get_token_number')}}",

                type: "GET",

                data: {
                    date: date
                },

                success: function (response) {

                    $('#tokenNumber').val(response.token);

                }

            });

        }




    </script>
@endsection