@extends('layouts.admin.base-dashboard')

@section('title', 'Cashier')

@section('content')
<div class="container-fluid">
    <h3 class="mb-4">🧾 Point of Sales (POS)</h3>

    {{-- ✅ Flash Message --}}
    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    {{-- Form Tambah Produk --}}
    <div class="card mb-3 shadow-sm">
        <div class="card-header fw-bold">Tambah Produk</div>
        <div class="card-body">
            <div class="row g-2 align-items-end">
                <div class="col-12 col-md-5">
                    <label class="form-label">Produk</label>
                    <select class="form-select" id="product_select" style="width: 100%;"></select>
                </div>
                <div class="col-6 col-md-2">
                    <label class="form-label">Qty</label>
                    <input type="number" id="quantity_input" class="form-control" min="1" value="1">
                </div>
                <div class="col-6 col-md-3">
                    <label class="form-label">Diskon/item (Rp)</label>
                    <input type="text" id="discount_input" class="form-control" value="0">
                </div>
                <div class="col-12 col-md-2 d-grid">
                    <button class="btn btn-primary btn-sm" id="add_product_btn">+ Tambah</button>
                </div>
            </div>
            <small id="form_warning" class="text-danger d-none mt-2">⚠️ Pilih produk dan isi jumlah!</small>
        </div>
    </div>

    <div class="row flex-column flex-md-row" id="pos_content">
        <div class="col-12 col-md-8 mb-3" id="produk_section">
            <div class="card shadow-sm">
                <div class="card-header fw-bold">🛒 Daftar Produk</div>
                <div class="card-body p-2">
                    <div class="table-responsive" id="cart_table_wrap">
                        <table class="table table-bordered align-middle mb-0" id="cart_table">
                            <thead class="table-light">
                                <tr>
                                    <th>Produk</th>
                                    <th>Harga</th>
                                    <th>Qty</th>
                                    <th>Diskon</th>
                                    <th>Subtotal</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                            <tfoot>
                                <tr style="background-color: #d1e7dd;">
                                    <th colspan="4" class="text-end fs-5">Total</th>
                                    <th colspan="2" id="total_amount" class="fs-5">Rp0</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                    <div id="cart_card_view" class="d-block d-md-none"></div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-4 mb-3" id="pembayaran_section">
            <form method="POST" action="{{ route('cashiers.store') }}" id="payment_form">
                @csrf
                <input type="hidden" name="cart_data" id="cart_data">
                <div class="card shadow-sm">
                    <div class="card-header fw-bold">💳 Pembayaran</div>
                    <div class="card-body">
                        <div class="mb-2">
                            <label class="form-label">Diskon Total (Rp)</label>
                            <input type="text" id="global_discount" class="form-control" value="0">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Bayar Cash</label>
                            <input type="text" id="cash_amount" class="form-control" placeholder="0" />
                            <input type="hidden" name="cash_amount_real" id="cash_amount_real">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Bayar Transfer | QRIS</label>
                            <input type="text" id="transfer_amount" class="form-control" placeholder="0" />
                            <input type="hidden" name="transfer_amount_real" id="transfer_amount_real">
                        </div>

                        <div class="mt-3 border-top pt-3">
                            <div class="d-flex justify-content-between">
                                <span>Total Belanja</span>
                                <span id="summary_total" class="fw-bold text-danger">Rp0</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Total Dibayar</span>
                                <span id="summary_paid" class="fw-bold text-success">Rp0</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Kembalian</span>
                                <span id="summary_change" class="fw-bold">Rp0</span>
                            </div>
                        </div>

                        <div class="alert alert-danger d-none mt-2" id="payment_alert">
                            ❌ Total pembayaran belum mencukupi total belanja!
                        </div>

                        <button class="btn btn-success w-100 mt-3" type="submit" id="submit_button">Cetak</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="previewModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Konfirmasi Transaksi</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="previewContent"></div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Kembali</button>
                    <button class="btn btn-success" id="confirmSubmit">✅ Konfirmasi & Cetak</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('style')
<style>
@media (max-width: 768px) {
    #cart_table_wrap { display: none !important; }
    #cart_card_view { display: block !important; }
}
@media (max-width: 320px) {
    #produk_section { order: 1 !important; }
    #pembayaran_section { order: 2 !important; }
}
</style>
@endpush

@push('script')
<script>
let cart = [], total = 0, globalDiscount = 0;

