@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<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')

@if(session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif
@if(session('error'))
<div class="alert alert-danger">{{ session('error') }}</div>
@endif
<div id="alertBox" style="display:none;"></div>
<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <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>


<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">
            @csrf
            {{-- Basic Details --}}
            <div class="section-title mb-4">
                <h5><i class="ti tabler-user me-2"></i>Basic Details</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', $nextSheetNo) }}">
                    @error('sheet_no')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>


                <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">Mobile Number <span class="text-danger fw-bold">*</span></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">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 <span class="text-danger fw-bold">*</span></label>
    <input type="date" name="dob" id="dob" class="form-control" value="{{ old('dob') }}">
</div>

<div class="col-md-4">
    <label class="form-label">Age</label>
    <input type="number" name="age" id="age" class="form-control" placeholder="Age"
        value="{{ old('age') }}" readonly>
</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">
                        <option value="">Select Gender</option>
                        @foreach(['Male','Female','Other'] as $g)
                        <option value="{{ $g }}" {{ old('gender') == $g ? 'selected' : '' }}>{{ $g }}</option>
                        @endforeach
                    </select>
                </div>


               <div class="col-md-4">
    <label class="form-label">Blood Group (Optional)</label>
    <select name="blood_group" id="blood_group" class="form-select select2">
        <option value="">Type / Select Blood Group</option>
        @foreach(['A+','A-','B+','B-','AB+','AB-','O+','O-'] as $bg)
            <option value="{{ $bg }}" {{ old('blood_group') == $bg ? 'selected' : '' }}>
                {{ $bg }}
            </option>
        @endforeach
    </select>
</div>
 <div class="col-md-4">
                    <label class="form-label">Patient For <span class="text-danger fw-bold">*</span></label>
                    <select name="patient_for" class="form-select @error('patient_for') is-invalid @enderror">
                        <option value="">Select Type</option>
                        <option value="Dental" {{ old('patient_for') == 'Dental'   ? 'selected' : '' }}>Dental</option>
                        <option value="Hospital" {{ old('patient_for') == 'Hospital' ? 'selected' : '' }}>Hospital
                        </option>
                    </select>
                    @error('patient_for')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <!-- <div class="col-12">
                    <label class="form-label">Note</label>
                    <textarea name="note" class="form-control" rows="3"
                        placeholder="Any notes">{{ old('note') }}</textarea>
                </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 <span class="text-danger fw-bold">*</span></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<span class="text-danger fw-bold">*</span></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</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<span class="text-danger fw-bold">*</span></label>
                    <textarea name="reason_of_visit" class="form-control" rows="4"
                        placeholder="Describe reason for visit">{{ old('reason_of_visit') }}</textarea>
                </div>
            </div>
            <!-- {{-- Medical History --}}
            <div class="section-title my-4">
                <h5><i class="ti tabler-heart-rate-monitor me-2"></i>Medical History</h5>
            </div>

            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Blood Pressure</label>
                    <input type="text" name="blood_pressure" class="form-control" placeholder="e.g. 120/80"
                        value="{{ old('blood_pressure') }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Diabetes</label>
                    <select name="diabetes" class="form-select">
                        <option value="No" {{ old('diabetes') == 'No'  ? 'selected' : '' }}>No</option>
                        <option value="Yes" {{ old('diabetes') == 'Yes' ? 'selected' : '' }}>Yes</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Heart Disease</label>
                    <select name="heart_disease" class="form-select">
                        <option value="No" {{ old('heart_disease') == 'No'  ? 'selected' : '' }}>No</option>
                        <option value="Yes" {{ old('heart_disease') == 'Yes' ? 'selected' : '' }}>Yes</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Allergies</label>
                    <textarea name="allergies" class="form-control" rows="2"
                        placeholder="List any allergies">{{ old('allergies') }}</textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Chronic Conditions</label>
                    <textarea name="chronic_conditions" class="form-control" rows="2"
                        placeholder="Any chronic conditions">{{ old('chronic_conditions') }}</textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Current Medications</label>
                    <textarea name="current_medications" class="form-control" rows="2"
                        placeholder="Current medications">{{ old('current_medications') }}</textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Previous Surgeries</label>
                    <textarea name="previous_surgeries" class="form-control" rows="2"
                        placeholder="Previous surgeries">{{ old('previous_surgeries') }}</textarea>
                </div>
                <div class="col-12">
                    <label class="form-label">Family Medical History</label>
                    <textarea name="family_medical_history" class="form-control" rows="2"
                        placeholder="Family medical history">{{ old('family_medical_history') }}</textarea>
                </div>


                <div class="section-title my-4">
                    <h5><i class="ti tabler-phone me-2"></i>Personal information</h5>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email') }}"
                        placeholder="Email">
                </div>
               
                <div class="col-md-4">
                    <label class="form-label">Adhaar No</label>
                    <input type="text" name="adhaar_no" class="form-control" value="{{ old('adhaar_no') }}"
                        placeholder="Adhaar Number">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Marital Status</label>
                    <select name="marital_status" class="form-select">
                        <option value="">Select</option>
                        @foreach(['Single','Married','Divorced','Widowed'] as $ms)
                        <option value="{{ $ms }}" {{ old('marital_status') == $ms ? 'selected' : '' }}>{{ $ms }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Street</label>
                    <input type="text" name="street" class="form-control" value="{{ old('street') }}"
                        placeholder="Street">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Land Mark</label>
                    <input type="text" name="landmark" class="form-control" value="{{ old('landmark') }}"
                        placeholder="Land Mark">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Pin</label>
                    <input type="text" name="pin" class="form-control" value="{{ old('pin') }}" placeholder="Pin Code">
                </div>
                <div class="col-md-4">
                    <label class="form-label">City</label>
                    <input type="text" name="city" class="form-control" value="{{ old('city') }}" placeholder="City">
                </div>
                <div class="col-md-4">
                    <label class="form-label">State/UT <span class="text-danger fw-bold">*</span></label>
                    <input type="text" name="state" class="form-control" value="{{ old('state', '') }}"
                        placeholder="State">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Country <span class="text-danger fw-bold">*</span></label>
                    <input type="text" name="country" class="form-control" value="{{ old('country', 'India') }}"
                        placeholder="Country">
                </div>
                <div class="col-md-12">
                    <label class="form-label">Place</label>
                    <input type="text" name="place" class="form-control" value="{{ old('place') }}" placeholder="Place">
                </div>
            </div> -->



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

            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Insurance Provider</label>
                    <input type="text" name="insurance_provider" class="form-control" placeholder="Insurance company"
                        value="{{ old('insurance_provider') }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Policy Number</label>
                    <input type="text" name="policy_number" class="form-control" placeholder="Policy number"
                        value="{{ old('policy_number') }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Policy Expiry Date</label>
                    <input type="date" name="policy_expiry" class="form-control" value="{{ old('policy_expiry') }}">
                </div>
            </div>

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

            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Smoking</label>
                    <select name="smoking" class="form-select">
                        @foreach(['No','Yes','Ex-smoker'] as $s)
                        <option value="{{ $s }}" {{ old('smoking') == $s ? 'selected' : '' }}>{{ $s }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Alcohol</label>
                    <select name="alcohol" class="form-select">
                        @foreach(['No','Yes','Occasionally'] as $a)
                        <option value="{{ $a }}" {{ old('alcohol') == $a ? 'selected' : '' }}>{{ $a }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Diet</label>
                    <select name="diet" class="form-select">
                        @foreach(['Vegetarian','Non-Vegetarian','Vegan'] as $d)
                        <option value="{{ $d }}" {{ old('diet') == $d ? 'selected' : '' }}>{{ $d }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Exercise</label>
                    <select name="exercise" class="form-select">
                        @foreach(['Sedentary','Light','Moderate','Active'] as $e)
                        <option value="{{ $e }}" {{ old('exercise') == $e ? 'selected' : '' }}>{{ $e }}</option>
                        @endforeach
                    </select>
                </div>
            </div> -->

            <hr class="my-4">

            <div class="d-flex justify-content-center gap-2">
                <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">Save Patient</span>
                </button>
            </div>

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


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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('');
    }

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

        clearErrors();

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

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

        $.ajax({
            url: '{{ route("store_patient_full") }}',
            type: 'POST',
            data: $(this).serialize(),

            success: function (response) {

                submitBtn.prop('disabled', false);
                submitText.text('Save Patient');

                if (response.success) {

                    Toast.fire({
                        icon: 'success',
                        title: response.message,
                        background: '#198754',
                        color: '#fff'
                    });

                    setTimeout(function () {
                        window.location.href = '{{ route("patient") }}';
                    }, 1000);
                }
            },

            error: function (xhr) {

                submitBtn.prop('disabled', false);
                submitText.text('Save Patient');

                if (xhr.status === 422) {

                    const errors = xhr.responseJSON.errors;

                    $.each(errors, function (field, messages) {

                        const input = $('[name="' + field + '"]');

                        input.addClass('is-invalid');

                        if (input.next('.invalid-feedback').length) {
                            input.next('.invalid-feedback').text(messages[0]);
                        }

                    });

                    const firstError = Object.values(errors)[0][0];

                    Toast.fire({
                        icon: 'error',
                        title: firstError,
                        background: '#dc3545',
                        color: '#fff'
                    });

                } else {

                    Toast.fire({
                        icon: 'error',
                        title: 'Something went wrong.',
                        background: '#dc3545',
                        color: '#fff'
                    });

                    console.log(xhr.responseText);
                }
            }

        });

    });

});
</script>

<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>
$(document).ready(function () {
    $('.select2').select2({
        placeholder: "Select Blood Group",
        allowClear: true,
        width: '100%'
    });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {

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

    function calculateAge() {
        const dob = new Date(dobInput.value);

        if (!dobInput.value) {
            ageInput.value = "";
            return;
        }

        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 : "";
    }

    dobInput.addEventListener("change", calculateAge);

    // Calculate on page load if DOB already exists (old value)
    calculateAge();
});
</script>
@endsection