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

@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') }}">
                        <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="patientForm">
    @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-3">
                        <label class="form-label">Sheet No *</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-2">
                        <label class="form-label">Prefix</label>
                        <select name="prefix" class="form-select">
                            <option value="">--</option>
                            @foreach(['Mr.','Mrs.','Ms.','Dr.','Prof.'] as $p)
                                <option value="{{ $p }}" {{ old('prefix') == $p ? 'selected' : '' }}>{{ $p }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">First Name *</label>
                        <input type="text" name="first_name" class="form-control"
                               value="{{ old('first_name') }}" placeholder="First Name">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Middle Name</label>
                        <input type="text" name="middle_name" class="form-control"
                               value="{{ old('middle_name') }}" placeholder="Middle">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Last Name *</label>
                        <input type="text" name="last_name" class="form-control"
                               value="{{ old('last_name') }}" placeholder="Last Name">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Patient Name *</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 *</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</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">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">DOB *</label>
                        <input type="date" name="dob" class="form-control"
                               value="{{ old('dob') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Age (Y/M/D)</label>
                        <div class="d-flex gap-2">
                            <input type="number" name="age_years" class="form-control"
                                   placeholder="Y" value="{{ old('age_years') }}">
                            <input type="number" name="age_months" class="form-control"
                                   placeholder="M" value="{{ old('age_months') }}">
                            <input type="number" name="age_days" class="form-control"
                                   placeholder="D" value="{{ old('age_days') }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Gender *</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">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">Blood Group</label>
                        <select name="blood_group" class="form-select">
                            <option value="">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 *</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-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 *</label>
                        <input type="text" name="state" class="form-control"
                               value="{{ old('state', 'Odisha') }}" placeholder="State">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Country *</label>
                        <input type="text" name="country" class="form-control"
                               value="{{ old('country', 'India') }}" placeholder="Country">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Place</label>
                        <input type="text" name="place" class="form-control"
                               value="{{ old('place') }}" placeholder="Place">
                    </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 (Optional)</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</label>
                        <input type="text" name="guardian_alternate_no" class="form-control"
                               value="{{ old('guardian_alternate_no') }}" placeholder="Alternate Number">
                    </div>
                </div>

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

                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Department</label>
                        <select name="department" class="form-select">
                            <option value="">--Select--</option>
                            @foreach(['General','Dental','Cardiology','Orthopedics','Pediatrics','Gynecology','ENT','Dermatology','Neurology','Other'] as $d)
                                <option value="{{ $d }}" {{ old('department') == $d ? 'selected' : '' }}>{{ $d }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">Referred By</label>
                        <div class="d-flex flex-wrap gap-3 mt-2">
                            @foreach(['HOSPITAL','DOCTOR','SELF','AGENT','OTHER'] as $ref)
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="referred_by"
                                           value="{{ $ref }}" id="ref_{{ $ref }}"
                                           {{ old('referred_by') == $ref ? 'checked' : '' }}>
                                    <label class="form-check-label" for="ref_{{ $ref }}">{{ $ref }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

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

                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Nominee Name</label>
                        <input type="text" name="nominee_name" class="form-control"
                               value="{{ old('nominee_name') }}" placeholder="Nominee Name">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Nominee Relation</label>
                        <input type="text" name="nominee_relation" class="form-control"
                               value="{{ old('nominee_relation') }}" placeholder="Father / Mother / Spouse">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Nominee Number</label>
                        <input type="text" name="nominee_number" class="form-control"
                               value="{{ old('nominee_number') }}" placeholder="Mobile 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" rows="4"
                                  placeholder="Describe reason for visit">{{ old('reason_of_visit') }}</textarea>
                    </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>

    <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; }
    </style>
    <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('');
    }

    $('#patientForm').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") }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    $('#alertBox')
                        .html(`<div class="alert alert-success">${response.message}</div>`)
                        .show();
                        Toast.fire({icon: 'success',title: response.message});

                    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) {
                        $(`[name="${field}"]`).addClass('is-invalid');
                        $(`[name="${field}"]`).siblings('.invalid-feedback').text(messages[0]);
                    });
                } else {
                    $('#alertBox')
                        .html(`<div class="alert alert-danger">Something went wrong. Please try again.</div>`)
                        .show();
                        Toast.fire({icon: 'error',title: response.message});

                }
            }
        });
    });

});
</script>
@endsection