@extends('admin.layouts.base')
@section('title', 'Warehouse Bookings Dashboard')

@section('content')
<div id="kt_app_content_container" class="app-container">
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h3 class="fw-bold">Warehouse Bookings Dashboard</h3>
            </div>
            <div class="card-toolbar">
                <a href="{{ route('admin.warehouses.index') }}" class="btn btn-light">
                    Manage Warehouses
                </a>
            </div>
        </div>

        <div class="card-body py-6">
            <!-- Summary Cards (you can keep static or make dynamic if needed) -->
            <div id="summary-cards" class="row g-6 mb-8">
                <!-- Will be updated via JS if desired -->
            </div>

            <!-- Warehouses Table -->
            <table class="table align-middle table-row-dashed fs-6 gy-5" id="warehouses_dashboard_table">
                <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase">
                        <th>Warehouse</th>
                        <th class="text-center">Total 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 class="text-center">Available Space</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let dashboardTable;

$(document).ready(function () {
    dashboardTable = $('#warehouses_dashboard_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("admin.warehouse-bookings.dashboard-data") }}',
        columns: [
            { 
                data: 'name',
                render: function(data, type, row) {
                    return `
                        <div class="d-flex align-items-center">
                            <div class="symbol symbol-50px me-5">
                                <div class="symbol-label bg-primary bg-opacity-10 text-primary fs-2x">
                                    <i class="fas fa-warehouse"></i>
                                </div>
                            </div>
                            <div>
                                <div class="fw-bold fs-6">${data}</div>
                                <span class="text-muted fs-7">${row.location}</span>
                            </div>
                        </div>`;
                }
            },
            { data: 'total_bookings', className: 'text-center' },
            { 
                data: 'pending', 
                className: 'text-center',
                render: data => data > 0 ? `<span class="badge badge-light-warning">${data}</span>` : '-'
            },
            { 
                data: 'confirmed', 
                className: 'text-center',
                render: data => data > 0 ? `<span class="badge badge-light-info">${data}</span>` : '-'
            },
            { 
                data: 'active', 
                className: 'text-center',
                render: data => data > 0 ? `<span class="badge badge-light-success">${data}</span>` : '-'
            },
            {
                data: 'utilization',
                render: function(data, type, row) {
                    return `
                        <div class="d-flex align-items-center">
                            <div class="progress h-8px w-100 me-4">
                                <div class="progress-bar bg-${row.progress_color}" style="width: ${data}%"></div>
                            </div>
                            <span class="badge badge-light-${row.badge_color}">${Math.round(data)}%</span>
                        </div>
                        <small class="text-muted">${row.used_space} / ${row.total_space} sqft</small>`;
                }
            },
            { 
                data: 'available_space',
                className: 'text-center',
                render: data => `<strong class="${parseInt(data.replace(/,/g,'')) < 100 ? 'text-danger' : 'text-success'}">${data} sqft</strong>`
            },
            {
                data: 'view_url',
                className: 'text-center',
                orderable: false,
                render: url => `<a href="${url}" class="btn btn-sm btn-primary">View Bookings</a>`
            }
        ],
        language: {
            processing: '<div class="spinner-border text-primary"></div>',
            emptyTable: 'No active warehouses'
        }
    });
});
</script>
@endpush