@extends('layouts.app')
@section('title_header')
    Belum Dibayar
@endsection
@section('breadcrumbs')
    <x-breadcrumbs :items="[['label' => 'Dashboard', 'url' => '/'], ['label' => 'Belum Dibayar', 'url' => '/']]" />
@endsection

@push('style')
    <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
@endpush

@section('content')
    @php
        $update_status_bayaran_permission = session("permissions")['update_status_bayaran'] ?? null;
        $update_status_bayaran = str_contains($update_status_bayaran_permission, 'actions');
    @endphp
    <div class="card card-boreder bg-white">
        <div class="card-body">
            <table id="default-table"></table>
        </div>
    </div>

    <dialog id="btn_status" class="modal">
        <div class="modal-box w-[250px]">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
            </form>
            <div class="grid grid-cols-1 mt-4 space-y-2">
                <button class="btn" onclick="submitStatus('cash')">Bayar Cash</button>
                <button class="btn" onclick="submitStatus('tf')">Bayar Transfer</button>
                <button class="btn" onclick="submitStatus('qr')">Bayar Qr</button>
            </div>
        </div>
    </dialog>
    <dialog id="modal_image" class="modal">
        <div class="modal-box">
          <form method="dialog">
            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
          </form>
          <form id="form-upload">
            <div class="mb-3">
                <label for="image" class="label">Image</label>
                <input type="file" class="file-input w-full" name="image" id="image"/>
            </div>
            <div>
                <button class="btn btn-info w-full text-white">Submit</button>
            </div>
          </form>
        </div>
      </dialog>
@endsection

@push('script')
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@9.0.3"></script>
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
<script>
    let dataTable;
    let currentTrxId = null;
    let selectedType = null;

    $(document).ready(function () {
        fetchTransactions();

        function fetchTransactions() {
            $.ajax({
                type: "GET",
                url: "/api/status-bayaran?is_filter=not",
                success: function (response) {
                    let data = response.data || [];

                    const headings = ['No', "Image","Order Id", 'Name', 'Payment Type', 'Status', 'Actions'];
                    const rows = data.map((item, index) => [
                        index + 1,
                        item.image
                            ? `<img src="/storage/${item.image}" alt="bukti" class="h-16 w-auto rounded-lg border"/>`
                            : '-',
                        item.product?.order_id || '-',
                        item.product?.customer_name || '-',
                        item.type_payment || '-',
                        item.status || '-',
                        `
                            @if ($update_status_bayaran)
                            <button type="button" onclick="openModal(${item.id})" class="btn btn-info text-white btn-sm">
                                Update Status
                            </button>
                            @else
                            <span>-</span>
                            @endif
                        `
                    ]);


                    const tableData = {
                        headings: headings,
                        data: rows
                    };

                    if (dataTable) dataTable.destroy();

                    dataTable = new simpleDatatables.DataTable("#default-table", {
                        data: tableData,
                        searchable: true,
                        perPageSelect: false
                    });
                },
                error: function (xhr) {
                    const msg = xhr.responseJSON?.message || 'Gagal mengambil data transaksi.';
                    toastr.error(msg);
                }
            });
        }

        // Buka modal metode pembayaran
        window.openModal = function(id) {
            currentTrxId = id;
            btn_status.showModal();
        }

        // Klik tombol Bayar (cash, tf, qr)
        window.submitStatus = function(type) {
            if (!currentTrxId) return toastr.warning("Transaksi tidak ditemukan.");

            selectedType = type; // simpan tipe yang dipilih
            modal_image.showModal(); // buka modal upload gambar
        }

        // Submit form upload gambar
        $('#form-upload').on('submit', function(e) {
            e.preventDefault();

            const formData = new FormData();
            formData.append('id_trx', currentTrxId);
            formData.append('status', selectedType);
            formData.append('_token', '{{ csrf_token() }}');

            const imageInput = document.querySelector('#image');
            if (imageInput.files.length > 0) {
                formData.append('image', imageInput.files[0]);
            }

            $.ajax({
                type: "POST",
                url: "/api/status-bayaran/update-status",
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    toastr.success("Status berhasil diperbarui.");
                    modal_image.close();
                    btn_status.close();
                    fetchTransactions();
                    // reset form
                    $('#form-upload')[0].reset();
                },
                error: function (xhr) {
                    const msg = xhr.responseJSON?.message || 'Gagal memperbarui status.';
                    toastr.error(msg);
                }
            });
        });
    });
</script>
@endpush