@extends('layout.app')
@section('title', 'Items')
@section('page-title', 'Manage Items')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Items Details</h6>
                    <div>
                        <a class="btn btn-primary" href="{{ route('items.create') }}">Add Item</a>
                        <a class="btn btn-primary" href="{{ route('items.report') }}"><i class="bi bi-file-earmark-text"></i> Report</a>
                    </div>
                </div>
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="table-responsive p-0">
                        <form method="GET" action="{{ request()->url() }}" id="searchForm">
                            <table class="table align-items-center mb-0 text-center">
                                <thead>
                                    <tr>
                                        <th>Sr#</th>
                                        <th>Item Code</th>
                                        <th>Name</th>
                                        <th>Description</th>
                                        <th>Location</th>
                                        <th>Unit</th>
                                        <th>Pieces/Carton</th>
                                        <th>Cost</th>
                                        <th>Price</th>
                                        <th>Stock Quantity</th>
                                        <th>Operations</th>
                                    </tr>
                                    <tr>
                                        <th></th>
                                        <th>
                                            <input type="search" name="item_code" value="{{ request('item_code') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="name" value="{{ request('name') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="description" value="{{ request('description') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="location" value="{{ request('location') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="unit" value="{{ request('unit') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="pieces_per_carton"
                                                value="{{ request('pieces_per_carton') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="cost" value="{{ request('cost') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="price" value="{{ request('price') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th>
                                            <input type="search" name="stock" value="{{ request('stock') }}"
                                                class="form-control form-control-sm" placeholder="">
                                        </th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($items as $item)
                                        <tr>
                                            <td>{{ $loop->iteration ?? 'N/A' }}</td>
                                            <td>{{ $item->item_code ?? 'N/A' }}</td>
                                            <td>{{ $item->name ?? 'N/A' }}</td>
                                            <td>{{ $item->description ?? 'N/A' }}</td>
                                            <td>{{ $item->location ?? 'N/A' }}</td>
                                            <td>{{ $item->unit->name ?? 'N/A' }}</td>
                                            <td>{{ $item->pieces_per_carton ?? 'N/A' }}</td>
                                            <td>{{ $item->cost ?? 'N/A' }}</td>
                                            <td>{{ $item->price ?? 'N/A' }}</td>
                                            <td>{{ $item->stock ?? 'N/A' }}</td>
                                            <td>
                                                <a href="{{ route('items.edit', $item->id) }}"
                                                    class="btn p-0 border-0 bg-transparent text-primary me-3"
                                                    title="Edit">
                                                    <i class="bi bi-pencil-square fs-5"></i>
                                                </a>

                                                <a href="{{ route('items.single-report', $item->id) }}"
                                                    class="btn p-0 border-0 bg-transparent text-primary me-3"
                                                    title="Report">
                                                    <i class="bi bi-file-earmark-text fs-5"></i>
                                                </a>

                                                {{-- <button type="button"
                                                    class="btn p-0 border-0 bg-transparent text-danger delete-btn"
                                                    data-url="{{ route('items.destroy', $item->id) }}"
                                                    data-id="{{ $item->id }}" title="Delete">
                                                    <i class="bi bi-trash fs-5"></i>
                                                </button> --}}
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="10" class="text-center">No items found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>
                <div class="card-footer px-3 py-2">
                    {!! $items->appends(request()->query())->links('pagination::bootstrap-4') !!}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function() {
            const form = document.querySelector('form#searchForm');
            if (!form) return;
            let timeout;
            const inputs = form.querySelectorAll('input[type="search"]');
            inputs.forEach(input => {
                input.addEventListener('input', function() {
                    clearTimeout(timeout);
                    timeout = setTimeout(function() {
                        // keep current page reset to first page when filtering
                        const pageInput = form.querySelector('input[name="page"]');
                        if (pageInput) pageInput.value = 1;
                        form.submit();
                    }, 500);
                });
            });

            // Handle delete button clicks
            // document.querySelectorAll('.delete-btn').forEach(btn => {
            //     btn.addEventListener('click', function(e) {
            //         e.preventDefault();
            //         if (confirm('Are you sure you want to delete this item?')) {
            //             const form = document.createElement('form');
            //             form.method = 'POST';
            //             form.action = this.dataset.url;
            //             form.innerHTML =
            //                 `<input type="hidden" name="_token" value="{{ csrf_token() }}"><input type="hidden" name="_method" value="DELETE">`;
            //             form.style.display = 'none';
            //             document.body.appendChild(form);
            //             form.submit();
            //         }
            //     });
            // });
        })();
    </script>
@endpush