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

@section('content')
    <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="{{ url('admin/patient/' . $patient->id) }}">
                        <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 Medical — {{ $patient->patient_name }}
            </h5>
        </div>
    </div>

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

    <div class="card border-0 shadow-sm">
        <div class="card-header py-3">
            <h5 class="mb-0"><i class="ti tabler-heart-rate-monitor me-2"></i>Medical Information</h5>
        </div>
        <div class="card-body p-4">

            <div class="section-title mb-4">
                <h5><i class="ti tabler-heart-rate-monitor me-2"></i>Medical History</h5>
            </div>

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

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

            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <label class="form-label">Insurance Provider</label>
                    <input type="text" id="insurance_provider" class="form-control"
                           value="{{ $patient->insurance_provider }}" placeholder="Insurance company">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Policy Number</label>
                    <input type="text" id="policy_number" class="form-control"
                           value="{{ $patient->policy_number }}" placeholder="Policy number">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Policy Expiry</label>
                    <input type="date" id="policy_expiry" class="form-control"
                           value="{{ $patient->policy_expiry }}">
                </div>
            </div>

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

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

            <hr class="my-4">

            <div class="d-flex justify-content-end gap-2">
                <a href="{{ url('admin/patient/' . $patient->id) }}" class="btn btn-light px-4">Cancel</a>
                <button class="btn btn-primary px-4" id="saveMedicalBtn">
                    <i class="ti tabler-device-floppy me-1"></i>
                    <span id="saveMedicalText">Save Medical Info</span>
                </button>
            </div>

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

        $('#saveMedicalBtn').on('click', function() {
            const btn  = $(this);
            const text = $('#saveMedicalText');

            btn.prop('disabled', true);
            text.text('Saving...');

            $.ajax({
                url: '{{ route("update_medical", $patient->id) }}',
                method: 'POST',
                data: {
                    _token:                  '{{ csrf_token() }}',
                    blood_pressure:          $('#blood_pressure').val(),
                    diabetes:                $('#diabetes').val(),
                    heart_disease:           $('#heart_disease').val(),
                    allergies:               $('#allergies').val(),
                    chronic_conditions:      $('#chronic_conditions').val(),
                    current_medications:     $('#current_medications').val(),
                    previous_surgeries:      $('#previous_surgeries').val(),
                    family_medical_history:  $('#family_medical_history').val(),
                    insurance_provider:      $('#insurance_provider').val(),
                    policy_number:           $('#policy_number').val(),
                    policy_expiry:           $('#policy_expiry').val(),
                    smoking:                 $('#smoking').val(),
                    alcohol:                 $('#alcohol').val(),
                    diet:                    $('#diet').val(),
                    exercise:                $('#exercise').val(),
                },
                success: function(response) {
                    btn.prop('disabled', false);
                    text.text('Save Medical Info');

                    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 = '{{ url("admin/patient/" . $patient->id) }}';
                        }, 1000);
                    }
                },
                error: function() {
                    btn.prop('disabled', false);
                    text.text('Save Medical Info');
                    $('#alertBox').html('<div class="alert alert-danger">Something went wrong.</div>').show();
                    Toast.fire({icon: 'error',title: response.message});
                }
            });
        });

    });
    </script>

    <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>
@endsection