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

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

@section('content')
    <div class="card card-border bg-white">
        <div class="card-body">
            <div class="flex items-center justify-end">
                <button onclick="window.location.href='/order-part/create'"
                    class="btn btn-info btn-sm sm:btn-md text-white mt-2 md:mt-0 w-full md:w-auto">
                    Create
                </button>
            </div>
            <div class="mt-2">
                <table id="default-table"></table>
            </div>
        </div>
    </div>

    <!-- Modal Bayar -->
    <input type="checkbox" id="payModal" class="modal-toggle" />
    <div class="modal">
        <div class="modal-box relative">
            <label for="payModal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
            <h3 class="font-bold text-lg mb-4">Bayar Order Part</h3>
            <div id="payContent">
                <p class="mb-2">Baki Bayaran: <span id="balance">RM0.00</span></p>
                <div class="mb-3">
                    <label class="label mb-2">Jumlah Bayaran</label>
                    <input type="number" id="payAmount" class="input w-full" placeholder="Masukkan jumlah bayaran">
                </div>
                <button id="submitPay" class="btn btn-info text-white w-full">Bayar</button>
            </div>
        </div>
    </div>
@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>
        $(document).ready(function() {
            const formatMYR = (value) => {
                return new Intl.NumberFormat('ms-MY', {
                    style: 'currency',
                    currency: 'MYR'
                }).format(value || 0);
            };

            let currentDetailId = null;
            let currentPrice = 0;

            function fetchOrderParts() {
                $.ajax({
                    type: "GET",
                    url: "/api/order-part",
                    success: function(response) {
                        const orderParts = response.data || [];
                        const headings = [
                            'No', 'Customer', 'Phone', 'Order Date', 'Order Number', 'Part Name',
                            'Size', 'Model Number', 'Price', 'Deposit', 'Status', 'Actions'
                        ];

                        const data = orderParts.map((item, index) => [
                            index + 1,
                            item.customer_name ?? '-',
                            item.phone_number ?? '-',
                            item.order_date ?? '-',
                            item.order_number ?? '-',
                            item.part_name ?? '-',
                            item.size ?? '-',
                            item.model_number ?? '-',
                            formatMYR(item.price),
                            formatMYR(item.deposit),
                            item.status ?? 'PENDING',
                            `
                        <div class="flex gap-1">
                            <button class="btn btn-success btn-sm btn-bayar" 
                                    data-id="${item.id}" 
                                    data-price="${item.price}" 
                                    data-deposit="${item.deposit}">
                                Bayar
                            </button>
                            <button class="btn btn-warning btn-sm btn-edit" 
                                    data-id="${item.id}">
                                Edit
                            </button>
                        </div>
                        `
                        ]);

                        if (window.dataTable) window.dataTable.destroy();

                        window.dataTable = new simpleDatatables.DataTable("#default-table", {
                            data: {
                                headings,
                                data
                            },
                            searchable: true,
                            perPageSelect: false
                        });
                    },
                    error: function() {
                        alert("Gagal mengambil data order parts.");
                    }
                });
            }

            // Delegasi klik untuk tombol Bayar
            $(document).on("click", ".btn-bayar", function() {
                const id = $(this).data("id");
                const price = $(this).data("price");
                const deposit = $(this).data("deposit");
                openPayModal(id, price, deposit);
            });

            // Delegasi klik untuk tombol Edit
            $(document).on("click", ".btn-edit", function() {
                const id = $(this).data("id");
                window.location.href = `/order-part/edit/${id}`;
            });

            // Modal bayar
            window.openPayModal = function(detailId, price, deposit) {
                currentDetailId = detailId;
                currentPrice = price - (deposit || 0);
                $('#balance').text(formatMYR(currentPrice));
                $('#payAmount').val(currentPrice);
                $('#payModal').prop('checked', true);
            };

            // Submit bayar
            $('#submitPay').click(function() {
                const amount = parseFloat($('#payAmount').val());
                $.ajax({
                    type: "POST",
                    url: `/api/order-part/pay/${currentDetailId}`,
                    contentType: "application/json",
                    data: JSON.stringify({
                        deposit: amount
                    }),
                    success: function(res) {
                        alert("Berhasil membayar order part!");
                        $('#payModal').prop('checked', false);
                        fetchOrderParts();
                    },
                    error: function(xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.data) {
                            alert("Gagal membayar order part: " + xhr.responseJSON.data);
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            alert("Gagal membayar order part: " + xhr.responseJSON.message);
                        } else {
                            alert("Terjadi kesalahan, silakan coba lagi.");
                        }
                    }
                });
            });

            // Initial load
            fetchOrderParts();
        });
    </script>
@endpush