@extends('layout.app')

@section('title', 'My Storage & Plan Usage')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css') }}">
    <style>
        .usage-kpi-card {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #ffffff;
            transition: all 0.25s ease;
        }
        .usage-kpi-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }
        .usage-icon-box {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        .cat-card {
            border: 1px solid #edf2f7;
            border-radius: 10px;
            padding: 12px 16px;
            background: #f8fafc;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .cat-card:hover, .cat-card.active {
            border-color: #0d6efd;
            background: #eff6ff;
        }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('client.dashboard') }}">Dashboard</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            My Storage & Plan Usage
        </li>
    </ol>
    <div class="ms-auto d-flex align-items-center gap-2">
        <span class="badge bg-light text-dark border px-3 py-2">
            <i class="ri-building-line text-primary me-1"></i> {{ $tenant->company_name }} ({{ $tenant->company_code }})
        </span>
    </div>
</div>

<div class="app-body">
    <!-- Top KPI Usage Overview -->
    <div class="row g-3 mb-4">
        <!-- Current Subscription Plan -->
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card usage-kpi-card h-100">
                <div class="card-body d-flex align-items-center">
                    <div class="usage-icon-box bg-primary-subtle text-primary me-3">
                        <i class="ri-vip-crown-line"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-medium">Active Subscription</div>
                        <h4 class="mb-0 fw-bold">{{ $plan ? $plan->name : ($tenant->subscription_plan ?: 'Custom Plan') }}</h4>
                        <div class="small text-muted mt-1">
                            ₹{{ $plan ? number_format($plan->price, 2) : '0.00' }} / {{ $plan ? $plan->billing_cycle : 'Monthly' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Plan Expiry -->
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card usage-kpi-card h-100">
                <div class="card-body d-flex align-items-center">
                    <div class="usage-icon-box {{ $expiryStatus === 'expired' ? 'bg-danger-subtle text-danger' : ($expiryStatus === 'expiring_soon' ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success') }} me-3">
                        <i class="ri-calendar-check-line"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-medium">Plan Validity</div>
                        <h5 class="mb-1 fw-bold">{{ $formattedExpiry }}</h5>
                        <span class="badge {{ $expiryBadgeClass }} fs-7">
                            <i class="ri-time-line me-1"></i>{{ $expiryBadgeText }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cloud Storage Usage -->
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card usage-kpi-card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <div class="text-muted small fw-medium">Storage Consumed</div>
                        <span class="badge bg-primary-subtle text-primary">{{ $totalFiles }} Files</span>
                    </div>
                    <div class="d-flex align-items-baseline gap-2 mb-2">
                        <h4 class="mb-0 fw-bold text-dark">{{ $formattedUsed }}</h4>
                        <span class="text-muted small">/ {{ $formattedLimit }}</span>
                    </div>
                    <div class="progress" style="height: 6px;">
                        <div class="progress-bar {{ $percentage > 90 ? 'bg-danger' : ($percentage > 70 ? 'bg-warning' : 'bg-success') }}" 
                             role="progressbar" 
                             style="width: {{ max(2, $percentage) }}%;" 
                             aria-valuenow="{{ $percentage }}" 
                             aria-valuemin="0" 
                             aria-valuemax="100"></div>
                    </div>
                    <div class="d-flex justify-content-between small text-muted mt-1">
                        <span>{{ $percentage }}% used</span>
                        <span>{{ $formattedFree }} free</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Vehicle Fleet Quota -->
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card usage-kpi-card h-100">
                <div class="card-body d-flex align-items-center">
                    <div class="usage-icon-box bg-info-subtle text-info me-3">
                        <i class="ri-truck-line"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-medium">Vehicle Quota</div>
                        <h4 class="mb-0 fw-bold">{{ $vehicleCount }} / {{ $vehicleLimit > 0 ? $vehicleLimit : '∞' }}</h4>
                        <div class="small text-muted mt-1">
                            @if($vehicleLimit > 0)
                                <span class="text-success fw-medium">{{ $vehicleRemaining }}</span> vehicle slots available
                            @else
                                Unlimited vehicle capacity
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Category Storage Breakdown -->
    @if(count($categoryBreakdown) > 0)
    <div class="card mb-4">
        <div class="card-header bg-white border-bottom py-3">
            <h6 class="card-title mb-0 fw-bold">
                <i class="ri-folders-line text-primary me-2"></i> Document Storage by Module
            </h6>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-6 col-md-3 col-lg-2">
                    <div class="cat-card active" data-category="all" onclick="filterCategory('all', this)">
                        <div class="small text-muted">All Categories</div>
                        <div class="fw-bold fs-6 text-dark mt-1">{{ $totalFiles }} Files</div>
                        <div class="small text-primary mt-1">{{ $formattedUsed }}</div>
                    </div>
                </div>
                @foreach($categoryBreakdown as $cat)
                <div class="col-6 col-md-3 col-lg-2">
                    <div class="cat-card" data-category="{{ $cat['slug'] }}" onclick="filterCategory('{{ $cat['slug'] }}', this)">
                        <div class="small text-muted text-truncate" title="{{ $cat['name'] }}">{{ $cat['name'] }}</div>
                        <div class="fw-bold fs-6 text-dark mt-1">{{ $cat['count'] }} Files</div>
                        <div class="small text-secondary mt-1">{{ $cat['formatted_size'] }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <!-- Uploaded Documents File Explorer Table -->
    <div class="card">
        <div class="card-header bg-white border-bottom py-3 d-flex align-items-center justify-content-between">
            <div>
                <h5 class="card-title mb-0 fw-bold">
                    <i class="ri-file-cloud-line text-primary me-2"></i> My Uploaded Documents
                </h5>
                <span class="text-muted small">Secure, private document archive stored in Cloudflare R2</span>
            </div>
            <button type="button" class="btn btn-sm btn-outline-primary" onclick="reloadFilesTable();">
                <i class="ri-refresh-line me-1"></i> Refresh
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table m-0 align-middle table-hover" id="clientFilesTable">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 50px;">#</th>
                            <th>Document Name & Path</th>
                            <th>Category</th>
                            <th>File Size</th>
                            <th>Uploaded On</th>
                            <th style="width: 140px;" class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script>
        let clientTable;
        let selectedCategory = 'all';

        $(document).ready(function() {
            clientTable = $('#clientFilesTable').DataTable({
                processing: true,
                serverSide: true,
                stateSave: false,
                responsive: true,
                ajax: {
                    url: '{{ route("client.document-manager.getData") }}',
                    data: function(d) {
                        d.category = selectedCategory;
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false, orderable: false },
                    { data: 'file_info', name: 'name' },
                    { data: 'category_badge', name: 'category', orderable: false },
                    { data: 'formatted_size', name: 'size_bytes' },
                    { data: 'uploaded_at', name: 'uploaded_at' },
                    { data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center' },
                ],
                order: [[4, 'desc']]
            });
        });

        function filterCategory(category, el) {
            selectedCategory = category;
            $('.cat-card').removeClass('active');
            $(el).addClass('active');
            clientTable.ajax.reload();
        }

        function reloadFilesTable() {
            clientTable.ajax.reload(null, false);
        }
    </script>
@endpush