function parseCurrency(str) {
    return parseInt(str.replace(/\D/g, '')) || 0;
}
function formatCurrency(num) {
    return num.toLocaleString('id-ID');
}
function syncPaymentValues() {
    const cash = parseCurrency($('#cash_amount').val());
    const transfer = parseCurrency($('#transfer_amount').val());
    $('#cash_amount_real').val(cash);
    $('#transfer_amount_real').val(transfer);
    return { cash, transfer };
}
function updateCartTable() {
    const tbody = $('#cart_table tbody');
    const cardView = $('#cart_card_view');
    tbody.empty();
    cardView.empty();
    total = 0;

    cart.forEach((item, index) => {
        const subtotal = (item.price * item.qty) - (item.discount * item.qty);
        total += subtotal;

        tbody.append(`
            <tr class="table-light">
                <td>${item.name}</td>
                <td>Rp${formatCurrency(item.price)}</td>
                <td>${item.qty}</td>
                <td>Rp${formatCurrency(item.discount)}</td>
                <td>Rp${formatCurrency(subtotal)}</td>
                <td><button class="btn btn-danger btn-sm" onclick="removeItem(${index})">Hapus</button></td>
            </tr>
        `);

        cardView.append(`
            <div class="card mb-2 shadow-sm">
                <div class="card-body p-2">
                    <div class="d-flex justify-content-between fw-bold mb-1">
                        <span>${item.name}</span>
                        <span>Rp${formatCurrency(subtotal)}</span>
                    </div>
                    <div><small>Harga: Rp${formatCurrency(item.price)}</small></div>
                    <div><small>Qty: ${item.qty}</small></div>
                    <div><small>Diskon/item: Rp${formatCurrency(item.discount)}</small></div>
                    <div class="text-end mt-2">
                        <button class="btn btn-sm btn-danger" onclick="removeItem(${index})">Hapus</button>
                    </div>
                </div>
            </div>
        `);
    });

    total -= globalDiscount;
    if (total < 0) total = 0;
    $('#total_amount').text('Rp' + formatCurrency(total));
    updateSummary();
}
function updateSummary() {
    const { cash, transfer } = syncPaymentValues();
    const paid = cash + transfer;
    const change = paid - total;
    $('#summary_total').text('Rp' + formatCurrency(total));
    $('#summary_paid').text('Rp' + formatCurrency(paid));
    $('#summary_change').text('Rp' + (change > 0 ? formatCurrency(change) : 0));
}
function removeItem(index) {
    cart.splice(index, 1);
    updateCartTable();
}

$(document).ready(function () {
    $('#product_select').select2({
        placeholder: "Pilih produk...",
        ajax: {
            url: '{{ route('products.search') }}',
            dataType: 'json',
            delay: 250,
            data: params => ({ q: params.term || '' }),
            processResults: data => ({
                results: data.map(item => ({
                    id: item.id,
                    text: `${item.name} - Rp${item.price.toLocaleString('id-ID')}`,
                    name: item.name,
                    price: item.price
                }))
            }),
            cache: true
        }
    });

    $('#product_select').on('select2:select', function (e) {
        $('#product_select').data('selectedProduct', e.params.data);
    });

    $('#add_product_btn').on('click', function () {
        const selected = $('#product_select').val();
        const productData = $('#product_select').data('selectedProduct');
        const qty = parseInt($('#quantity_input').val());
        const discount = parseCurrency($('#discount_input').val());

        if (!selected || !productData || isNaN(qty) || qty < 1) {
            $('#form_warning').removeClass('d-none');
            return;
        }

        $('#form_warning').addClass('d-none');
        cart.push({ id: selected, name: productData.name, price: parseInt(productData.price), qty, discount });
        updateCartTable();
    });

    $('#cash_amount, #transfer_amount, #global_discount, #discount_input').on('input', function () {
        const val = parseCurrency($(this).val());
        $(this).val(formatCurrency(val));
        globalDiscount = parseCurrency($('#global_discount').val());
        syncPaymentValues();
        updateCartTable();
    });

    $('#payment_form').on('submit', function (e) {
        const { cash, transfer } = syncPaymentValues();
        const totalPaid = cash + transfer;

        if (cart.length === 0) {
            e.preventDefault();
            alert('⚠️ Keranjang kosong. Tambahkan produk terlebih dahulu.');
            return;
        }

        if (total > 0 && totalPaid === 0) {
            e.preventDefault();
            $('#payment_alert').removeClass('d-none').text('❌ Harap isi pembayaran dengan cash atau transfer.');
            return;
        }

        if (totalPaid < total) {
            e.preventDefault();
            $('#payment_alert').removeClass('d-none').text('❌ Total pembayaran belum mencukupi total belanja!');
        } else {
            $('#payment_alert').addClass('d-none');
            $('#cart_data').val(JSON.stringify(cart));
        }
    });

    $('#confirmSubmit').on('click', function () {
        $(this).prop('disabled', true).text('⏳ Menyimpan...');
        $('#payment_form')[0].submit();
    });
});
</script>
@endpush