@extends('layouts.adminlte')

@section('title', 'Vendor Pricelist')
@section('page_title', 'Vendor Pricelist')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
        .select2-container--bootstrap-5 .select2-selection { min-height: 38px; }
        .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Vendor Pricelist</h3>
            <button class="btn btn-success btn-sm" id="btnAdd">
                <i class="fas fa-plus me-1"></i>Tambah Pricelist
            </button>
        </div>
        <div class="card-body">
            <div class="row g-2 align-items-end mb-2">
                <div class="col-md-4">
                    <label class="form-label">Vendor</label>
                    <select class="form-select" id="filterVendor"></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Item</label>
                    <select class="form-select" id="filterItem"></select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">As Of</label>
                    <input type="date" class="form-control" id="asOf" value="{{ now()->toDateString() }}">
                </div>
                <div class="col-md-2">
                    <div class="form-check form-switch mt-4">
                        <input class="form-check-input" type="checkbox" id="onlyActive" checked>
                        <label class="form-check-label" for="onlyActive">Active</label>
                    </div>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary w-100" id="btnReload">Tampilkan</button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-hover align-middle w-100" id="tbl">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Vendor</th>
                        <th>Item</th>
                        <th>Currency</th>
                        <th>Price</th>
                        <th>Min Qty</th>
                        <th>Effective</th>
                        <th>Valid?</th>
                        <th>Active</th>
                        <th>Notes</th>
                        <th>Aksi</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pricelist</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="form">
                    <div class="modal-body">
                        <input type="hidden" id="rowId" value="">
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Vendor</label>
                                <select class="form-select" id="vendorId" required></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Item</label>
                                <select class="form-select" id="itemId" required></select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Currency</label>
                                <input type="text" class="form-control" id="currency" value="IDR" maxlength="10">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Price</label>
                                <input type="number" min="0" step="0.01" class="form-control" id="price" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Min Qty</label>
                                <input type="number" min="0" step="0.001" class="form-control" id="minQty">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Effective From</label>
                                <input type="date" class="form-control" id="effFrom">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Effective To</label>
                                <input type="date" class="form-control" id="effTo">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Notes</label>
                                <textarea class="form-control" id="notes" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            const fmtRp = (n, cur) => Number(n || 0).toLocaleString('id-ID', { style: 'currency', currency: cur || 'IDR', maximumFractionDigits: 2 });
            const badge = (txt, cls) => `<span class="badge text-bg-${cls}">${txt}</span>`;

            const initVendor = ($el, placeholder) => {
                if ($el.data('select2')) $el.select2('destroy');
                $el.select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: placeholder || 'Cari vendor...',
                    allowClear: true,
                    ajax: {
                        url: `{{ route('vendor_pricelist.vendors.search') }}`,
                        dataType: 'json',
                        delay: 250,
                        data: (params) => ({ q: params.term || '' }),
                        processResults: (data) => data,
                    }
                });
            };
            const initItem = ($el, placeholder) => {
                if ($el.data('select2')) $el.select2('destroy');
                $el.select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: placeholder || 'Cari item...',
                    allowClear: true,
                    ajax: {
                        url: `{{ route('vendor_pricelist.items.search') }}`,
                        dataType: 'json',
                        delay: 250,
                        data: (params) => ({ q: params.term || '' }),
                        processResults: (data) => data,
                    }
                });
            };

            initVendor($('#filterVendor'), 'Semua vendor');
            initItem($('#filterItem'), 'Semua item');

            const modal = new bootstrap.Modal(document.getElementById('modal'));

            const table = $('#tbl').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: 'vendor', render: (v) => v || '-' },
                    { data: 'item', render: (v) => v || '-' },
                    { data: 'currency' },
                    { data: 'price', render: (v, t, r) => fmtRp(v, r.currency) },
                    { data: 'min_qty', render: (v) => (v===null||v===undefined)?'-':Number(v).toFixed(3) },
                    { data: null, render: (r) => `${r.effective_from || '-'} s/d ${r.effective_to || '-'}` },
                    { data: 'is_valid_as_of', render: (v) => v ? badge('VALID', 'success') : badge('EXPIRED', 'warning') },
                    { data: 'is_active', render: (v) => v ? badge('YES', 'success') : badge('NO', 'secondary') },
                    { data: 'notes', render: (v) => v || '-' },
                    { data: null, orderable: false, render: (r) => `
                        <div class="d-flex gap-1 flex-wrap">
                            <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${r.id}">Edit</button>
                            <button class="btn btn-sm btn-outline-dark btn-toggle" data-id="${r.id}">${r.is_active ? 'Nonaktif' : 'Aktifkan'}</button>
                        </div>
                    `},
                ]
            });

            const load = () => {
                const params = new URLSearchParams();
                params.set('vendor_id', $('#filterVendor').val() || '');
                params.set('item_id', $('#filterItem').val() || '');
                params.set('as_of', $('#asOf').val() || '');
                params.set('only_active', $('#onlyActive').is(':checked') ? '1' : '0');
                $.getJSON(`{{ route('vendor_pricelist.data') }}?${params.toString()}`)
                    .done((resp) => table.clear().rows.add(resp.data || []).draw())
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Load failed', 'error'));
            };

            $('#btnReload').on('click', load);
            $('#btnAdd').on('click', function () {
                $('#form')[0].reset();
                $('#rowId').val('');
                initVendor($('#vendorId'), 'Pilih vendor...');
                initItem($('#itemId'), 'Pilih item...');
                $('#vendorId').prop('disabled', false);
                $('#itemId').prop('disabled', false);
                modal.show();
            });

            $('#tbl').on('click', '.btn-toggle', function () {
                const id = $(this).data('id');
                $.post(`{{ url('/vendor-pricelist') }}/${id}/toggle`)
                    .done(() => { load(); })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed', 'error'));
            });

            $('#tbl').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id') || 0);
                const row = table.rows().data().toArray().find(x => Number(x.id) === id);
                if (!row) return;
                $('#rowId').val(String(id));

                initVendor($('#vendorId'), 'Vendor');
                initItem($('#itemId'), 'Item');
                $('#vendorId').prop('disabled', true);
                $('#itemId').prop('disabled', true);
                $('#vendorId').html(`<option value="${row.vendor_id}" selected>${row.vendor || ''}</option>`);
                $('#itemId').html(`<option value="${row.item_id}" selected>${row.item || ''}</option>`);

                $('#currency').val(row.currency || 'IDR');
                $('#price').val(row.price || 0);
                $('#minQty').val(row.min_qty ?? '');
                $('#effFrom').val(row.effective_from || '');
                $('#effTo').val(row.effective_to || '');
                $('#notes').val(row.notes || '');
                modal.show();
            });

            $('#form').on('submit', function (e) {
                e.preventDefault();
                const id = $('#rowId').val();
                const payload = {
                    vendor_id: $('#vendorId').val(),
                    item_id: $('#itemId').val(),
                    currency: $('#currency').val(),
                    price: $('#price').val(),
                    min_qty: $('#minQty').val(),
                    effective_from: $('#effFrom').val(),
                    effective_to: $('#effTo').val(),
                    notes: $('#notes').val(),
                };

                let url = `{{ route('vendor_pricelist.store') }}`;
                let method = 'POST';
                if (id) {
                    url = `{{ url('/vendor-pricelist') }}/${id}`;
                    method = 'PUT';
                }

                $.ajax({ url, type: method, data: payload })
                    .done((resp) => {
                        modal.hide();
                        load();
                        Swal.fire('OK', resp?.message || 'Saved', 'success');
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

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