@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-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 pending requests...">
                            </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">Method</span></th>
                                        <th><span class="userDatatable-title">Status</span></th>
                                        <th><span class="userDatatable-title">Withdrawn By</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-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' => $item->trxWithdrawal?->branch?->name ?: ($item->trxWithdrawal?->fulfillment_type == 'POSTAGE' ? 'Postage Delivery' : ($item->trxWithdrawal?->fulfillment_type ?: 'Walk-in Collection')),
                                                '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' => $item->trxWithdrawal?->fulfillment_type ?: ($item->trxWithdrawal?->branch_id ? 'WALK_IN' : 'POSTAGE'),
                                                'collection_branch' => $item->trxWithdrawal?->branch?->name ?: '',
                                                'branch_address' => $item->trxWithdrawal?->branch?->address ?: '',
                                                'branch_postcode' => $item->trxWithdrawal?->branch?->postcode ?: '',
                                                'branch_city' => $item->trxWithdrawal?->branch?->city ?: '',
                                                'branch_state' => $item->trxWithdrawal?->branch?->state ?: '',
                                                'branch_phone' => $item->trxWithdrawal?->branch?->phone ?: '',
                                                'branch_hours' => $item->trxWithdrawal?->branch?->operating_hours ?: '',
                                                '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">
                                                    @if (($item->trxWithdrawal?->fulfillment_type ?: ($item->trxWithdrawal?->branch_id ? 'WALK_IN' : 'POSTAGE')) === 'POSTAGE')
                                                        <span class="badge bg-light-info text-info"><i class="las la-shipping-fast fs-14 mr-1"></i>Postage Delivery</span>
                                                    @else
                                                        <span class="badge bg-light-primary text-primary"><i class="las la-store fs-14 mr-1"></i>Walk-in Collection</span>
                                                        @if ($item->trxWithdrawal?->branch?->name)
                                                            <small class="d-block text-muted mt-1">{{ $item->trxWithdrawal->branch->name }}</small>
                                                        @endif
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    <span class="badge bg-light-warning text-warning"><i class="las la-hourglass-half fs-14 mr-1"></i>Pending Approval (HQ)</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content font-weight-bold text-dark">{{ $item->withdraw_by }}</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>
                                                    <button type="button"
                                                        class="btn btn-xs btn-outline-success js-approve-btn"
                                                        data-url="{{ route('inventory.withdraw.approval.update', $item->inv_id) }}"
                                                        data-id="{{ $item->inv_id }}" title="Approve Request">
                                                        <i class="las la-check fs-14 mr-1"></i> Approve
                                                    </button>
                                                    <button type="button"
                                                        class="btn btn-xs btn-outline-danger js-reject-btn"
                                                        data-url="{{ route('inventory.withdraw.approval.reject', $item->inv_id) }}"
                                                        data-id="{{ $item->inv_id }}" title="Reject Request">
                                                        <i class="las la-times fs-14 mr-1"></i> Reject
                                                    </button>
                                                </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 withdrawal requests pending approval 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>

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

@endsection

@section('styles')
    <style>
        .inv-table-scroll {
            max-height: 540px;
            overflow-y: auto;
        }

        .inv-table-scroll thead th {
            position: sticky;
            top: 0;
            background-color: #fff;
            z-index: 1;
        }

        .inv-pagination-bar {
            border-top: 1px solid #eef1f5;
        }

        .inv-pagination-info {
            font-size: 13px;
            color: #7e8299;
        }

        .inv-pagination {
            display: flex;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 6px;
        }

        .inv-pagination__item {
            display: inline-flex;
        }

        .inv-pagination__link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 34px;
            padding: 0 8px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            color: #5a5f7d;
            background-color: #f4f5f7;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.15s ease-in-out;
            user-select: none;
        }

        .inv-pagination__link:hover:not(.disabled):not(.active) {
            background-color: #e4e7ed;
            color: #2c2e3d;
        }

        .inv-pagination__link.active {
            background-color: #0f766e;
            color: #fff;
            box-shadow: 0 4px 10px rgba(15, 118, 110, 0.35);
        }

        .inv-pagination__link.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        .inv-pagination__ellipsis {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 34px;
            color: #b4b7c9;
            font-weight: 600;
        }

        .inv-thumb-img {
            width: 44px;
            height: 44px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            background-color: #f4f5f7;
            position: relative;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .inv-thumb-img:hover {
            transform: scale(2.5);
            z-index: 10;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        }
    </style>
@endsection

@section('scripts')
    <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 $withdrawByFilter = $('#inventory-filter-withdraw-by');
            var $noResults = $('#inventory-no-results');
            var $info = $('#inventory-info');
            var $pagination = $('#inventory-pagination');

            // View Details Modal Handler
            $(document).on('click', '.js-view-detail-btn', function() {
                var row = $(this).closest('.inventory-row');
                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('<span class="badge bg-light-warning text-warning"><i class="las la-hourglass-half fs-14 mr-1"></i>Pending Approval (HQ)</span>');
                $('#modal-withdraw-detail').modal('show');
            });

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

                Swal.fire({
                    title: 'Approve Withdrawal Request?',
                    text: 'Are you sure you want to approve withdrawal request for item ' + id + '? It will be moved to Transfer to Branch stage.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#0f766e',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Yes, Approve',
                    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();
                    }
                });
            });

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

                Swal.fire({
                    title: 'Reject Withdrawal Request?',
                    text: 'Please enter the reason for rejecting withdrawal request ' + id + ':',
                    input: 'textarea',
                    inputPlaceholder: 'Type reason for rejection here...',
                    inputAttributes: {
                        'aria-label': 'Type your reason here',
                        'maxlength': 500
                    },
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Reject Request',
                    cancelButtonText: 'Cancel',
                    inputValidator: (value) => {
                        if (!value || !value.trim()) {
                            return 'You must provide a rejection reason!';
                        }
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        var form = $('<form>', {
                            'method': 'POST',
                            'action': url
                        });
                        var token = $('<input>', {
                            'type': 'hidden',
                            'name': '_token',
                            'value': '{{ csrf_token() }}'
                        });
                        var reason = $('<input>', {
                            'type': 'hidden',
                            'name': 'reason',
                            'value': result.value
                        });
                        form.append(token, reason);
                        $('body').append(form);
                        form.submit();
                    }
                });
            });

            function getMatchingRows() {
                var query = $searchInput.val().toLowerCase().trim();
                var goldType = $goldTypeFilter.val();
                var type = $typeFilter.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 matchesWithdrawBy = !withdrawBy || $(this).data('withdraw-by') == withdrawBy;

                    return matchesSearch && matchesGoldType && matchesType && 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($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 ($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