@extends('admin.layouts.base')

@section('title', 'Warehouse Bookings Dashboard')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-8">
            <h3><i class="fas fa-warehouse me-2"></i> Warehouse Bookings Dashboard</h3>
            <p class="text-muted">Manage warehouse bookings and space utilization</p>
        </div>
        <div class="col-md-4 text-end">
            <a href="{{ route('admin.warehouses.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-cog me-2"></i> Manage Warehouses
            </a>
        </div>
    </div>

    {{-- Summary Cards --}}
    @if(count($warehouseStats) > 0)
        <div class="row my-5">
            @php
                $totalBookings = collect($warehouseStats)->sum('total_bookings');
                $totalPending = collect($warehouseStats)->sum('pending');
                $totalConfirmed = collect($warehouseStats)->sum('confirmed');
                $totalActive = collect($warehouseStats)->sum('active');
            @endphp
            <div class="col-md-3">
                <div class="card bg-primary bg-opacity-10 border-0">
                    <div class="card-body">
                        <h6 class="text-muted mb-2">Total Bookings</h6>
                        <h3 class="mb-0">{{ $totalBookings }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning bg-opacity-10 border-0">
                    <div class="card-body">
                        <h6 class="text-muted mb-2">Pending Approval</h6>
                        <h3 class="mb-0 text-warning">{{ $totalPending }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-info bg-opacity-10 border-0">
                    <div class="card-body">
                        <h6 class="text-muted mb-2">Confirmed</h6>
                        <h3 class="mb-0 text-info">{{ $totalConfirmed }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success bg-opacity-10 border-0">
                    <div class="card-body">
                        <h6 class="text-muted mb-2">Active Now</h6>
                        <h3 class="mb-0 text-success">{{ $totalActive }}</h3>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Warehouses Table --}}
    <div class="card shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Warehouse</th>
                            <th class="text-center">Bookings</th>
                            <th class="text-center">Pending</th>
                            <th class="text-center">Confirmed</th>
                            <th class="text-center">Active</th>
                            <th>Space Utilization</th>
                            <th>Available Space</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($warehouseStats as $stats)
                            @php
                                $utilization = $stats['space']['utilization'];
                                $badgeColor = $utilization > 90 ? 'danger' : ($utilization > 70 ? 'warning' : 'success');
                                $progressColor = $utilization > 90 ? 'danger' : ($utilization > 70 ? 'warning' : 'success');
                            @endphp
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-sm bg-primary bg-opacity-10 text-primary rounded me-3 d-flex align-items-center justify-content-center">
                                            <i class="fas fa-warehouse fa-lg"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-0">{{ $stats['warehouse']->name }}</h6>
                                            <small class="text-muted">{{ $stats['warehouse']->city }}, {{ $stats['warehouse']->state }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-secondary fs-6">{{ $stats['total_bookings'] }}</span>
                                </td>
                                <td class="text-center">
                                    @if($stats['pending'] > 0)
                                        <span class="badge bg-warning">{{ $stats['pending'] }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($stats['confirmed'] > 0)
                                        <span class="badge bg-info">{{ $stats['confirmed'] }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($stats['active'] > 0)
                                        <span class="badge bg-success">{{ $stats['active'] }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td style="min-width: 200px;">
                                    <div class="d-flex align-items-center">
                                        <div class="progress flex-grow-1 me-2" style="height: 10px;">
                                            <div class="progress-bar bg-{{ $progressColor }}" 
                                                 style="width: {{ $utilization }}%"
                                                 title="{{ number_format($utilization, 1) }}% utilized">
                                            </div>
                                        </div>
                                        <span class="badge bg-{{ $badgeColor }} text-nowrap">{{ number_format($utilization, 0) }}%</span>
                                    </div>
                                    <small class="text-muted">
                                        {{ number_format($stats['space']['used']) }} / {{ number_format($stats['space']['total']) }} sqft
                                    </small>
                                </td>
                                <td>
                                    <strong class="text-{{ $stats['space']['available'] < 100 ? 'danger' : 'success' }}">
                                        {{ number_format($stats['space']['available']) }} sqft
                                    </strong>
                                </td>
                                <td class="text-center">
                                    <a href="{{ route('admin.warehouse-bookings.by-warehouse', $stats['warehouse']->id) }}" 
                                       class="btn btn-sm btn-primary">
                                        <i class="fas fa-eye me-1"></i> View Bookings
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-5">
                                    <i class="fas fa-warehouse fa-3x text-muted mb-3 d-block"></i>
                                    <p class="text-muted mb-2">No active warehouses found</p>
                                    <a href="{{ route('admin.warehouses.create') }}" class="btn btn-primary">
                                        <i class="fas fa-plus me-2"></i> Create Warehouse
                                    </a>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

@push('styles')
<style>
.avatar-sm {
    width: 48px;
    height: 48px;
}
.table> :not(caption)>*>* {
    padding: 1rem 0.75rem;
}
</style>
@endpush
@endsection