@extends('guest.layout.main')
@section('body_main_guests')

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8">

            <!-- Card Wrapper -->
            <div class="card shadow-lg border-0 rounded-4">
                <div class="card-header bg-gradient-primary text-white text-center rounded-top-4">
                    <h5 class="mb-0 fw-bold">
                        <i class="fas fa-file-medical me-2"></i>
                        Form Pemesanan Gizi
                    </h5>
                </div>

                <div class="card-body p-4 mb-3">
                    <form action="/order-mcu" method="POST" id="submit_order_mcu">
                        @csrf
                        <!-- Tanggal Pemeriksaan -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Tanggal Pemeriksaan<span class="text-danger">*</span></label>
                            <input type="date" class="form-control rounded-3" name="tgl_mcu" id="tgl_mcu"
                        min="{{ date('Y-m-d') }}" required>
                        </div>
                        <!-- Jam Layanan -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Jam Layanan<span class="text-danger">*</span></label>
                            <input type="time" class="form-control rounded-3" name="jam_layanan" id="jam_layanan"
       placeholder="nama@contoh.com" required>
                        </div>



                        <!-- Nama Pasien -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Nama Pemesan<span class="text-danger">*</span></label>
                            <input type="text" class="form-control rounded-3" name="nama_pemesan" placeholder="Masukkan nama lengkap" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Jenis Kelamin<span class="text-danger">*</span></label>
                            <select class="form-select rounded-3" name="jenis_kelamin" id="jenis_kelamin" required>
                                <option value="" disabled selected>-- Pilih --</option>
                                <option value="Laki-laki">Laki-laki</option>
                                <option value="Perempuan">Perempuan</option>
                            </select>
                        </div>
                         <div class="mb-3">
                            <label class="form-label fw-semibold">Nama Institusi<span class="text-danger">*</span></label>
                            <input type="text" class="form-control rounded-3" name="nama_institusi" placeholder="Masukkan nama institusi lengkap" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">NO.Medical Record<span class="text-danger">*</span></label>
                            <input type="text" class="form-control rounded-3" name="no_mr" id="no_mr" placeholder="NO.Medical Record" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Paket MCU <span class="text-danger">*</span></label>
                             <select class="form-select rounded-3" name="paket_mcu" id="paket_mcu" required>
                                <option value="" disabled selected>-- Pilih Paket --</option>
                                @forelse ($paketMcu as $mcu)
                                <option value="{{ $mcu->menu_mcu_id }}">{{ $mcu->nama_mcu }}</option>
                                @empty
                                <option value="">Belum ada paket</option>
                                @endforelse
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Email</label>
                            <input type="email" class="form-control rounded-3" name="email" id="email" placeholder="nama@contoh.com">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">No.Hp</label>
                            <input type="tel" class="form-control rounded-3" name="no_hp" id="no_hp"placeholder="0812-3456-7890" pattern="[0-9]{10,15}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Tinggi Badan</label>
                            <input type="number" class="form-control rounded-3" name="tinggi_badan" id="tinggi_badan" placeholder="kg" min="1" max="300">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Berat Badan</label>
                           <input type="number" class="form-control rounded-3" name="berat_badan" id="berat_badan" placeholder="kg" min="1" max="300" >
                        </div>

                        <!-- Submit Button -->
                        <button type="submit" class="btn btn-success w-100 rounded-3 fw-bold">
                            <i class="fas fa-paper-plane me-2"></i>Submit
                        </button>
                    </form>
                </div>
            </div>

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

<script>
    $(document).ready(function () {
        $('#cartButton').addClass('d-none');
    });

    $(function () {
    // Validasi real-time sebelum submit
        $('#submit_order_mcu').on('submit', async function (e) {
            e.preventDefault(); // cegah submit
            const $form = $(this);
            const $btn = $form.find('button[type="submit"]');
            let isValid = true;

            // Reset border merah
            $form.find('.is-invalid').removeClass('is-invalid');

            // Validasi semua required
            $form.find('[required]').each(function () {
                const $el = $(this);
                if ($.trim($el.val()) === '') {
                    $el.addClass('is-invalid');
                    isValid = false;
                }
            });

            // Kalau ada required yang kosong
            if (!isValid) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Semua kolom wajib diisi terlebih dahulu!',
                    confirmButtonColor: '#288355'
                });
                return;
            }


            // Disable tombol
            $btn.prop('disabled', true)
                .html('<i class="fas fa-spinner fa-spin me-2"></i>Memproses...');

            // Kirim form via fetch
            const formData = new FormData(this);

            try {
                const response = await fetch('/order-mcu', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                });

                const result = await response.json();

                if (result.status) {
                    Swal.fire({
                        title: 'Pesanan Berhasil!',
                        text: 'Terima kasih, pesanan Anda sedang kami siapkan.',
                        icon: 'success',
                        confirmButtonText: 'Berhasil!',
                        confirmButtonColor: '#28a745'
                    }).then(() => {
                        window.location.href = "/success-mcu";
                    });
                } else {
                    Swal.fire({
                        title: 'Gagal!',
                        text: result.message,
                        icon: 'error',
                        confirmButtonText: 'Tutup!'
                    }).then(() => {
                        window.location.href = "/order-mcu";
                    });
                }
            } catch (err) {
                console.error(err);
                alert("Terjadi kesalahan saat mengirim data.");
            }
        });

    });
</script>

@endsection