@extends('layouts.admin-simple')

@section('title', 'Division Deliveries Report')

@section('breadcrumb')
    <li class="breadcrumb-item">Warehouse</li>
    <li class="breadcrumb-item"><a href="{{ route('warehouse.reports.index') }}">Reports</a></li>
    <li class="breadcrumb-item active">Division Deliveries</li>
@endsection

@section('page-title')
    <div class="page-title-left">
        <h3 class="mb-1">Division Deliveries Report</h3>
        <p class="text-muted mb-0" style="font-size: 13px;">Track total deliveries, current stock, and utilization by division</p>
    </div>
@endsection

@section('content')
    <!-- Statistics Cards -->
    <div class="row mb-4 warehouse-stats-row">
        <div class="col-xl-2 col-md-4 mb-3">
            <x-warehouse.stats-card
                title="Total Items"
                :value="$totalItems"
                icon="inventory_2"
                color="primary"
                subtitle="Items tracked"
            />
        </div>

        <div class="col-xl-2 col-md-4 mb-3">
            <x-warehouse.stats-card
                title="Total Delivered"
                :value="number_format($totalDeliveries, 0)"
                icon="local_shipping"
                color="success"
                subtitle="Units delivered"
            />
        </div>

        <div class="col-xl-2 col-md-4 mb-3">
            <x-warehouse.stats-card
                title="Currently Available"
                :value="number_format($totalAvailable, 0)"
                icon="warehouse"
                color="info"
                subtitle="Units in stock"
            />
        </div>

        <div class="col-xl-2 col-md-4 mb-3">
            <x-warehouse.stats-card
                title="Total Issued"
                :value="number_format($totalIssued, 0)"
                icon="output"
                color="warning"
                subtitle="Units issued"
            />
        </div>

        <div class="col-xl-2 col-md-4 mb-3">
            <x-warehouse.stats-card
                title="Utilization Rate"
                :value="number_format($utilizationRate, 1) . '%'"
                icon="trending_up"
                color="{{ $utilizationRate >= 70 ? 'success' : ($utilizationRate >= 30 ? 'warning' : 'secondary') }}"
                subtitle="Usage efficiency"
            />
        </div>

        <div class="col-xl-2 col-md-4 mb-3">
            <x-warehouse.stats-card
                title="Total Value"
                :value="number_format($totalValue, 2)"
                icon="attach_money"
                color="info"
                subtitle="Total delivery value"
                :currency="true"
            />
        </div>
    </div>

    <!-- Division Summary Table -->
    @if($divisionSummary->count() > 0)
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="material-icons align-middle mr-2">analytics</i>
                Division-wise Summary
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="thead-light">
                        <tr>
                            <th style="min-width: 180px;">Division</th>
                            <th class="text-center" style="min-width: 70px;">Items</th>
                            <th class="text-right" style="min-width: 110px;">Total Qty</th>
                            <th class="text-right" style="min-width: 110px;">Warehouse</th>
                            <th class="text-right" style="min-width: 90px;">On Project</th>
                            <th class="text-right" style="min-width: 90px;">Returned</th>
                            <th class="text-right" style="min-width: 120px;">Balance to Return</th>
                            <th class="text-right" style="min-width: 120px;">Total Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($divisionSummary as $summary)
                        <tr>
                            <td>
                                <span class="badge warehouse-badge warehouse-status-info">
                                    {{ $summary->division->division_name ?? 'Unknown' }}
                                </span>
                            </td>
                            <td class="text-center">
                                <span class="badge badge-secondary">{{ $summary->item_count }}</span>
                            </td>
                            <td class="text-right">
                                <strong class="text-primary">{{ number_format($summary->grand_total, 2) }}</strong>
                            </td>
                            <td class="text-right">
                                <strong class="text-success">{{ number_format($summary->available_stock, 2) }}</strong>
                            </td>
                            <td class="text-right">
                                <span class="text-info">{{ number_format($summary->total_issued, 2) }}</span>
                            </td>
                            <td class="text-right">
                                <span class="text-success">{{ number_format($summary->total_returned, 2) }}</span>
                            </td>
                            <td class="text-right">
                                @php
                                    $balanceToReturn = $summary->balance_to_return;
                                    $balanceClass = $balanceToReturn > 0 ? 'text-warning' : ($balanceToReturn < 0 ? 'text-danger' : 'text-muted');
                                @endphp
                                <strong class="{{ $balanceClass }}">{{ number_format($balanceToReturn, 2) }}</strong>
                            </td>
                            <td class="text-right">
                                <strong class="text-info">AED {{ number_format($summary->total_value, 2) }}</strong>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="bg-light">
                        <tr>
                            <th>Total</th>
                            <th class="text-center">
                                <span class="badge badge-primary">{{ $divisionSummary->sum('item_count') }}</span>
                            </th>
                            <th class="text-right">
                                <strong class="text-primary">{{ number_format($divisionSummary->sum('grand_total'), 2) }}</strong>
                            </th>
                            <th class="text-right">
                                <strong class="text-success">{{ number_format($divisionSummary->sum('available_stock'), 2) }}</strong>
                            </th>
                            <th class="text-right">
                                <strong class="text-info">{{ number_format($divisionSummary->sum('total_issued'), 2) }}</strong>
                            </th>
                            <th class="text-right">
                                <strong class="text-success">{{ number_format($divisionSummary->sum('total_returned'), 2) }}</strong>
                            </th>
                            <th class="text-right">
                                @php
                                    $totalBalanceToReturn = $divisionSummary->sum('balance_to_return');
                                    $totalBalanceClass = $totalBalanceToReturn > 0 ? 'text-warning' : ($totalBalanceToReturn < 0 ? 'text-danger' : 'text-muted');
                                @endphp
                                <strong class="{{ $totalBalanceClass }}">{{ number_format($totalBalanceToReturn, 2) }}</strong>
                            </th>
                            <th class="text-right">
                                <strong class="text-info">AED {{ number_format($divisionSummary->sum('total_value'), 2) }}</strong>
                            </th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    @endif

    <!-- 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 method="GET" action="{{ route('warehouse.reports.division-deliveries') }}" id="filtersForm" class="warehouse-filter-form">
                <div class="row">
                    <div class="col-md-2 mb-3">
                        <label class="form-label">Search</label>
                        <input type="text" name="search" id="search" class="form-control"
                               placeholder="Item code, description..."
                               value="{{ request('search') }}">
                    </div>

                    <div class="col-md-2 mb-3">
                        <label class="form-label">Division</label>
                        <select name="division_id" id="division_id" class="form-control" 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">Category</label>
                        <select name="category_id" id="category_id" class="form-control" data-placeholder="All Categories">
                            <option value="">All Categories</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->category_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 warehouse-datepicker">
                    </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 warehouse-datepicker">
                    </div>

                    <div class="col-md-2 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>
                            Apply
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Export Buttons -->
    <div class="row warehouse-export-buttons">
        <div class="col-12 text-right">
            <button class="btn btn-success warehouse-export-btn" data-export="excel">
                <i class="material-icons" style="font-size: 18px; vertical-align: middle;">download</i>
                Export Excel
            </button>
            <button class="btn btn-info warehouse-export-btn" data-export="pdf">
                <i class="material-icons" style="font-size: 18px; vertical-align: middle;">picture_as_pdf</i>
                Export PDF
            </button>
            <button class="btn btn-secondary warehouse-export-btn" data-action="print">
                <i class="material-icons" style="font-size: 18px; vertical-align: middle;">print</i>
                Print
            </button>
        </div>
    </div>

    <!-- Division Deliveries Report 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">local_shipping</i>
                Division Deliveries Report ({{ $deliveries->total() }} total records)
            </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 delivery data...</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: 100px;">Item Code</th>
                                <th style="min-width: 180px;">Description</th>
                                <th style="min-width: 100px;">Division</th>
                                <th style="min-width: 90px;" class="text-right">Total Qty</th>
                                <th style="min-width: 90px;" class="text-right">Warehouse</th>
                                <th style="min-width: 80px;" class="text-right">On Project</th>
                                <th style="min-width: 80px;" class="text-right">Returned</th>
                                <!-- <th style="min-width: 100px;" class="text-right">Balance to Return</th> -->
                                <th style="min-width: 70px;" class="text-right">FOC Qty</th>
                                <th style="min-width: 80px;" class="text-right">Damaged Qty</th>
                                <th style="min-width: 100px;" class="text-right">Total Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($deliveries as $delivery)
                                <tr>
                                    <td class="warehouse-cell-nowrap">
                                        {{ $delivery->item->item_code ?? '-' }}
                                    </td>
                                    <td>{{ Str::limit($delivery->item->item_description ?? '-', 30) }}</td>
                                    <td>
                                        @if($delivery->division)
                                            <span class="badge warehouse-badge warehouse-status-info">
                                                {{ Str::limit($delivery->division->division_name, 12) }}
                                            </span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="text-right warehouse-cell-number">
                                        <strong class="text-primary">{{ number_format($delivery->calculated_total_qty ?? 0, 2) }}</strong>
                                    </td>
                                    <td class="text-right warehouse-cell-number">
                                        <strong class="text-success">{{ number_format($delivery->calculated_available_stock ?? 0, 2) }}</strong>
                                    </td>
                                    <td class="text-right warehouse-cell-number">
                                        <span class="text-info">{{ number_format($delivery->calculated_balance_to_return ?? 0, 2) }}</span>
                                    </td>
                                    <td class="text-right warehouse-cell-number">
                                        @php
                                            // Total returned = good items returned + damaged items returned
                                            $totalReturned = ($delivery->calculated_total_returned ?? 0) + ($delivery->damaged_quantity ?? 0);
                                        @endphp
                                        <span class="text-success">{{ number_format($totalReturned, 2) }}</span>
                                    </td>
                                    <!-- <td class="text-right warehouse-cell-number">
                                        @php
                                            $balanceToReturn = $delivery->calculated_balance_to_return ?? ($delivery->total_quantity_issued - ($delivery->calculated_total_returned ?? 0));
                                            $colorClass = $balanceToReturn > 0 ? 'text-warning' : ($balanceToReturn < 0 ? 'text-danger' : 'text-muted');
                                        @endphp
                                        <strong class="{{ $colorClass }}">{{ number_format($balanceToReturn, 2) }}</strong>
                                    </td> -->
                                    <td class="text-right warehouse-cell-number">
                                        @if(($delivery->foc_quantity ?? 0) > 0)
                                            <span class="badge badge-warning">{{ number_format($delivery->foc_quantity, 2) }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="text-right warehouse-cell-number">
                                        @if(($delivery->damaged_quantity ?? 0) > 0)
                                            <span class="badge badge-danger">{{ number_format($delivery->damaged_quantity, 2) }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="text-right warehouse-cell-currency">
                                        <strong class="text-info">AED {{ number_format($delivery->total_value ?? 0, 2) }}</strong>
                                    </td>
                                    <!-- <td class="text-center">
                                        <button type="button"
                                                class="btn btn-sm btn-outline-primary warehouse-action-btn view-details-btn"
                                                data-division-id="{{ $delivery->division_id }}"
                                                data-item-id="{{ $delivery->item_id }}"
                                                data-item-code="{{ $delivery->item->item_code ?? '' }}"
                                                data-item-description="{{ $delivery->item->item_description ?? '' }}"
                                                data-division-name="{{ $delivery->division->division_name ?? '' }}"
                                                title="View Details">
                                            <i class="material-icons">visibility</i>
                                        </button>
                                    </td> -->
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="10" class="warehouse-empty-state">
                                        <i class="material-icons">local_shipping</i>
                                        <h5>No Division Delivery Records Found</h5>
                                        <p class="text-muted">No deliveries match your current filters.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

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

@section('modals')
    <!-- Project Details Modal -->
    <div class="modal fade" id="projectDetailsModal" tabindex="-1" role="dialog" aria-labelledby="projectDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="projectDetailsModalLabel">
                        <i class="material-icons mr-2">assessment</i>
                        Project-wise Item Details
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Item Information</label>
                            <div class="form-control-plaintext border rounded p-2 bg-light">
                                <strong id="modal-item-code" class="text-primary"></strong> - <span id="modal-item-description"></span>
                                <br><small class="text-muted">Unit: <span id="modal-item-unit"></span></small>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Division</label>
                            <div class="form-control-plaintext border rounded p-2 bg-light">
                                <span class="badge badge-primary" id="modal-division-name"></span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <label class="form-label">Project-wise Breakdown</label>
                            <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                                <table class="table table-sm table-hover">
                                    <thead class="thead-light">
                                        <tr>
                                            <th style="min-width: 150px;">
                                                <i class="material-icons mr-1" style="font-size: 16px;">folder</i>
                                                Project
                                            </th>
                                            <th style="min-width: 80px;">
                                                <i class="material-icons mr-1" style="font-size: 16px;">publish</i>
                                                Issued
                                            </th>
                                            <th style="min-width: 80px;">
                                                <i class="material-icons mr-1" style="font-size: 16px;">undo</i>
                                                Returned
                                            </th>
                                            <th style="min-width: 80px;">
                                                <i class="material-icons mr-1" style="font-size: 16px;">account_balance</i>
                                                Balance
                                            </th>
                                            <th style="min-width: 200px;">
                                                <i class="material-icons mr-1" style="font-size: 16px;">history</i>
                                                Issue History
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="modal-projects-tbody">
                                        <!-- Will be populated by JavaScript -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="material-icons mr-1" style="font-size: 16px;">cancel</i>
                        Close
                    </button>
                </div>
            </div>
        </div>
    </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;
        }
        .badge-outline-primary {
            color: #007bff;
            background-color: transparent;
            border: 1px solid #007bff;
        }
        .badge-outline-success {
            color: #28a745;
            background-color: transparent;
            border: 1px solid #28a745;
        }
    </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
            $('#division_id, #category_id').select2({
                theme: 'bootstrap-5',
                allowClear: true,
                placeholder: function() {
                    return $(this).data('placeholder') || 'Select...';
                }
            });

            // Handle view details button click
            $(document).on('click', '.view-details-btn', function() {
                const divisionId = $(this).data('division-id');
                const itemId = $(this).data('item-id');
                const itemCode = $(this).data('item-code');
                const itemDescription = $(this).data('item-description');
                const divisionName = $(this).data('division-name');

                // Update modal header info
                $('#modal-item-code').text(itemCode);
                $('#modal-item-description').text(itemDescription);
                $('#modal-division-name').text(divisionName);

                // Show loading state
                $('#modal-projects-tbody').html('<tr><td colspan="5" class="text-center py-4"><div class="spinner-border spinner-border-sm text-primary mr-2" role="status"></div> Loading project details...</td></tr>');

                // Show modal
                $('#projectDetailsModal').modal('show');

                // Fetch project details
                $.get('{{ route("warehouse.reports.division-item-details") }}', {
                    division_id: divisionId,
                    item_id: itemId
                })
                .done(function(response) {
                    if (response.success && response.data) {
                        // Update item unit information
                        if (response.data.item && response.data.item.unit) {
                            $('#modal-item-unit').text(response.data.item.unit);
                        }

                        let tbody = '';

                        if (!response.data.projects || response.data.projects.length === 0) {
                            tbody = `<tr>
                                <td colspan="5" class="text-center py-4">
                                    <i class="material-icons text-muted mb-2" style="font-size: 48px;">folder_open</i>
                                    <p class="text-muted mb-0">No project issues found for this item in this division.</p>
                                </td>
                            </tr>`;
                        } else {
                            response.data.projects.forEach(function(project) {
                                const balanceClass = project.current_balance > 0 ? 'text-success' :
                                                   project.current_balance < 0 ? 'text-danger' : 'text-muted';

                                const balanceIcon = project.current_balance > 0 ? 'trending_up' :
                                                  project.current_balance < 0 ? 'trending_down' : 'trending_flat';

                                // Build issue history with better styling
                                let issueHistory = '';
                                project.issues.forEach(function(issue) {
                                    const typeIcon = issue.type === 'Material Request' ? 'assignment' : 'local_shipping';
                                    const typeClass = issue.type === 'Material Request' ? 'badge-primary' : 'badge-success';

                                    issueHistory += `<div class="mb-1">
                                        <span class="badge ${typeClass} mr-1">
                                            <i class="material-icons" style="font-size: 12px;">${typeIcon}</i>
                                            ${issue.type}
                                        </span>
                                        <strong class="text-info">${issue.quantity}</strong>
                                        <small class="text-muted d-block">${issue.reference} - ${issue.date}</small>
                                    </div>`;
                                });

                                tbody += `<tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="material-icons text-primary mr-2">folder</i>
                                            <div>
                                                <strong class="text-dark">${project.project_name}</strong>
                                                <br><small class="text-muted">${project.project_number}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge badge-outline-primary px-2 py-1">
                                            ${parseFloat(project.total_issued).toFixed(2)}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge badge-outline-success px-2 py-1">
                                            ${parseFloat(project.total_returned).toFixed(2)}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center ${balanceClass}">
                                            <i class="material-icons mr-1" style="font-size: 16px;">${balanceIcon}</i>
                                            <strong>${parseFloat(project.current_balance).toFixed(2)}</strong>
                                        </div>
                                    </td>
                                    <td style="max-width: 300px;">
                                        <div style="max-height: 150px; overflow-y: auto;">
                                            ${issueHistory || '<span class="text-muted">No issue history</span>'}
                                        </div>
                                    </td>
                                </tr>`;
                            });
                        }

                        $('#modal-projects-tbody').html(tbody);
                    } else {
                        $('#modal-projects-tbody').html(`<tr>
                            <td colspan="5" class="text-center py-4">
                                <i class="material-icons text-danger mb-2" style="font-size: 48px;">error</i>
                                <p class="text-danger mb-0">Error loading project details.</p>
                            </td>
                        </tr>`);
                    }
                })
                .fail(function() {
                    $('#modal-projects-tbody').html(`<tr>
                        <td colspan="5" class="text-center py-4">
                            <i class="material-icons text-danger mb-2" style="font-size: 48px;">wifi_off</i>
                            <p class="text-danger mb-0">Failed to load project details. Please try again.</p>
                        </td>
                    </tr>`);
                });
            });
        });
    </script>
@endpush