@php
    // Staff users only see the actions that they are allowed to perform.
    $canCreatePurchase = \App\Support\AdminAccess::canAction('purchases', 'create');
    $canEditPurchase = \App\Support\AdminAccess::canAction('purchases', 'edit');
    $canDeletePurchase = \App\Support\AdminAccess::canAction('purchases', 'delete');
@endphp

<div>
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-0">{{ __('Purchases') }}</h4>
            <small class="text-muted">{{ __('Manage your stock procurement and vendor invoices') }}</small>
        </div>
        @if($canCreatePurchase)
            <button wire:click="openCreateModal" class="btn btn-primary shadow-sm">
                <i class="fa fa-plus me-1"></i> {{ __('Add Purchase') }}
            </button>
        @endif
    </div>

    @if (session()->has('message'))
        <div class="alert alert-success border-0 shadow-sm mb-4">{{ session('message') }}</div>
    @endif

    <!-- Table Card -->
    <div class="card shadow-sm border-0 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4">{{ __('Date / Invoice') }}</th>
                        <th>{{ __('Supplier') }}</th>
                        <th>{{ __('Total Amount') }}</th>
                        <th>{{ __('Freight') }}</th>
                        <th>{{ __('Purchase Status') }}</th>
                        <th>{{ __('Payment Status') }}</th>
                        <th class="text-end pe-4">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($purchases as $item)
                    <tr>
                        <td class="ps-4">
                            <div class="d-flex flex-column">
                                <strong>{{ $item->invoice_no }}</strong>
                                <small class="text-muted">{{ \Carbon\Carbon::parse($item->purchase_date)->format('d M, Y') }}</small>
                            </div>
                        </td>
                        <td>{{ $item->supplier->display_name ?? __('N/A') }}</td>
                        <td><span class="fw-bold">Rs. {{ number_format($item->grand_total) }}</span></td>
                        <td>
                            @if((float) ($item->cut_total ?? 0) > 0)
                                <span class="badge bg-label-warning text-dark">
                                    Rs. {{ number_format((float) $item->cut_total, 2) }}
                                </span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge {{ $item->status == 'received' ? 'bg-label-success' : 'bg-label-warning' }}">
                                {{ strtoupper($item->status) }}
                            </span>
                        </td>
                        <td>
                            <span class="badge {{ $item->payment_status == 'paid' ? 'bg-label-info' : 'bg-label-danger' }}">
                                {{ strtoupper($item->payment_status) }}
                            </span>
                        </td>
                        <td class="text-end pe-4">
                            <a href="{{ route('admin.purchases.print', ['purchase' => $item->id, 'lang' => app()->getLocale()]) }}"
                               target="_blank"
                               class="btn btn-sm btn-icon btn-text-secondary rounded-pill"
                               title="{{ __('Print Purchase') }}">
                                <i class="fa fa-print"></i>
                            </a>
                            @if($canEditPurchase)
                                <button wire:click="edit({{ $item->id }})" class="btn btn-sm btn-icon btn-text-info rounded-pill"><i class="fa fa-edit"></i></button>
                                <button wire:click="openCutModal({{ $item->id }})" class="btn btn-sm btn-icon btn-text-warning rounded-pill" title="{{ __('Purchase Cut') }}">
                                    <i class="fa fa-scissors"></i>
                                </button>
                            @endif
                            @if($canDeletePurchase)
                                <button onclick="confirm('Khatam kardein?') || event.stopImmediatePropagation()" wire:click="delete({{ $item->id }})" class="btn btn-sm btn-icon btn-text-danger rounded-pill"><i class="fa fa-trash"></i></button>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted">{{ __('No purchases recorded yet.') }}</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-3">
            {{ $purchases->links() }}
        </div>
    </div>

    <!-- Purchase Freight Modal -->
    <div wire:ignore.self class="modal fade" id="purchaseCutModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header border-bottom-0 pb-0">
                    <h5 class="modal-title fw-bold">{{ __('Purchase Freight') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Close') }}" wire:click="resetCutModal"></button>
                </div>

                <form wire:submit.prevent="saveCut">
                    <div class="modal-body pt-4">
                        <div class="alert alert-light border mb-3">
                            <div class="fw-semibold">
                                {{ $selectedCutPurchase?->invoice_no ?? __('Purchase') }}
                            </div>
                            <div class="small text-muted">
                                {{ $selectedCutPurchase?->supplier?->display_name ?? __('Supplier not found') }}
                            </div>
                            <div class="small text-muted mt-1">
                                {{ __('Outstanding') }}: Rs. {{ number_format((float) ($selectedCutPurchase ? $this->getOutstandingAmount($selectedCutPurchase) : 0), 2) }}
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __('Freight Date') }}</label>
                            <input type="date" wire:model.live="cut_date" class="form-control @error('cut_date') is-invalid @enderror">
                            @error('cut_date') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __('Freight Amount') }}</label>
                            <input type="number" step="0.01" min="0.01" wire:model="cut_amount" class="form-control @error('cut_amount') is-invalid @enderror" placeholder="0.00">
                            @error('cut_amount') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __('Freight Note') }}</label>
                            <textarea wire:model="cut_note" class="form-control @error('cut_note') is-invalid @enderror" rows="3" placeholder="{{ __('Write short note...') }}"></textarea>
                            @error('cut_note') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>

                    <div class="modal-footer border-top-0 pt-0">
                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal" wire:click="resetCutModal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-warning px-4">
                            <span wire:loading.remove wire:target="saveCut">{{ __('Save Cut') }}</span>
                            <span wire:loading wire:target="saveCut"><i class="fa fa-spinner fa-spin"></i> {{ __('Processing...') }}</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--
      wire:ignore.self = sirf is outer div ko Livewire patch nahi kare ga.
      Bootstrap modal open hone par yahan "show" class lagata hai; agar yeh div patch ho jaye to wo class hat jati hai aur poora modal gaib lagta hai (product search = re-render).
      Andar wala form / inputs phir bhi Livewire se update hote rahen ge.
    -->
    <div wire:ignore.self class="modal fade" id="purchaseModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header border-bottom-0 pb-0">
                    <h5 class="modal-title fw-bold">{{ $isEditMode ? __('Edit Purchase') : __('Add New Purchase') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Close') }}"></button>
                </div>

                <form wire:submit.prevent="save" wire:key="purchase-form-{{ $selected_id ?? 'new' }}-{{ $isEditMode ? 'e' : 'c' }}">
                    <div class="modal-body pt-4">
                        <!-- Date & Invoice -->
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">{{ __('Purchase Date') }}</label>
                                <input type="date" wire:model.live="purchase_date" class="form-control">
                                @error('purchase_date') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">{{ __('Invoice Number') }}</label>
                                <input type="text" wire:model.live="invoice_no" class="form-control" placeholder="{{ __('PUR-1002') }}">
                                @error('invoice_no') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>
                        </div>

                        <!-- Supplier & Status -->
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">{{ __('Supplier') }}</label>
                                <select wire:model.live="supplier_id" class="form-select">
                                    <option value="">{{ __('Select Vendor') }}</option>
                                    @foreach($suppliers as $s)
                                        <option value="{{ $s->id }}">{{ $s->display_name }}</option>
                                    @endforeach
                                </select>
                                @error('supplier_id') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">{{ __('Purchase Status') }}</label>
                                <select wire:model.live="status" class="form-select">
                                    <option value="received">{{ __('Received') }}</option>
                                    <option value="ordered">{{ __('Ordered') }}</option>
                                    <option value="pending">{{ __('Pending') }}</option>
                                </select>
                            </div>
                        </div>

                        <!-- Product: search + dropdown arrow (list scroll / select) -->
                        <div class="row">
                            <div class="col-12 mb-3">
                                <label class="form-label fw-semibold text-primary">{{ __('Select Product') }}</label>
                                <div class="input-group shadow-sm">
                                    <input type="text"
                                           class="form-control border-primary"
                                           wire:model.live.debounce.300ms="product_search"
                                           placeholder="{{ __('Search name or barcode…') }}"
                                           autocomplete="off"
                                           aria-label="{{ __('Product search') }}">
                                    <button type="button"
                                            class="btn btn-outline-primary border-primary px-3"
                                            wire:click="toggleProductPicker"
                                            aria-expanded="{{ $product_list_open ? 'true' : 'false' }}"
                                            title="List kholo ya band karo (bina type kiye bhi)">
                                        <i class="fa fa-chevron-down transition-all"
                                           style="transition: transform 0.2s ease; display: inline-block; transform: rotate({{ $product_list_open ? '180' : '0' }}deg);"></i>
                                    </button>
                                </div>

                                @if($show_product_picker)
                                    <div class="list-group mt-2 border rounded shadow-sm" style="max-height: 240px; overflow-y: auto;">
                                        @forelse($filtered_products as $p)
                                            <button type="button"
                                                    wire:click="addProduct({{ $p->id }})"
                                                    wire:key="search-product-{{ $p->id }}"
                                                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-2 text-start">
                                                <span class="fw-medium">{{ $p->display_name }}</span>
                                                <span class="small text-muted text-nowrap ms-2">
                                                    {{ __('Pur. Rs') }} {{ number_format((float) ($p->purchase_rate ?? 0), 2) }}
                                                    &middot; {{ __('Qty') }} {{ $p->quantity ?? 0 }}
                                                </span>
                                            </button>
                                        @empty
                                            <div class="list-group-item text-muted small py-3 text-center">
                                                @if(strlen(trim($product_search)) >= 1)
                                                    No matches found.
                                                @else
                                                    No product found.
                                                @endif
                                            </div>
                                        @endforelse
                                    </div>
                                @endif
                            </div>
                        </div>

<!-- Dynamic Items Table: rates yahan edit — Save par products table bhi update -->
<div class="table-responsive border rounded mb-3 shadow-sm">
    <table class="table table-sm table-hover align-middle mb-0">
        <thead class="bg-light">
            <tr>
                <th class="ps-3" style="width: 22%;">{{ __('Product') }}</th>
                <th style="width: 11%;">{{ __('Qty') }}</th>
                <th style="width: 15%;">{{ __('Purchase rate') }}</th>
                <th style="width: 15%;">{{ __('Sale rate') }}</th>
                <th class="text-end" style="width: 14%;">{{ __('Sub total') }}</th>
                <th class="text-center" style="width: 5%;"></th>
            </tr>
        </thead>
        <tbody>
            @forelse($order_items as $index => $item)
                <tr>
                    <td class="ps-3">
                        <div class="d-flex flex-column">
                            <span class="fw-bold text-dark">{{ $item['name'] }}</span>
                            <small class="text-muted">{{ __('Stock:') }} {{ $item['available_stock'] ?? 0 }}</small>
                        </div>
                    </td>
                    <td>
                        <input type="number"
                               wire:model.live="order_items.{{ $index }}.quantity"
                               wire:key="purchase-qty-{{ $index }}"
                               class="form-control form-control-sm text-center"
                               min="0.01"
                               step="0.01">
                    </td>
                    <td>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">Rs</span>
                            <input type="number"
                                   wire:model.live="order_items.{{ $index }}.purchase_price"
                                   wire:key="purchase-pur-{{ $index }}"
                                   class="form-control form-control-sm"
                                   min="0"
                                   step="0.01">
                        </div>
                    </td>
                    <td>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">Rs</span>
                            <input type="number"
                                   wire:model.live="order_items.{{ $index }}.sale_rate"
                                   wire:key="purchase-sale-{{ $index }}"
                                   class="form-control form-control-sm"
                                   min="0"
                                   step="0.01">
                        </div>
                    </td>
                    <td class="fw-bold text-end pe-3 text-primary">
                        Rs. {{ number_format((float) ($item['sub_total'] ?? 0), 2) }}
                    </td>
                    <td class="text-center">
                        <button type="button"
                                wire:click="removeItem({{ $index }})"
                                class="btn btn-sm btn-icon btn-text-danger rounded-pill">
                            <i class="fa fa-times"></i>
                        </button>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" class="text-center py-4 text-muted small">
                        <i class="fa fa-shopping-basket d-block mb-2 fa-2x opacity-25"></i> {{ __('No products selected yet. Please select a product from above.') }}
                    </td>
                </tr>
            @endforelse
        </tbody>
        @if(count($order_items) > 0)
        <tfoot class="bg-light fw-bold">
            <tr>
                <td colspan="4" class="text-end ps-3">{{ __('Total Item Amount:') }}</td>
                <td class="text-end pe-3">Rs. {{ number_format(collect($order_items)->sum('sub_total'), 2) }}</td>
                <td></td>
            </tr>
        </tfoot>
        @endif
    </table>
</div>
@error('order_items')
    <div class="alert alert-danger py-2 small mb-3">{{ $message }}</div>
@enderror

                        <div class="row bg-light p-3 rounded-3 mb-3 mx-1">
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">{{ __('Discount') }}</label>
                                <input type="number" wire:model.live="discount" class="form-control" placeholder="0">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">{{ __('Shipping Cost') }}</label>
                                <input type="number" wire:model.live="shipping_cost" class="form-control" placeholder="0">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">{{ __('Payment Status') }}</label>
                                <select wire:model.live="payment_status" class="form-select">
                                    <option value="pending">{{ __('Pending') }}</option>
                                    <option value="partial">{{ __('Partial') }}</option>
                                    <option value="paid">{{ __('Paid') }}</option>
                                </select>
                            </div>
                        </div>

                        @if($payment_status !== 'pending')
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold">{{ __('Account') }}</label>
                                    <select wire:model.live="account_id" class="form-select">
                                        <option value="">{{ __('Select Account') }}</option>
                                        @foreach($accounts as $account)
                                            <option value="{{ $account->id }}">
                                                {{ $account->account_name }}{{ $account->account_type ? ' (' . $account->account_type . ')' : '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('account_id') <small class="text-danger">{{ $message }}</small> @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold">{{ __('Paid By') }}</label>
                                    <select wire:model.live="paid_by" class="form-select">
                                        <option value="">{{ __('Select Type') }}</option>
                                        @foreach($accountTypes as $accountType)
                                            <option value="{{ $accountType }}">{{ $accountType }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold">{{ __('Received Amount *') }}</label>
                                    <input type="number" wire:model.live="received_amount" class="form-control" placeholder="0" step="0.01" min="0">
                                    @error('received_amount') <small class="text-danger">{{ $message }}</small> @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold">{{ __('Paying Amount *') }}</label>
                                    <input type="number" wire:model.live="paying_amount" class="form-control" placeholder="0" step="0.01" min="0">
                                    @error('paying_amount') <small class="text-danger">{{ $message }}</small> @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold">{{ __('Payment Receiver') }}</label>
                                    <input type="text" wire:model.live="payment_receiver" class="form-control" placeholder="{{ __('Receiver name') }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold">{{ __('Payment Note') }}</label>
                                    <textarea wire:model.live="payment_note" class="form-control" rows="2" placeholder="{{ __('Payment detail...') }}"></textarea>
                                </div>
                            </div>
                        @endif

                        <div class="mb-3">
                            <label class="form-label fw-semibold">{{ __('Purchase Note / Remarks') }}</label>
                            <textarea wire:model.live="note" class="form-control" rows="2" placeholder="{{ __('Write any detail here...') }}"></textarea>
                        </div>
                    </div>

                    <div class="modal-footer border-top-0 pt-0 d-flex justify-content-between">
                        <div class="h5 mb-0 fw-bold text-primary">
                            Grand Total: Rs. {{ number_format($grand_total) }}
                        </div>
                        <div>
                            <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary px-4">
                                <span wire:loading.remove>{{ __('Save Purchase') }}</span>
                                <span wire:loading><i class="fa fa-spinner fa-spin"></i> {{ __('Processing...') }}</span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Scripts for Modal -->
    <script>
        window.addEventListener('show-modal', event => {
            let myModal = new bootstrap.Modal(document.getElementById('purchaseModal'));
            myModal.show();
        });
        window.addEventListener('hide-modal', event => {
            let modalEl = document.getElementById('purchaseModal');
            let modal = bootstrap.Modal.getInstance(modalEl);
            if(modal) modal.hide();
        });

        window.addEventListener('show-purchase-cut-modal', event => {
            let myModal = new bootstrap.Modal(document.getElementById('purchaseCutModal'));
            myModal.show();
        });

        window.addEventListener('hide-purchase-cut-modal', event => {
            let modalEl = document.getElementById('purchaseCutModal');
            let modal = bootstrap.Modal.getInstance(modalEl);
            if(modal) modal.hide();
        });
    </script>
</div>