@extends('layouts.app')

@section('title_header')
    Telah Dibayar (transfer)
@endsection

@section('breadcrumbs')
    <x-breadcrumbs :items="[['label' => 'Dashboard', 'url' => '/'], ['label' => 'Telah Dibayar (transfer)', '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">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Name</th>
                    <th>Payment Type</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </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>
<dialog id="modal_proof" class="modal">
    <div class="modal-box max-w-2xl">
        <form method="dialog">
            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
        </form>
        <h3 class="font-bold text-lg mb-3">Bukti Pembayaran</h3>
        <img id="proof_img" src="" alt="proof" class="w-full rounded-lg border"/>
    </div>
    <form method="dialog" class="modal-backdrop"><button>close</button></form>
</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=tf",
                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 cursor-pointer" onclick="openProof('/storage/${item.image}')"/>`
                            : '-',
                        item.product?.order_id || '-',
                        item.product?.customer_name || '-',
                        item.type_payment || '-',
                        item.status || '-',
                        `
                        <a href="/products/receipt/${item.id_product}" target="_blank" class="btn btn-neutral btn-sm">Resit</a>
                            @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
        }

        window.openProof = function(src) {
            document.getElementById('proof_img').src = src;
            modal_proof.showModal();
        }

        // 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