@extends('Admin.layout')
<link rel="stylesheet" href="{{ asset('assets/css/form.css') }}">

<style>
    .border-brand {
        border-color: var(--primary) !important;
    }
</style>
@section('content')


    <div class="d-flex justify-content-between align-items-center mb-4">

        <div class="d-flex align-items-center gap-3">
            <a href="{{ route('patient') }}"
                class="btn btn-icon btn-white border rounded-3 d-flex align-items-center justify-content-center btn-back shadow-sm"
                style="width: 42px; height: 42px; transition: all .2s ease;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="var(--primary)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"
                    style="transition: stroke .2s ease;">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M15 6l-6 6l6 6"></path>
                </svg>
            </a>

            <h5 class="mb-0 fw-bold border-start border-4 border-brand ps-3">
                Patient
            </h5>
        </div>

        <a href="{{ route('blood_group') }}" class="btn btn-primary">
            <i class="ti tabler-user-plus"></i>Add Blood Group
        </a>

    </div>

    <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
        <div class="card-header bg-brand-gradient border-0 py-4 px-4">
            <h4 class="mb-1 text-white fw-bold">Add Patient</h4>
            <small class="text-white">Fill in the details to add patients</small>
        </div>

        <div class="card-body p-4">
            <form action="{{ route('create_patient') }}" method="POST" id="patientForm">
                @csrf

                <div class="row g-4">

                    <div class="col-12">
                        <span class="text-brand text-uppercase small fw-bold">Registration</span>
                        <hr class="mt-1 mb-0" style="border-color: rgba(var(--primary-rgb), .15);">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label small text-uppercase fw-semibold text-muted">
                            OP.No <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="sheet_no" value="{{ old('sheet_no') }}" placeholder="Enter OP"
                            class="form-control rounded-3 @error('sheet_no') is-invalid @enderror">
                        @error('sheet_no')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    <!-- , $nextOpNo -->
                    <div class="col-md-4">
                        <label class="form-label small text-uppercase fw-semibold text-muted">
                            Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="patient_name" value="{{ old('patient_name') }}"
                            class="form-control rounded-3 @error('patient_name') is-invalid @enderror" placeholder="Enter">
                        @error('patient_name')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label small text-uppercase fw-semibold text-muted">
                            Gender <span class="text-danger">*</span>
                        </label>

                        <select name="gender" class="form-select rounded-3 @error('gender') is-invalid @enderror">
                            <option value="" selected disabled>Select</option>
                            <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                            <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                            <option value="Other" {{ old('gender') == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>

                        @error('gender')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label small text-uppercase fw-semibold text-muted">
                            Age <span class="text-danger">*</span>
                        </label>
                        <input type="number" name="age" class="form-control rounded-3 @error('age') is-invalid @enderror"
                            value="{{ old('age') }}" placeholder="Enter">

                        @error('age')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label small text-uppercase fw-semibold text-muted">
                            Phone Number <span class="text-danger">*</span>
                        </label>
                        <input type="tel" name="phone" class="form-control rounded-3 @error('phone') is-invalid @enderror"
                            value="{{ old('phone') }}" placeholder="Enter">

                        @error('phone')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small text-uppercase fw-semibold text-muted">
                            Email
                        </label>
                        <input type="email" name="email" value="{{ old('email') }}"
                            class="form-control rounded-3 @error('email') is-invalid @enderror" placeholder="Enter">
                        @error('email')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Blood Group (Optional)</label>

                        <select name="blood_group_id" id="blood_group_id" class="form-select select2">
                            <option value="">Select</option>

                            @foreach($bloodGroups as $bloodGroup)
                                <option value="{{ $bloodGroup->id }}" {{ old('blood_group_id') == $bloodGroup->id ? 'selected' : '' }}>
                                    {{ $bloodGroup->group }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label small text-uppercase fw-semibold text-muted">
                            Address <span class="text-danger">*</span>
                        </label>
                        <textarea name="place" rows="3" class="form-control rounded-3 @error('place') is-invalid @enderror"
                            placeholder="Enter">{{ old('place') }}</textarea>

                        @error('place')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class="col-12 text-center mt-4 pt-3 border-top">

                        <button type="submit" name="action" value="save" id="submitBtn"
                            class="btn btn-brand rounded-3 px-4 py-2 fw-semibold shadow-sm">
                            <i class="ti tabler-device-floppy me-1"></i>
                            Submit
                        </button>

                        <!-- <button type="submit"
                                name="action"
                                value="book_op"
                                id="saveAndBookBtn"
                                class="btn btn-success rounded-3 px-4 py-2 fw-semibold shadow-sm ms-2">
                            <i class="ti tabler-calendar-plus me-1"></i>
                            Save & Book OP
                        </button> -->

                    </div>

                </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="bookOpModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content shadow">

                <!-- Header -->
                <div class="modal-header">


                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal">
                    </button>
                </div>

                <h5 class="modal-title text-center">
                    <i class="fas fa-user-md me-2"></i>
                    Book Out Patient (OP)
                </h5>
                <div class="modal-body">

                    <form id="bookOpForm" method="POST" action="{{ route('add_patient_op') }}">
                        @csrf

                        <input type="hidden" name="patient_id" id="patient_id">
                        <input type="hidden" name="action" id="actionField">

                        <div class="row g-3">

                            <!-- Token Number -->
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    Token Number
                                </label>

                                <input type="text" name="token_number" class="form-control bg-light" id="tokenNumber"
                                    readonly>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    Date
                                </label>

                                <input type="date" id="opDate" name="op_date" class="form-control"
                                    value="{{ now()->format('Y-m-d') }}" min="{{ now()->format('Y-m-d') }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Time *</label>
                                <input type="time" name="appointment_time" id="patientAptTime" class="form-control"
                                    value="{{ now()->format('H:i') }}">
                                <div class="text-danger small" id="error_apt_appointment_time"></div>
                            </div>



                            <!-- Reason -->
                            <div class="col-12">
                                <label class="form-label fw-semibold">
                                    Reason of Visit
                                </label>

                                <textarea name="reason" class="form-control" rows="3"
                                    placeholder="Enter Reason of Visit"></textarea>
                            </div>

                            <!-- Type -->
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    Type
                                </label>

                                <select class="form-select" name="type">
                                    <!-- <option value="">Select Type</option> -->
                                    <option value="Medical">Medical</option>
                                    <option value="Dental">Dental</option>
                                </select>
                            </div>

                            <!-- Doctor -->
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    Doctor
                                </label>

                                @if($doctors->count() > 0)
                                    <select class="form-select" name="doctor_id" required>
                                        @foreach($doctors as $doctor)
                                            <option value="{{ $doctor->id }}">
                                                {{ $doctor->doctor_name }} — ({{ $doctor->specialization }})
                                            </option>
                                        @endforeach
                                    </select>
                                @else
                                    <div class="alert alert-warning mb-0 py-2">
                                        <i class="ti tabler-alert-triangle me-1"></i>
                                        No doctors found. Please add a doctor from
                                        <strong>Doctor Management</strong> before booking an OP.
                                    </div>
                                @endif
                            </div>
                            <div class="text-center">
                                <button type="button" class="btn btn-light border" data-bs-dismiss="modal">
                                    Cancel
                                </button>

                                <button type="submit" class="btn btn-success" id="bookOpBtn">
                                    <i class="fas fa-check-circle me-1"></i>
                                    Book OP
                                </button>

                            </div>
                        </div>

                    </form>

                </div>


                <div class="modal-footer">


                </div>

            </div>
        </div>
    </div>
    <script>
        let clickedButton = null;

        document.querySelectorAll('#patientForm button[type="submit"]').forEach(btn => {

            btn.addEventListener('click', function () {

                clickedButton = this;

                document.getElementById('actionField').value =
                    this.value;
            });

        });

        document.getElementById('patientForm').addEventListener('submit', function () {

            if (clickedButton) {

                clickedButton.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span> Processing...';
            }
        });
    </script>
    <script>
        function loadToken(date) {

            $.ajax({
                url: "{{ route('get_token_number') }}",
                type: "GET",
                data: {
                    date: date
                },
                success: function (response) {
                    $('#tokenNumber').val(response.token);
                }
            });
        }
    </script>

    @if(session('open_book_op'))
        <script>
            $(document).ready(function () {

                $('#patient_id').val('{{ session('
                                patient_id ') }}');

                let modal = new bootstrap.Modal(
                    document.getElementById('bookOpModal')
                );

                modal.show();

                let date = $('#opDate').val();

                if (date) {
                    loadToken(date);
                }
            });
        </script>
    @endif

@endsection