@extends('layouts.admin-simple')

@section('title', 'Indirect Goods - Incoming Receipts')

@section('breadcrumb')
    <li class="breadcrumb-item">Warehouse</li>
    <li class="breadcrumb-item">Indirect Goods</li>
    <li class="breadcrumb-item active">Incoming Receipts</li>
@endsection

@section('page-title')
    <div class="d-flex justify-content-between align-items-center w-100">
        <div class="page-title-left">
            <h3 class="mb-1">Indirect Goods - Incoming Receipts</h3>
            <p class="text-muted mb-0" style="font-size: 13px;">Manage incoming receipts for indirect goods</p>
        </div>
        <div class="page-actions-right d-flex align-items-center">
            @can('warehouse.indirect-incoming.create')
                <a href="{{ route('warehouse.indirect-goods.incoming.create') }}" class="btn btn-sm btn-primary">
                    <i class="material-icons mr-1" style="font-size: 16px;">add</i>
                    New Receipt
                </a>
            @endcan
        </div>
    </div>
@endsection

@section('content')
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <!-- Filters Panel -->
    <div class="card mb-4">
        <div class="card-body py-3">
            <form id="filterForm" method="GET" action="{{ route('warehouse.indirect-goods.incoming.index') }}">
                <div class="row align-items-end">
                    <div class="col-md-2">
                        <div style="font-size: 12px; margin-bottom: 8px;">
                            <label for="status" class="form-label">Status</label>
                            <select name="status" id="status" class="form-control form-control-sm">
                                <option value="">All Statuses</option>
                                <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                                <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div style="font-size: 12px; margin-bottom: 8px;">
                            <label for="date_from" class="form-label">Date From</label>
                            <input type="date" name="date_from" id="date_from" value="{{ request('date_from') }}"
                                   class="form-control form-control-sm">
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div style="font-size: 12px; margin-bottom: 8px;">
                            <label for="date_to" class="form-label">Date To</label>
                            <input type="date" name="date_to" id="date_to" value="{{ request('date_to') }}"
                                   class="form-control form-control-sm">
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div style="font-size: 12px; margin-bottom: 8px;">
                            <label for="supplier_id" class="form-label">Supplier</label>
                            <select name="supplier_id" id="supplier_id" class="form-control form-control-sm filter-select2">
                                <option value="">All Suppliers</option>
                                @foreach($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}" {{ request('supplier_id') == $supplier->id ? 'selected' : '' }}>
                                        {{ $supplier->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div style="font-size: 12px; margin-bottom: 8px;">
                            <label for="invoice_number" class="form-label">Invoice Number</label>
                            <input type="text" name="invoice_number" id="invoice_number" value="{{ request('invoice_number') }}"
                                   class="form-control form-control-sm" placeholder="Search invoice...">
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div style="font-size: 12px; margin-bottom: 8px;">
                            <label class="form-label" style="visibility: hidden;">Actions</label>
                            <div class="d-flex flex-nowrap">
                                <button type="submit" class="btn btn-primary btn-sm mr-1" style="flex: 1;">
                                    <i class="material-icons mr-1" style="font-size: 16px;">search</i>
                                    Filter
                                </button>
                                <a href="{{ route('warehouse.indirect-goods.incoming.index') }}" class="btn btn-outline-secondary btn-sm" style="flex: 1;">
                                    <i class="material-icons mr-1" style="font-size: 16px;">refresh</i>
                                    Reset
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Data Table -->
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm table-hover mb-0" id="receiptsTable">
                    <thead class="bg-light">
                        <tr>
                            <th style="width: 4%;">#</th>
                            <th style="width: 12%;">Receipt No.</th>
                            <th style="width: 14%;">Supplier</th>
                            <th style="width: 10%;">Invoice No.</th>
                            <th style="width: 10%;">Invoice Date</th>
                            <th style="width: 14%;">Project</th>
                            <th style="width: 6%;">Items</th>
                            <th style="width: 10%;">Total Amount</th>
                            <th style="width: 8%;">Status</th>
                            <th style="width: 12%;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($receipts as $index => $receipt)
                            <tr>
                                <td>{{ $receipts->firstItem() + $index }}</td>
                                <td>
                                    <a href="{{ route('warehouse.indirect-goods.incoming.show', $receipt->id) }}" class="font-weight-bold text-primary">
                                        {{ $receipt->receipt_number }}
                                    </a>
                                    <br>
                                    <small class="text-muted">{{ $receipt->created_at->format('d M, Y') }}</small>
                                </td>
                                <td>{{ $receipt->supplier->name ?? '-' }}</td>
                                <td>{{ $receipt->invoice_number ?? '-' }}</td>
                                <td>{{ $receipt->invoice_date ? $receipt->invoice_date->format('d M, Y') : '-' }}</td>
                                <td>
                                    @if($receipt->project)
                                        {{ $receipt->project->project_name }}
                                        @if($receipt->project->project_number)
                                            <br><small class="text-muted">{{ $receipt->project->project_number }}</small>
                                        @endif
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <span class="badge badge-light">{{ $receipt->items->count() }}</span>
                                </td>
                                <td class="text-right">
                                    <strong>{{ number_format($receipt->total_amount, 2) }}</strong>
                                </td>
                                <td>
                                    @switch($receipt->status)
                                        @case('draft')
                                            <span class="badge badge-secondary">Draft</span>
                                            @break
                                        @case('approved')
                                            <span class="badge badge-info">Approved</span>
                                            @break
                                        @case('completed')
                                            <span class="badge badge-success">Completed</span>
                                            @break
                                        @default
                                            <span class="badge badge-light">{{ ucfirst($receipt->status) }}</span>
                                    @endswitch
                                </td>
                                <td>
                                    <div class="d-flex flex-nowrap">
                                        <a href="{{ route('warehouse.indirect-goods.incoming.show', $receipt->id) }}"
                                           class="btn btn-sm btn-outline-primary mr-1" title="View">
                                            <i class="material-icons" style="font-size: 14px;">visibility</i>
                                        </a>

                                        @if($receipt->status === 'draft')
                                            @can('warehouse.indirect-incoming.edit')
                                                <a href="{{ route('warehouse.indirect-goods.incoming.edit', $receipt->id) }}"
                                                   class="btn btn-sm btn-outline-info mr-1" title="Edit">
                                                    <i class="material-icons" style="font-size: 14px;">edit</i>
                                                </a>
                                            @endcan

                                            @can('warehouse.indirect-incoming.process')
                                                <form action="{{ route('warehouse.indirect-goods.incoming.destroy', $receipt->id) }}"
                                                      method="POST" class="d-inline delete-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete"
                                                            onclick="return confirm('Are you sure you want to delete this receipt?');">
                                                        <i class="material-icons" style="font-size: 14px;">delete</i>
                                                    </button>
                                                </form>
                                            @endcan
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="text-center text-muted py-4">
                                    <i class="material-icons" style="font-size: 48px; color: #ccc;">inbox</i>
                                    <p class="mt-2 mb-0">No incoming receipts found.</p>
                                    @can('warehouse.indirect-incoming.create')
                                        <a href="{{ route('warehouse.indirect-goods.incoming.create') }}" class="btn btn-sm btn-primary mt-2">
                                            <i class="material-icons mr-1" style="font-size: 16px;">add</i>
                                            Create New Receipt
                                        </a>
                                    @endcan
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @if($receipts->hasPages())
            <div class="card-footer d-flex justify-content-between align-items-center">
                <div class="text-muted" style="font-size: 13px;">
                    Showing {{ $receipts->firstItem() }} to {{ $receipts->lastItem() }} of {{ $receipts->total() }} receipts
                </div>
                <div>
                    {{ $receipts->links() }}
                </div>
            </div>
        @endif
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
    <style>
        .filter-select2 + .select2-container {
            width: 100% !important;
        }
        .select2-container--default .select2-selection--single {
            height: calc(1.5em + 0.5rem + 2px);
            padding: 0.15rem 0.5rem;
            font-size: 0.875rem;
            border: 1px solid #ced4da;
            border-radius: 0.2rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 1.6;
            padding-left: 0;
            color: #495057;
            font-size: 0.875rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: calc(1.5em + 0.5rem);
        }
        .table th {
            border-top: none;
            font-weight: 600;
            color: #495057;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .table td {
            vertical-align: middle;
            font-size: 13px;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.filter-select2').select2({
                placeholder: 'All Suppliers',
                allowClear: true,
                width: '100%'
            });
        });
    </script>
@endpush