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

    <section class="section py-5 bg-light">
        <div class="container">
               <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="mb-0">Checkout Order</h4>
                    <a href="/" class="btn btn-outline-success">
                        <i class="fa fa-arrow-left me-1"></i> Kembali ke Menu
                    </a>
                </div>

            {{-- Form Identitas --}}
            <form id="checkoutFormFinal" method="POST" action="/submit-checkout">
            @csrf
             <div class="progress mb-4">
                <div class="progress-bar bg-success" role="progressbar" id="stepProgressBar" style="width: 50%;">
                    Langkah 1 dari 2
                </div>
            </div>
            {{-- STEP ONE --}}
            <div class="form-step active">
                    <div class="row g-3 mb-4">
                        <input type="hidden" name="cart_data" id="cart_data">
                        <div class="col-md-12">
                            <label for="exampleInputEmail1" class="form-label">Apakah Anda Seorang ?</label>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="jenis_customer" id="radio_karyawan" value="Karyawan RSAB Harapan Kita" required>
                                <label class="form-check-label" for="radio_karyawan" >
                                    Karyawan RSAB Harapan Kita
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="jenis_customer" id="radio_kp" value="Keluarga Pasien / Penunggu Pasien" required>
                                <label class="form-check-label" for="radio_kp">
                                    Keluarga Pasien / Penunggu Pasien
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="jenis_customer" id="radio_public" value="Masyarakat Umum" required>
                                <label class="form-check-label" for="radio_public">
                                    Masyarakat Umum
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Nama Pemesan</label>
                            <input type="text" class="form-control" name="nama_pemesan" id="nama_pemesan" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Jenis Kelamin</label>
                            <select class="form-select" name="jenis_kelamin" id="jenis_kelamin" required>
                                <option value="">Pilih...</option>
                                <option value="Laki-laki">Laki-laki</option>
                                <option value="Perempuan">Perempuan</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Tanggal Lahir</label>
                            <input type="date" class="form-control" name="tanggal_lahir" id="tanggal_lahir">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Tinggi Badan</label>
                            <input type="number" class="form-control" name="tinggi_badan" id="tinggi_badan">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Berat Badan</label>
                            <input type="number" class="form-control" name="berat_badan" id="berat_badan">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">No. Whatsapp</label>
                            <input type="number" class="form-control" name="no_whatsapp" id="no_whatsapp" required>
                        </div>

                        {{-- Pasien --}}
                        <div class="col-md-6 pasien">
                            <label class="form-label">Nama Pasien</label>
                            <input type="text" class="form-control pasien-field" name="nama_pasien" id="nama_pasien">
                        </div>
                        <div class="col-md-6 pasien">
                            <label class="form-label">Ruang Perawatan</label>
                            <select class="form-select pasien-field" name="ruang_perawatan" id="ruang_perawatan">
                                <option value="">Pilih...</option>
                                <option value="Ruang Kenanga">Ruang Kenanga</option>
                                <option value="Ruang Menur">Ruang Menur</option>
                                <option value="Ruang Melati">Ruang Melati</option>
                                <option value="Ruang Mawar">Ruang Mawar</option>
                                <option value="Ruang Cempaka">Ruang Cempaka</option>
                                <option value="Ruang Widuri">Ruang Widuri</option>
                                <option value="Ruang Teratai">Ruang Teratai</option>
                                <option value="Klinik Anggrek">Klinik Melati</option>
                                <option value="Ruang VK">Ruang VK</option>
                            </select>
                        </div>

                        <div class="col-md-6 pasien">
                            <label class="form-label">Nomor Kamar Perawatan</label>
                            <input type="text" class="form-control pasien-field" name="no_kamar" id="no_kamar">
                        </div>

                        <div class="col-md-6 pasien">
                            <label class="form-label">Kelas Perawatan </label>
                            <select class="form-select pasien-field" name="kelas_perawatan" id="kelas_perawatan">
                                <option value="">Pilih...</option>
                                <option value="VIP A">VIP A</option>
                                <option value="VIP B">VIP B</option>
                                <option value="Kelas I">Kelas I</option>
                                <option value="Mesa Tesa">Mesa Tesa</option>
                            </select>
                        </div>
                        {{-- End Pasien --}}

                        {{-- Karyawan --}}
                        <div class="col-md-6 karyawan">
                            <label class="form-label">Bagian /Instalasi</label>
                            <input type="text" class="form-control karyawan-field" name="bagian_instalasi" id="bagian_instalasi">
                        </div>
                        <div class="col-md-6 karyawan">
                            <label class="form-label">Ekstensien yang bisa di Hubungi</label>
                            <input type="text" class="form-control karyawan-field" name="no_ekstensien" id="no_ekstensien">
                        </div>
                        {{-- End Karyawan --}}
                    </div>
                    <button type="button" class="btn btn-success w-100 next-step">Lanjutkan</button>
                </div>                
            


            {{-- STEP TWO --}}
                <div class="form-step d-none">
                    <h5 class="mb-4">Langkah 2: Konfirmasi Pemesanan</h5>

                    {{-- Ringkasan Pesanan --}}
                    <h6 class="fw-bold mb-3">Pesanan Gizi</h6>

                    <div id="checkout_cart_summary">
                        {{-- Akan diisi oleh JavaScript --}}
                    </div>

                    {{-- Tombol Navigasi --}}
                    <div class="d-flex justify-content-between mt-4">
                        <button type="button" class="btn btn-secondary prev-step">Kembali</button>
                        <button type="submit" class="btn btn-success">Simpan Pemesanan</button>
                    </div>
                </div>

            </form>
        </div>
        </div>
    </section>
<script src="{{ ver('/js/checkout/index.js') }}"></script>

@endsection