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

@section('content')
<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>
            Edit Patient
        </h5>
    </div>
</div>

@if(session('error'))
<div class="alert alert-danger">{{ session('error') }}</div>
@endif
@if(session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif

<div class="card border-0 shadow-sm">
    <div class="card-header py-3">
        <h4 class="fw-bold mb-1">Edit Patient</h4>
        <p class="text-muted mb-0">Update patient information</p>
    </div>

    <div class="card-body p-4">
        <form id="patientEditForm">
            @csrf
            @method('PUT')
            {{-- 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" class="form-control bg-light" value="{{ $patient->sheet_no }}" readonly>
                </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', $patient->prefix) == $p ? 'selected' : '' }}>{{ $p }}
                        </option>
                        @endforeach
                    </select>
                </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', $patient->patient_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', $patient->phone) }}">
                    @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', $patient->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', $patient->email) }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">DOB</label>
                    <input type="date" name="dob" class="form-control" value="{{ old('dob', $patient->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', $patient->age_years) }}">
                        <input type="number" name="age_months" class="form-control" placeholder="M"
                            value="{{ old('age_months', $patient->age_months) }}">
                        <input type="number" name="age_days" class="form-control" placeholder="D"
                            value="{{ old('age_days', $patient->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', $patient->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', $patient->adhaar_no) }}">
                </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', $patient->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', $patient->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', $patient->patient_for) == 'Dental'   ? 'selected' : '' }}>Dental
                        </option>
                        <option value="Hospital"
                            {{ old('patient_for', $patient->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', $patient->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', $patient->landmark) }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Pin</label>
                    <input type="text" name="pin" class="form-control" value="{{ old('pin', $patient->pin) }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">City</label>
                    <input type="text" name="city" class="form-control" value="{{ old('city', $patient->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', $patient->state) }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Country</label>
                    <input type="text" name="country" class="form-control"
                        value="{{ old('country', $patient->country ?? 'India') }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Place</label>
                    <input type="text" name="place" class="form-control" value="{{ old('place', $patient->place) }}">
                </div>
                <div class="col-12">
                    <label class="form-label">Note</label>
                    <textarea name="note" class="form-control" rows="3">{{ old('note', $patient->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', $patient->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', $patient->guardian_mobile) }}">
                </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', $patient->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', $patient->guardian_alternate_no) }}">
                </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', $patient->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="edit_ref_{{ $ref }}"
                                {{ old('referred_by', $patient->referred_by) == $ref ? 'checked' : '' }}>
                            <label class="form-check-label" for="edit_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', $patient->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', $patient->nominee_relation) }}">
                </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', $patient->nominee_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">{{ old('reason_of_visit', $patient->reason_of_visit) }}</textarea>
                </div>
            </div>

            <hr class="my-4">

            <div class="d-flex justify-content-between align-items-center">
                <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                    data-bs-target="#confirmDeleteModal">
                    <i class="ti tabler-trash me-1"></i> Delete Patient
                </button>
                <div class="d-flex gap-2">
                    <a href="{{ route('patient') }}" class="btn btn-light px-4">Cancel</a>
                    <button type="submit" class="btn btn-primary px-4" id="submitBtn">
                        <i class="ti tabler-device-floppy me-1"></i>
                        <span id="submitText">Save Changes</span>
                    </button>
                </div>
            </div>

        </form>

        <form id="deleteForm" action="{{ url('admin/patient/' . $patient->id . '/delete') }}" method="POST">
            @csrf
            @method('DELETE')
        </form>

    </div>
</div>

{{-- Delete Modal --}}
<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content" style="border-radius:16px;">
            <div class="modal-body text-center p-4">
                <div class="mb-3">
                    <div
                        style="width:60px;height:60px;background:#fff0f0;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;">
                        <i class="ti tabler-trash" style="font-size:28px;color:#dc3545;"></i>
                    </div>
                </div>
                <h5 class="fw-bold mb-1">Delete Patient</h5>
                <p class="text-muted mb-4">Are you sure you want to delete
                    <strong>{{ $patient->patient_name }}</strong>? This cannot be undone.
                </p>
                <div class="d-flex gap-2 justify-content-center">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger px-4"
                        onclick="document.getElementById('deleteForm').submit();">
                        <i class="ti tabler-trash me-1"></i> Yes, Delete
                    </button>
                </div>
            </div>
        </div>
    </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('');
    }

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

        clearErrors();

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

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

        $.ajax({
            url: '{{ url("admin/patient/" . $patient->id) }}',
            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 Changes');

                if (xhr.status === 422) {

                    const errors = xhr.responseJSON.errors;

                    $('.is-invalid').removeClass('is-invalid');
                    $('.invalid-feedback').remove();

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

                        const input = $(`[name="${field}"]`);

                        input.addClass('is-invalid');

                        if (input.next('.invalid-feedback').length === 0) {
                            input.after(
                                `<div class="invalid-feedback">${messages[0]}</div>`
                                );
                        } else {
                            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 {

                    $('#alertBox')
                        .html(
                            `<div class="alert alert-danger">Something went wrong. Please try again.</div>`
                            )
                        .show();

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

                }
            }
        });
    });

});
</script>
@endsection