@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="{{ 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 OP
            </h5>
        </div>
    </div>

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

    <div class="card border-0 shadow-sm">
        <div class="card-header py-3">
            <h4 class="fw-bold mb-1">OP Registration</h4>
            <p class="text-muted mb-0">Quick outpatient registration</p>
        </div>

        <div class="card-body p-4">
            <form id="opForm">
                @csrf

                <div class="section-title mb-4">
                    <h5><i class="ti tabler-user me-2"></i>Basic Information</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"
                               value="{{ $nextSheetNo }}">
                        <div class="invalid-feedback" id="error_sheet_no"></div>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label">Patient Name *</label>
                        <input type="text" name="patient_name"
                               class="form-control"
                               placeholder="Enter Patient Name">
                        <div class="invalid-feedback" id="error_patient_name"></div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Phone Number *</label>
                        <input type="text" name="phone"
                               class="form-control"
                               placeholder="Enter Phone Number">
                        <div class="invalid-feedback" id="error_phone"></div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Patient For *</label>
                        <select name="patient_for" class="form-select">
                            <option value="">Select Type</option>
                            <option value="Dental">Dental</option>
                            <option value="Hospital">Hospital</option>
                        </select>
                        <div class="invalid-feedback" id="error_patient_for"></div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Date of Birth</label>
                        <input type="date" name="dob" class="form-control">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Age</label>
                        <input type="number" name="age" class="form-control" placeholder="Age">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Gender</label>
                        <select name="gender" class="form-select">
                            <option value="">Select Gender</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Place</label>
                        <input type="text" name="place" class="form-control" placeholder="Place">
                    </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 }}">{{ $bg }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Reason of Visit</label>
                        <textarea name="reason_of_visit" class="form-control" rows="3"
                                  placeholder="Reason for 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 OP</span>
                    </button>
                </div>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function() {

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

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

            const submitBtn  = $('#submitBtn');
            const submitText = $('#submitText');
            submitBtn.prop('disabled', true);
            submitText.text('Saving...');

            $.ajax({
                url: '{{ route("store_op") }}',
                method: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    if (response.success) {
                        $('#alertBox')
                            .html(`<div class="alert alert-success">${response.message}</div>`)
                            .show();
                        setTimeout(function() {
                            window.location.href = '{{ route("patient") }}';
                        }, 1000);
                    }
                },
                error: function(xhr) {
                    submitBtn.prop('disabled', false);
                    submitText.text('Save OP');

                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        $.each(errors, function(field, messages) {
                            $(`[name="${field}"]`).addClass('is-invalid');
                            $(`#error_${field}`).text(messages[0]);
                        });
                    } else {
                        $('#alertBox')
                            .html(`<div class="alert alert-danger">Something went wrong.</div>`)
                            .show();
                    }
                }
            });
        });
    });
    </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