<div class="modal fade text-left" id="fotoToday" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel1">Detail Pesanan Foto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="row gx-3">

                    <div class="col-12 col-md-6">

                        <h6 class="modal-section-title">Rincian Pesanan</h6>
                        <div class="detail-order">
                            <div class="detail-row">
                                <span class="detail-label">Tanggal Booking</span>
                                <span class="detail-value">Kamis 10 Juni 2025</span>
                            </div>

                            <div class="detail-row">
                                <span class="detail-label">Waktu Booking</span>
                                <span class="detail-value">10.00</span>
                            </div>

                            <div class="detail-row">
                                <span class="detail-label">Paket Foto</span>
                                <span class="detail-value">Single</span>
                            </div>

                            <div class="detail-row">
                                <span class="detail-label">Additional</span>
                                <div class="detail-value">
                                    <span class="item">Kostum boneka</span><br>
                                    <small class="amount">x1</small>
                                </div>
                            </div>
                        </div>

                        <h6 class="modal-section-title">Informasi Pemesan</h6>
                        <div class="detail-customer">
                            <div class="detail-row">
                                <span class="detail-label">Nama Lengkap</span>
                                <span class="detail-value">Budi Susanto</span>
                            </div>

                            <div class="detail-row">
                                <span class="detail-label">WhatsApp</span>
                                <span class="detail-value">089673665678</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-md-6 mt-4 mt-md-0">
                        <h6 class="modal-section-title">Pembayaran</h6>

                        <div class="payment-box">
                            <div class="detail-row align-items-center">
                                <span class="detail-label">Status</span>
                                <span class="badge bg-success-subtle rounded-pill px-3 py-2">Terbayar</span>
                            </div>

                            <div class="detail-row align-items-center">
                                <span class="detail-label">Total</span>
                                <span class="detail-value">Rp 150.000</span>
                            </div>

                            <div class="detail-row align-items-start">
                                <span class="detail-label d-block ">Bukti Pembayaran</span>
                                <div class="proof-img-wrapper" onclick="showImage('{{ asset('img/invoice.jpg') }}')">
                                    <img src="{{ asset('img/invoice.jpg') }}" class="proof-img">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer border-top-0 pt-2 px-2">
                    <div class="d-flex w-100 gap-2">
                        <button type="button" class="btn btn-danger tolak flex-fill" data-bs-toggle="modal"
                            data-bs-target="#modalTolak">Tolak
                            Pesanan</button>
                        <button type="button" class="btn btn-success terima flex-fill ms-2" data-bs-toggle="modal"
                            data-bs-target="#modalTerima">Terima Pesanan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL GAMBAR --}}
<div class="modal fade" id="modalImagePreview" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-transparent border-0 shadow-none">

            <div class="modal-body p-0 text-center">
                <img id="img-preview-target" src="" class="img-fluid rounded shadow-lg"
                    style="max-height: 85vh;">
            </div>

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

<script>
    function showImage(src) {
        var modalImg = document.getElementById('img-preview-target');
        modalImg.src = src;
        var myModal = new bootstrap.Modal(document.getElementById('modalImagePreview'));
        myModal.show();
    }
</script>
{{-- MODAL TOLAK --}}
<div class="modal fade" id="modalTolak" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-reject">

            <div class="modal-header pb-0">
                <h5 class="modal-title">Konfirmasi Penolakan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body pt-0">
                <div class="alert d-flex align-items-center border-0 mb-4 mt-2 p-3 rounded-3"
                    style="background-color: #f8d7da; color: #842029;" role="alert">
                    <i class="bi bi-exclamation-circle-fill me-1" style="line-height: 1;"></i>

                    <div class="lh-sm" style="font-size: 0.75rem;">
                        Status pesanan akan otomatis berubah menjadi <strong>"Ditolak"</strong>.
                    </div>
                </div>
                <label class="form-label fw-bold small text-muted text-uppercase mb-2"> Pesan yang akan dikirim
                </label>
                <div class="mb-3">
                    <textarea class="form-control custom-textarea bg-light" id="pesanTolak" rows="5">Halo Kak Budi Susanto,
Mohon maaf, pesanan buket Anda pada tanggal 10 Nov 2025 kami *TOLAK* dikarenakan:

