@extends('layouts.admin.app')

@section('title','Add Appointment')

@section('content')
<h4 class="mb-4">Add Walk-in Appointment</h4>

<form method="POST" action="{{ route('appointments.store') }}">
@csrf

<div class="card">
    <div class="card-body">

        {{-- Patient --}}
        <div class="mb-3">
            <label>Patient</label>
            <div class="input-group">
                <select name="patient_id" id="patient_id" class="form-control" required>
                    <option value="">-- Select Patient --</option>
                    @foreach($patients as $p)
                        <option value="{{ $p->id }}">
                            {{ $p->name }} ({{ $p->phone }})
                        </option>
                    @endforeach
                </select>

                <button type="button"
                        class="btn btn-outline-primary"
                        data-bs-toggle="modal"
                        data-bs-target="#addPatientModal">
                    + Add
                </button>
            </div>
        </div>


        {{-- Service --}}
        <div class="mb-3">
            <label class="form-label">Layanan</label>
            <select name="service_id" id="service_id" class="form-select" required>
                <option value="">-- Pilih Layanan --</option>
                @foreach($services as $service)
                    <option value="{{ $service->id }}">
                        {{ $service->name }}
                    </option>
                @endforeach
            </select>
        </div>

        {{-- Midwife --}}
        <div class="mb-3">
            <label class="form-label">Midwife</label>
            <select name="midwife_id" id="midwife_id" class="form-select">
                <option value="">-- Pilih Bidan --</option>
                @foreach($midwives as $midwife)
                    <option value="{{ $midwife->id }}">
                        {{ $midwife->name }}
                    </option>
                @endforeach
            </select>
        </div>

        {{-- Notes --}}
        <div class="mb-3">
            <label class="form-label">Patient Note</label>
            <textarea name="patient_note"
                      class="form-control"
                      rows="3"></textarea>
        </div>

        <input type="hidden" id="qr_result">

    </div>

    <div class="card-footer text-end">
        <a href="{{ route('appointments.index') }}"
           class="btn btn-secondary">
            Cancel
        </a>
        <button class="btn btn-primary">
            Save Appointment
        </button>
        <button type="button"
                class="btn btn-outline-secondary"
                onclick="startScanner()">
            📷 Scan QR
        </button>
    </div>
</div>
</form>

<!-- MODAL ADD PATIENT -->
 <div class="modal fade" id="addPatientModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add New Patient</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <div class="mb-3">
            <label>Name</label>
            <input type="text" id="new_name" class="form-control">
        </div>

        <div class="mb-3">
            <label>Phone</label>
            <input type="text" id="new_phone" class="form-control">
        </div>

        <div class="mb-3">
            <label>Email</label>
            <input type="email" id="new_email" class="form-control">
        </div>
      </div>

      <input type="hidden" id="qr_result">

      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-success" onclick="savePatient()">Save</button>

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

<!-- Modal Scanner -->
<div class="modal fade" id="qrModal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5>Scan QR Pasien</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="qr-reader" style="width:100%"></div>
      </div>
    </div>
  </div>
</div>

<script>
function savePatient() {
    fetch("{{ route('patients.quickStore') }}", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        body: JSON.stringify({
            name: document.getElementById('new_name').value,
            phone: document.getElementById('new_phone').value,
            email: document.getElementById('new_email').value,
        })
    })
    .then(res => res.json())
    .then(res => {
        if (res.success) {
            let option = document.createElement('option');
            option.value = res.patient.id;
            option.text  = res.patient.name + ' (' + res.patient.phone + ')';
            option.selected = true;

            document.getElementById('patient_id').appendChild(option);

            document.getElementById('addPatientModal').querySelector('.btn-close').click();
        }
    });
}
</script>

<script>
let qrScanner;

function startScanner() {
    new bootstrap.Modal(document.getElementById('qrModal')).show();

    qrScanner = new Html5Qrcode("qr-reader");
    qrScanner.start(
        { facingMode: "environment" },
        { fps: 10, qrbox: 250 },
        qrCode => {
            qrScanner.stop();
            findPatient(qrCode);
        }
    );
}

function findPatient(code) {
    fetch('/admin/patients/find-by-qr/' + code)
        .then(res => res.json())
        .then(res => {
            if (res.success) {
                let option = document.createElement('option');
                option.value = res.patient.id;
                option.text = res.patient.name + ' (' + res.patient.phone + ')';
                option.selected = true;

                document.getElementById('patient_id').appendChild(option);

                bootstrap.Modal.getInstance(
                    document.getElementById('qrModal')
                ).hide();
            } else {
                alert('Patient not found');
            }
        });
}
</script>


<script>
document.addEventListener("DOMContentLoaded", function () {
    new TomSelect("#patient_id", {
        create: false,
        sortField: {
            field: "text",
            direction: "asc"
        },
        placeholder: "Cari pasien..."
    });

    new TomSelect("#service_id", {
        create: false,
        sortField: {
            field: "text",
            direction: "asc"
        },
        placeholder: "Cari layanan..."
    });

    new TomSelect("#midwife_id", {
        create: false,
        sortField: {
            field: "text",
            direction: "asc"
        },
        placeholder: "Cari bidan..."
    });
});
</script>



@endsection