@extends('layouts.app')
@section('content')
    <div class="contents">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-main">
                        <div class="w-100">
                            <h4 class="text-capitalize breadcrumb-title">{{ $pageTitle }}</h4>
                            <span class="text-capitalize breadcrumb-sub-title"><small>{{ $pageDescription }}</small></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Stage Navigation Tabs -->
            @include('inventory.partials.withdraw-tabs')

            <div class="row">
                <div class="col-lg-12">
                    <div class="userDatatable global-shadow border p-30 bg-white radius-xl w-100 mb-30">
                        <div class="d-flex justify-content-between align-items-center mb-20 flex-wrap" style="gap: 10px;">
                            <div class="d-flex align-items-center flex-wrap" style="gap: 10px;">
                                <a href="#" id="inventory-export" class="btn btn-sm px-15 btn-outline-primary">
                                    <i class="las la-file-export fs-16 mr-1"></i>Export to Excel
                                </a>
                            </div>
                            <div class="d-flex align-items-center flex-wrap" style="gap: 10px;">
                                <select id="inventory-filter-gold-type" class="form-control form-control-sm w-auto">
                                    <option value="">All Gold Types</option>
                                    @foreach ($goldTypes as $goldType)
                                        <option value="{{ $goldType }}">{{ $goldType }}</option>
                                    @endforeach
                                </select>
                                <select id="inventory-filter-type" class="form-control form-control-sm w-auto">
                                    <option value="">All Types</option>
                                    @foreach ($types as $type)
                                        <option value="{{ $type }}">{{ $type }}</option>
                                    @endforeach
                                </select>
                                <select id="inventory-filter-status" class="form-control form-control-sm w-auto">
                                    <option value="">All Statuses</option>
                                    <option value="207">Shipped to Customer</option>
                                    <option value="205">Delivered</option>
                                </select>
                                <select id="inventory-filter-withdraw-by" class="form-control form-control-sm w-auto">
                                    <option value="">All Customers</option>
                                    @foreach ($withdrawnByUsers as $withdrawnBy)
                                        <option value="{{ $withdrawnBy }}">{{ $withdrawnBy }}</option>
                                    @endforeach
                                </select>
                                <input type="text" id="inventory-search" class="form-control form-control-sm w-auto"
                                    placeholder="Search delivered items...">
                            </div>
                        </div>
                        <div class="table-responsive inv-table-scroll">
                            <table class="table mb-0 table-borderless">
                                <thead>
                                    <tr class="userDatatable-header">
                                        <th><span class="userDatatable-title">Inventory ID</span></th>
                                        <th><span class="userDatatable-title">Photo</span></th>
                                        <th><span class="userDatatable-title">Item Withdrawn</span></th>
                                        <th><span class="userDatatable-title">Category</span></th>
                                        <th><span class="userDatatable-title">Weight</span></th>
                                        <th><span class="userDatatable-title">Est. Value (MYR)</span></th>
                                        <th><span class="userDatatable-title">Status</span></th>
                                        <th><span class="userDatatable-title">Courier & Tracking</span></th>
                                        <th><span class="userDatatable-title">Recipient & Address</span></th>
                                        <th><span class="userDatatable-title">Process Date</span></th>
                                        <th><span class="userDatatable-title">Action</span></th>
                                    </tr>
                                </thead>
                                <tbody id="inventory-table-body">
                                    @forelse ($inventory as $item)
                                        <tr class="inventory-row" data-gold-type="{{ $item->gold_type }}"
                                            data-type="{{ $item->type }}" data-status="{{ $item->process_status }}"
                                            data-withdraw-by="{{ $item->withdraw_by }}"
                                            data-item="{{ json_encode([
                                                'inv_id' => $item->inv_id,
                                                'image_url' => $item->image_url,
                                                'gold_type' => $item->gold_type,
                                                'category' => $item->category,
                                                'type' => $item->type,
                                                'weight' => $item->weight,
                                                'price' => $item->price,
                                                'process_status' => (int) $item->process_status,
                                                'withdraw_by' => $item->withdraw_by,
                                                'process_date' => $item->process_date,
                                                'create_by' => $item->create_by,
                                                'create_datetime' => $item->create_datetime,
                                                'validate_by' => $item->validate_by,
                                                'validate_datetime' => $item->validate_datetime,
                                                'approve_by' => $item->approve_by,
                                                'approve_datetime' => $item->approve_datetime,
                                                'branch_name' => 'Postage Delivery',
                                                'minting_fee' => (float) ($item->trxWithdrawal?->minting_fee_total ?: 0),
                                                'postage_fee' => (float) ($item->trxWithdrawal?->postage_base_fee ?: ($item->trxWithdrawal?->postage_fee ?: 0)),
                                                'takaful_fee' => (float) ($item->trxWithdrawal?->takaful_fee_total ?: 0),
                                                'is_takaful' => (bool) $item->trxWithdrawal?->is_takaful,
                                                'fee_total' => (float) ($item->trxWithdrawal?->fee_total ?: 0),
                                                'fee_payment_status' => $item->trxWithdrawal?->fee_payment_status ?: '-',
                                                'fulfillment_type' => 'POSTAGE',
                                                'recipient_name' => $item->trxWithdrawal?->recipient_name ?: '',
                                                'recipient_phone' => $item->trxWithdrawal?->recipient_phone ?: '',
                                                'shipping_address' => $item->trxWithdrawal?->shipping_address ?: '',
                                                'shipping_city' => $item->trxWithdrawal?->shipping_city ?: '',
                                                'shipping_state' => $item->trxWithdrawal?->shipping_state ?: '',
                                                'shipping_postcode' => $item->trxWithdrawal?->shipping_postcode ?: '',
                                                'courier_name' => $item->trxWithdrawal?->courier_name ?: '',
                                                'tracking_number' => $item->trxWithdrawal?->tracking_number ?: '',
                                                'trx_ref' => $item->trxWithdrawal?->trx_ref ?: '-',
                                            ]) }}">
                                            <td>
                                                <div class="userDatatable-content font-weight-600">{{ $item->inv_id }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    @if ($item->image_url)
                                                        <a href="{{ $item->image_url }}" target="_blank" rel="noopener">
                                                            <img src="{{ $item->image_url }}" alt="{{ $item->inv_id }}"
                                                                class="inv-thumb-img">
                                                        </a>
                                                    @else
                                                        <span class="text-muted fs-12">-</span>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    <div class="d-flex flex-column">
                                                        <span class="font-weight-bold text-dark">{{ $item->type }}</span>
                                                        <div class="d-flex align-items-center mt-1" style="gap: 5px;">
                                                            <span class="badge bg-light-warning text-warning font-weight-bold fs-11">{{ $item->gold_type }}</span>
                                                            <span class="badge bg-light-primary text-primary font-weight-bold fs-11">{{ $item->weight }}g</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">{{ $item->category }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content font-weight-bold text-primary">{{ $item->weight }} g</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content font-weight-600">{{ $item->price ? number_format($item->price, 2) : '-' }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    @switch((int) $item->process_status)
                                                        @case(207)
                                                            <span class="badge bg-light-info text-info"><i class="las la-shipping-fast fs-14 mr-1"></i>Shipped (In Transit)</span>
                                                        @break

                                                        @case(205)
                                                            <span class="badge bg-light-success text-success"><i class="las la-check-circle fs-14 mr-1"></i>Delivered</span>
                                                        @break

                                                        @default
                                                            <span class="badge bg-light-secondary text-secondary">Status {{ $item->process_status }}</span>
                                                    @endswitch
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    <div class="d-flex flex-column">
                                                        <span class="font-weight-600 text-dark">{{ $item->trxWithdrawal?->courier_name ?: '-' }}</span>
                                                        @if ($item->trxWithdrawal?->tracking_number)
                                                            <span class="badge bg-light-secondary text-secondary fs-11 mt-1 font-mono">
                                                                <i class="las la-barcode mr-1"></i>{{ $item->trxWithdrawal->tracking_number }}
                                                            </span>
                                                        @else
                                                            <span class="text-muted fs-12">-</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    <div class="d-flex flex-column" style="max-width: 220px;">
                                                        <span class="font-weight-600 text-dark">{{ $item->trxWithdrawal?->recipient_name ?: $item->withdraw_by }}</span>
                                                        @if ($item->trxWithdrawal?->recipient_phone)
                                                            <span class="fs-12 text-muted">{{ $item->trxWithdrawal->recipient_phone }}</span>
                                                        @endif
                                                        <span class="fs-11 text-muted text-truncate" title="{{ collect([$item->trxWithdrawal?->shipping_address, $item->trxWithdrawal?->shipping_postcode, $item->trxWithdrawal?->shipping_city, $item->trxWithdrawal?->shipping_state])->filter()->implode(', ') }}">
                                                            {{ collect([$item->trxWithdrawal?->shipping_address, $item->trxWithdrawal?->shipping_postcode, $item->trxWithdrawal?->shipping_city, $item->trxWithdrawal?->shipping_state])->filter()->implode(', ') ?: '-' }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">{{ $item->process_date }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content d-flex align-items-center" style="gap: 8px;">
                                                    <button type="button" class="btn btn-xs btn-outline-info js-view-detail-btn" title="View Details">
                                                        <i class="las la-eye fs-14"></i>
                                                    </button>
                                                    @if ((int) $item->process_status === 207)
                                                        <button type="button"
                                                            class="btn btn-xs btn-outline-success js-delivered-btn"
                                                            data-url="{{ route('inventory.withdraw.delivered.update', $item->inv_id) }}"
                                                            data-id="{{ $item->inv_id }}" title="Confirm Customer Delivery">
                                                            <i class="las la-check-circle fs-14 mr-1"></i> Confirm Delivered
                                                        </button>
                                                    @else
                                                        <span class="badge bg-light-success text-success fs-12"><i class="las la-check mr-1"></i>Delivered</span>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="11" class="text-center">
                                                <div class="card-body">
                                                    <div class="atbd-empty text-center py-4">
                                                        <div class="atbd-empty__image">
                                                            <img src="{{ asset('img/folders/1.svg') }}" alt="Admin Empty">
                                                        </div>
                                                        <div class="atbd-empty__text mt-3">
                                                            <p class="text-muted">No postage withdrawal delivery items found.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            <p id="inventory-no-results" class="text-center mt-20 mb-0" style="display:none;">No
                                matching withdrawal requests found.</p>
                        </div>
                        <div
                            class="inv-pagination-bar d-flex align-items-center justify-content-between flex-wrap mt-20 pt-20">
                            <p class="inv-pagination-info mb-0" id="inventory-info"></p>
                            <nav aria-label="Inventory pagination">
                                <ul class="inv-pagination mb-0" id="inventory-pagination"></ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Reusable Withdrawal Detail Modal -->
    @include('inventory.partials.withdraw-detail-modal')

    <style>
        .inv-thumb-img {
            width: 48px;
            height: 48px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            cursor: pointer;
            transition: transform 0.15s ease-in-out;
        }

        .inv-thumb-img:hover {
            transform: scale(1.08);
        }

        .inv-table-scroll {
            min-height: 200px;
        }

        .inv-pagination {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            gap: 4px;
        }

        .inv-pagination__item .inv-pagination__link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 32px;
            padding: 0 8px;
            font-size: 13px;
            font-weight: 500;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
            color: #4b5563;
            background: #fff;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.15s ease-in-out;
        }

        .inv-pagination__item .inv-pagination__link:hover:not(.disabled):not(.active) {
            background: #f1f5f9;
            border-color: #cbd5e1;
            color: #0f172a;
        }

        .inv-pagination__item .inv-pagination__link.active {
            background: #0f766e;
            border-color: #0f766e;
            color: #fff;
            cursor: default;
        }

        .inv-pagination__item .inv-pagination__link.disabled {
            color: #cbd5e1;
            pointer-events: none;
            cursor: not-allowed;
        }

        .inv-pagination__ellipsis {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 32px;
            color: #94a3b8;
            font-size: 13px;
        }

        .font-mono {
            font-family: monospace;
        }
    </style>

    <script>
        $(document).ready(function() {
            var PAGE_SIZE = 10;
            var currentPage = 1;

            var $searchInput = $('#inventory-search');
            var $goldTypeFilter = $('#inventory-filter-gold-type');
            var $typeFilter = $('#inventory-filter-type');
            var $statusFilter = $('#inventory-filter-status');
            var $withdrawByFilter = $('#inventory-filter-withdraw-by');
            var $pagination = $('#inventory-pagination');
            var $info = $('#inventory-info');
            var $noResults = $('#inventory-no-results');

            function getStatusBadgeHtml(status) {
                switch (parseInt(status)) {
                    case 207:
                        return '<span class="badge bg-light-info text-info"><i class="las la-shipping-fast fs-14 mr-1"></i>Shipped (In Transit)</span>';
                    case 205:
                        return '<span class="badge bg-light-success text-success"><i class="las la-check-circle fs-14 mr-1"></i>Delivered</span>';
                    default:
                        return '<span class="badge bg-light-secondary text-secondary">Status ' + status + '</span>';
                }
            }

            // View Detail Modal Handler
            $(document).on('click', '.js-view-detail-btn', function() {
                var row = $(this).closest('tr');
                var data = row.data('item');

                if (!data) return;

                if (window.renderWithdrawDetailModal) {
                    window.renderWithdrawDetailModal(data);
                } else {
                    $('#modal-inv-id').text(data.inv_id || '-');
                    $('#modal-detail-img').attr('src', data.image_url || '{{ asset("img/folders/1.svg") }}');
                    $('#modal-gold-type').text(data.gold_type || '-');
                    $('#modal-category').text(data.category || '-');
                    $('#modal-type').text(data.type || '-');
                    $('#modal-weight').text(data.weight || '-');
                    $('#modal-price').text(data.price ? parseFloat(data.price).toFixed(2) : '-');
                    $('#modal-withdraw-by').text(data.withdraw_by || '-');
                    $('#modal-process-date').text(data.process_date || '-');
                    $('#modal-create-by').text(data.create_by || '-');
                    $('#modal-create-date').text(data.create_datetime || '-');
                    $('#modal-validate-by').text(data.validate_by || '-');
                    $('#modal-validate-date').text(data.validate_datetime || '-');
                    $('#modal-approve-by').text(data.approve_by || '-');
                    $('#modal-approve-date').text(data.approve_datetime || '-');
                    $('#modal-item-name').text(data.type || '-');
                    $('#modal-minting-fee').text(data.minting_fee ? parseFloat(data.minting_fee).toFixed(2) : '0.00');
                    $('#modal-fee-total').text(data.fee_total ? parseFloat(data.fee_total).toFixed(2) : '0.00');
                    $('#modal-status-badge').html(getStatusBadgeHtml(data.process_status));
                }

                $('#modal-withdraw-detail').modal('show');
            });

            // Confirm Delivery Action Handler
            $(document).on('click', '.js-delivered-btn', function() {
                var url = $(this).data('url');
                var id = $(this).data('id');

                Swal.fire({
                    title: 'Confirm Customer Delivery?',
                    text: 'Confirm that postage withdrawal item ' + id + ' has been safely delivered to the customer? This will finalize the withdrawal and update the gold wallet.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#0f766e',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Yes, Confirm Delivered',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        var form = $('<form>', {
                            'method': 'POST',
                            'action': url
                        });
                        var token = $('<input>', {
                            'type': 'hidden',
                            'name': '_token',
                            'value': '{{ csrf_token() }}'
                        });
                        form.append(token);
                        $('body').append(form);
                        form.submit();
                    }
                });
            });

            function getMatchingRows() {
                var query = $searchInput.val().toLowerCase().trim();
                var goldType = $goldTypeFilter.val();
                var type = $typeFilter.val();
                var status = $statusFilter.val();
                var withdrawBy = $withdrawByFilter.val();

                return $('#inventory-table-body .inventory-row').filter(function() {
                    var matchesSearch = !query || $(this).text().toLowerCase().indexOf(query) > -1;
                    var matchesGoldType = !goldType || $(this).data('gold-type') == goldType;
                    var matchesType = !type || $(this).data('type') == type;
                    var matchesStatus = !status || $(this).data('status') == status;
                    var matchesWithdrawBy = !withdrawBy || $(this).data('withdraw-by') == withdrawBy;

                    return matchesSearch && matchesGoldType && matchesType && matchesStatus && matchesWithdrawBy;
                });
            }

            function paginate() {
                var $allRows = $('#inventory-table-body .inventory-row');
                var $matchingRows = getMatchingRows();
                var totalMatches = $matchingRows.length;
                var totalPages = Math.max(1, Math.ceil(totalMatches / PAGE_SIZE));

                if (currentPage > totalPages) {
                    currentPage = totalPages;
                }

                $allRows.hide();

                if (totalMatches === 0 && $allRows.length > 0) {
                    $noResults.show();
                    $info.text('');
                    $pagination.empty();
                    return;
                }

                $noResults.hide();

                var startIdx = (currentPage - 1) * PAGE_SIZE;
                var endIdx = startIdx + PAGE_SIZE;
                $matchingRows.slice(startIdx, endIdx).show();

                var startItem = totalMatches === 0 ? 0 : startIdx + 1;
                var endItem = Math.min(endIdx, totalMatches);
                $info.text('Showing ' + startItem + ' to ' + endItem + ' of ' + totalMatches + ' entries');

                renderPaginationControls(totalPages);
            }

            function renderPaginationControls(totalPages) {
                $pagination.empty();
                if (totalPages <= 1) return;

                appendPageItem('&laquo;', currentPage - 1, currentPage === 1);

                var maxVisible = 5;
                var startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
                var endPage = Math.min(totalPages, startPage + maxVisible - 1);

                if (endPage - startPage + 1 < maxVisible) {
                    startPage = Math.max(1, endPage - maxVisible + 1);
                }

                if (startPage > 1) {
                    appendPageItem('1', 1, false, currentPage === 1);
                    if (startPage > 2) appendEllipsis();
                }

                for (var p = startPage; p <= endPage; p++) {
                    appendPageItem(p, p, false, p === currentPage);
                }

                if (endPage < totalPages) {
                    if (endPage < totalPages - 1) appendEllipsis();
                    appendPageItem(totalPages, totalPages, false, totalPages === currentPage);
                }

                appendPageItem('&raquo;', currentPage + 1, currentPage === totalPages);
            }

            function appendPageItem(label, targetPage, disabled, active) {
                var $li = $('<li>').addClass('inv-pagination__item');
                var $a = $('<a>').addClass('inv-pagination__link').html(label);

                if (disabled) $a.addClass('disabled');
                if (active) $a.addClass('active');

                if (!disabled && !active) {
                    $a.on('click', function(e) {
                        e.preventDefault();
                        currentPage = targetPage;
                        paginate();
                    });
                }

                $li.append($a);
                $pagination.append($li);
            }

            function appendEllipsis() {
                $pagination.append(
                    $('<li>').addClass('inv-pagination__item')
                    .append($('<span>').addClass('inv-pagination__ellipsis').html('&hellip;'))
                );
            }

            $searchInput.on('input', function() {
                currentPage = 1;
                paginate();
            });

            $goldTypeFilter.add($typeFilter).add($statusFilter).add($withdrawByFilter).on('change', function() {
                currentPage = 1;
                paginate();
            });

            $('#inventory-export').on('click', function(e) {
                e.preventDefault();
                var params = new URLSearchParams();
                if ($goldTypeFilter.val()) params.set('gold_type', $goldTypeFilter.val());
                if ($typeFilter.val()) params.set('type', $typeFilter.val());
                if ($statusFilter.val()) params.set('status', $statusFilter.val());
                if ($withdrawByFilter.val()) params.set('withdraw_by', $withdrawByFilter.val());
                if ($searchInput.val().trim()) params.set('search', $searchInput.val().trim());

                var exportUrl = '{{ route('inventory.export') }}' + (params.toString() ? '?' + params.toString() : '');
                window.location.href = exportUrl;
            });

            paginate();
        });
    </script>
@endsection