[TULIS ALASAN DISINI]

Silakan hubungi admin untuk info pengembalian dana. Terima kasih.</textarea>

                    <div class="text-start mt-1">
                        <small class="text-muted" style="font-size: 0.75rem;">
                            *Pesan dapat diedit sebelum dikirim
                        </small>
                    </div>
                </div>
            </div>

            <div class="modal-footer border-top-0 pt-0">
                <div class="d-flex w-100 gap-2">

                    <button type="button" class="btn btn-light batal rounded-pill flex-fill py-2"
                        data-bs-toggle="modal" data-bs-target="#default">
                        Batal
                    </button>

                    <button type="button" class="btn btn-danger kirim-wa rounded-pill flex-fill py-2"
                        onclick="kirimWa('tolak')">
                        <i class="bi bi-whatsapp me-1"></i> Kirim Penolakan
                    </button>

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

{{-- MODAL TERIMA --}}
<div class="modal fade" id="modalTerima" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modal-accept">

            <div class="modal-header pb-0">
                <h5 class="modal-title">Konfirmasi Penerimaan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body pt-0">

                <div class="alert d-flex align-items-center border-0 mb-4 mt-2 p-3 rounded-3"
                    style="background-color: #d1e7dd; color: #0f5132;" role="alert">
                    <i class="bi bi-info-circle-fill me-1" style="line-height: 1;"></i>

                    <div class="lh-sm" style="font-size: 0.75rem;">
                        Status pesanan akan otomatis berubah menjadi <strong>"Diproses"</strong>.
                    </div>
                </div>

                <div class="mb-2">
                    <label class="form-label fw-bold small text-muted text-uppercase mb-2"> Pesan yang akan dikirim
                    </label>

                    <div class="position-relative">
                        <textarea class="form-control bg-light border-0 shadow-sm p-3 text-secondary" id="pesanTerima" rows="4"
                            style="resize: none; font-size: 0.85rem; line-height: 1.2; border-radius: 0.5rem;">Halo Kak Budi Susanto,

Selamat! Pesanan Buket Anda untuk tanggal 10 Nov 2025 telah kami *TERIMA*.

Silakan datang tepat waktu ya. Terima kasih!</textarea>

                        <div class="position-absolute top-0 start-0 bottom-0 bg-success"
                            style="width: 4px; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;">
                        </div>
                    </div>

                    <div class="text-start mt-1">
                        <small class="text-muted" style="font-size: 0.75rem;">
                            *Pesan dapat diedit sebelum dikirim
                        </small>
                    </div>
                </div>

            </div>

            <div class="modal-footer border-top-0 pt-0">
                <div class="d-flex w-100 gap-2">

                    <button type="button" class="btn btn-light batal rounded-pill flex-fill py-2"
                        data-bs-toggle="modal" data-bs-target="#default">
                        Batal
                    </button>

                    <button type="button" class="btn btn-success kirim-wa rounded-pill flex-fill py-2"
                        onclick="kirimWa('terima')">
                        <i class="bi bi-whatsapp me-1"></i> Kirim & Terima
                    </button>

                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function kirimWa(jenis) {
        // 1. Nomor HP Dummy (Nanti diganti variabel database)
        var nomorHp = "+6281334394400";

        // 2. Ambil isi pesan dari textarea
        var pesan = "";
        if (jenis === 'tolak') {
            pesan = document.getElementById('pesanTolak').value;
        } else {
            pesan = document.getElementById('pesanTerima').value;
        }

        // 3. Encode pesan biar aman di URL (spasi jadi %20, dst)
        var url = "https://wa.me/" + nomorHp + "?text=" + encodeURIComponent(pesan);

        // 4. Buka WhatsApp di tab baru
        window.open(url, '_blank');

        // 5. (Opsional) Tutup Modal setelah kirim
        // var modalEl = document.getElementById(jenis === 'tolak' ? 'modalTolak' : 'modalTerima');
        // var modal = bootstrap.Modal.getInstance(modalEl);
        // modal.hide();

        // Disini nanti bisa ditambah ajax buat update status di database
        alert("Simulasi: Status pesanan berhasil diupdate jadi " + (jenis === 'tolak' ? 'DITOLAK' : 'DITERIMA'));
    }
</script>
