@extends('layouts.admin-simple')

@section('title', 'Outgoing Transactions')

@section('breadcrumb')
    <li class="breadcrumb-item">Warehouse</li>
    <li class="breadcrumb-item active">Outgoing Transactions</li>
@endsection

@section('page-title')
    <div class="page-title-left">
        <h3 class="mb-1">Outgoing Transactions</h3>
        <p class="text-muted mb-0" style="font-size: 13px;">Material dispatch and inventory management system</p>
    </div>
@endsection

@section('content')
    <!-- Statistics Cards -->
    <div class="row mb-4 warehouse-stats-row">
        <div class="col-xl-3 col-md-6 mb-3">
            <x-warehouse.stats-card
                title="Total Transactions"
                :value="$stats['total']"
                icon="receipt_long"
                color="primary"
                subtitle="All outgoing transactions"
                url="{{ route('warehouse.outgoing.index') }}"
            />
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <x-warehouse.stats-card
                title="Pending Approval"
                :value="$stats['pending']"
                icon="pending_actions"
                color="warning"
                subtitle="Awaiting manager approval"
                url="{{ route('warehouse.outgoing.index', ['status' => 'pending']) }}"
            />
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <x-warehouse.stats-card
                title="Approved"
                :value="$stats['approved']"
                icon="check_circle"
                color="success"
                subtitle="Ready for dispatch"
                url="{{ route('warehouse.outgoing.index', ['status' => 'approved']) }}"
            />
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <x-warehouse.stats-card
                title="Completed"
                :value="$stats['completed']"
                icon="local_shipping"
                color="info"
                subtitle="Materials dispatched"
                url="{{ route('warehouse.outgoing.index', ['status' => 'completed']) }}"
            />
        </div>
    </div>

    <!-- Filters Panel -->
    <div class="card mb-4 warehouse-filters-panel">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="material-icons align-middle mr-2">filter_list</i>
                Filters
            </h5>
        </div>
        <div class="card-body">
            <form id="filterForm" class="warehouse-filter-form" method="GET" action="{{ route('warehouse.outgoing.index') }}">
                <div class="row">
                    <div class="col-md-2 mb-3">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-control warehouse-select2" data-placeholder="All Status">
                            <option value="">All Status</option>
                            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                            <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Project</label>
                        <select name="project_id" class="form-control warehouse-select2" data-placeholder="All Projects">
                            <option value="">All Projects</option>
                            @foreach($projects as $project)
                                <option value="{{ $project->id }}" {{ request('project_id') == $project->id ? 'selected' : '' }}>
                                    {{ $project->project_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-3">
                        <label class="form-label">Division</label>
                        <select name="division_id" class="form-control warehouse-select2" data-placeholder="All Divisions">
                            <option value="">All Divisions</option>
                            @foreach($divisions as $division)
                                <option value="{{ $division->id }}" {{ request('division_id') == $division->id ? 'selected' : '' }}>
                                    {{ $division->division_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-3">
                        <label class="form-label">Date From</label>
                        <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-control">
                    </div>
                    <div class="col-md-2 mb-3">
                        <label class="form-label">Date To</label>
                        <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-control">
                    </div>
                    <div class="col-md-1 mb-3">
                        <label class="form-label">&nbsp;</label>
                        <button type="submit" class="btn btn-primary btn-block">
                            <i class="material-icons" style="font-size: 18px; vertical-align: middle;">search</i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Transactions Table -->
    <div class="card">
        <div class="card-header warehouse-report-header">
            <h5 class="mb-0 warehouse-report-title">
                <i class="material-icons align-middle mr-2">list</i>
                Outgoing Transactions ({{ $transactions->total() }} total)
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="warehouse-table-container">
                <!-- Loading Overlay -->
                <div class="warehouse-loading-overlay" id="tableLoadingOverlay">
                    <div class="warehouse-loading-content">
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="mt-2">Loading transactions...</div>
                        </div>
                    </div>
                </div>

                <!-- Table -->
                <div class="warehouse-table-wrapper">
                    <table class="table table-hover mb-0 warehouse-table">
                        <thead class="thead-light">
                            <tr>
                                <th style="min-width: 140px;">Request #</th>
                                <th style="min-width: 100px;">Date</th>
                                <th style="min-width: 180px;">Project</th>
                                <th style="min-width: 120px;">Division</th>
                                <th style="min-width: 100px;" class="text-center">Items</th>
                                <th style="min-width: 100px;" class="text-center">Status</th>
                                <th style="min-width: 120px;">Requested By</th>
                                <th style="min-width: 80px;" class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($transactions as $transaction)
                                @php
                                    $statusColors = [
                                        'pending' => 'warning',
                                        'approved' => 'success',
                                        'rejected' => 'danger',
                                        'completed' => 'info',
                                        'dispatched' => 'info',
                                        'delivered' => 'primary',
                                        'successful' => 'success',
                                        'partially_dispatched' => 'secondary',
                                        'fully_dispatched' => 'info',
                                    ];
                                    $statusColor = $statusColors[$transaction->status] ?? 'secondary';
                                @endphp
                                <tr>
                                    <td>
                                        <a href="{{ route('warehouse.outgoing.show', $transaction->id) }}" class="font-weight-medium">
                                            {{ $transaction->material_request_number ?: 'MR-' . str_pad($transaction->id, 6, '0', STR_PAD_LEFT) }}
                                        </a>
                                    </td>
                                    <td class="warehouse-cell-date">
                                        {{ $transaction->transaction_date ? $transaction->transaction_date->format('d M, Y') : '-' }}
                                    </td>
                                    <td>
                                        @if($transaction->project)
                                            <div class="font-weight-medium" title="{{ $transaction->project->project_name }}">
                                                {{ Str::limit($transaction->project->project_name, 25) }}
                                            </div>
                                            @if($transaction->project->project_number)
                                                <small class="text-muted">{{ $transaction->project->project_number }}</small>
                                            @endif
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($transaction->division)
                                            {{ $transaction->division->division_name }}
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="badge warehouse-badge warehouse-status-secondary">{{ $transaction->items->count() }}</span>
                                    </td>
                                    <td class="warehouse-cell-status">
                                        <span class="badge warehouse-badge warehouse-status-{{ $statusColor }}">
                                            {{ ucfirst(str_replace('_', ' ', $transaction->status)) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($transaction->requester)
                                            {{ $transaction->requester->name }}
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ route('warehouse.outgoing.show', $transaction->id) }}"
                                           class="btn btn-sm btn-outline-primary warehouse-action-btn" title="View Details">
                                            <i class="material-icons">visibility</i>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="warehouse-empty-state">
                                        <i class="material-icons">inbox</i>
                                        <h5>No Transactions Found</h5>
                                        <p class="text-muted">No outgoing transactions match your current filters.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        @if($transactions->hasPages())
            <div class="card-footer">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        Showing {{ $transactions->firstItem() }} to {{ $transactions->lastItem() }}
                        of {{ $transactions->total() }} transactions
                    </div>
                    <div>
                        <nav class="warehouse-pagination">
                            {{ $transactions->links('pagination::bootstrap-4') }}
                        </nav>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('styles')
    <link href="{{ asset('admin-assets/css/warehouse-reports.css') }}" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
    <style>
        .select2-container--bootstrap-5 .select2-selection {
            min-height: 38px;
            border: 1px solid #ced4da;
        }
        .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
            line-height: 36px;
        }
        .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }
        .select2-container {
            width: 100% !important;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ asset('admin-assets/js/warehouse-reports.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Initialize Select2 for filter dropdowns
            $('.warehouse-select2').select2({
                theme: 'bootstrap-5',
                allowClear: true,
                placeholder: function() {
                    return $(this).data('placeholder') || 'Select...';
                }
            });
        });
    </script>
@endpush