@extends('layouts.admin')

@section('content')

@php
    // cek apakah sedang mode PDF
    $isPdf = $isPdf ?? false;
    $reportType = $reportType ?? 'loan_requests';
@endphp

@if(!$isPdf)
<div class="container-fluid">
    {{-- HEADER --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-gradient-primary shadow-lg border-0 rounded-3">
                <div class="card-body p-4">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h2 class="fw-bold text-white mb-2">
                                @if($reportType === 'loan_requests')
                                    🚗 Laporan Peminjaman Kendaraan
                                @elseif($reportType === 'vehicles')
                                    🚙 Laporan Data Kendaraan
                                @elseif($reportType === 'users')
                                    👥 Laporan Data Users
                                @endif
                            </h2>
                            <p class="text-white-50 mb-0">
                                @if($reportType === 'loan_requests')
                                    Rekap lengkap peminjaman kendaraan untuk analisis dan arsip perusahaan
                                @elseif($reportType === 'vehicles')
                                    Data lengkap kendaraan perusahaan untuk manajemen inventaris
                                @elseif($reportType === 'users')
                                    Data pengguna sistem peminjaman kendaraan
                                @endif
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            @php
                                $pdfUrl = route('admin.reports.export.pdf', [
                                    'report_type' => $reportType,
                                    'start_date' => request('start_date'),
                                    'end_date' => request('end_date'),
                                    'search' => request('search'),
                                    'entries' => request('entries')
                                ]);
                            @endphp
                            <button class="btn btn-light btn-lg shadow-sm fw-semibold d-inline-flex align-items-center" 
                                    onclick="window.location.href = '{{ $pdfUrl }}'">
                                <i class="fas fa-file-pdf me-2 text-danger"></i>Export PDF
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

   {{-- FILTER CARD --}}
<div class="card mb-4 shadow-lg border-0 rounded-3">
    <div class="card-header bg-white py-3 border-bottom">
        <h5 class="mb-0 text-dark fw-bold">
            <i class="fas fa-sliders-h me-2 text-primary"></i>Filter & Pencarian
        </h5>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('admin.reports') }}" class="row g-4 align-items-end">
            {{-- Pilih Jenis Laporan --}}
            <div class="col-xl-2 col-lg-4 col-md-6">
                <label class="form-label fw-semibold text-dark mb-2">Jenis Laporan</label>
                <select name="report_type" class="form-select shadow-none border-2" onchange="this.form.submit()">
                    <option value="loan_requests" {{ $reportType == 'loan_requests' ? 'selected' : '' }}>📊 Peminjaman</option>
                    <option value="vehicles" {{ $reportType == 'vehicles' ? 'selected' : '' }}>🚗 Kendaraan</option>
                    <option value="users" {{ $reportType == 'users' ? 'selected' : '' }}>👥 Users</option>
                </select>
            </div>

            {{-- Filter Tanggal (hanya untuk laporan peminjaman) --}}
            @if($reportType === 'loan_requests')
            <div class="col-xl-2 col-lg-4 col-md-6">
                <label class="form-label fw-semibold text-dark mb-2">Tanggal Mulai</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-muted">
                        <i class="fas fa-calendar-alt"></i>
                    </span>
                    <input type="date" name="start_date" class="form-control border-start-0 shadow-none border-2" value="{{ $startDate }}">
                </div>
            </div>

            <div class="col-xl-2 col-lg-4 col-md-6">
                <label class="form-label fw-semibold text-dark mb-2">Tanggal Selesai</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-muted">
                        <i class="fas fa-calendar-check"></i>
                    </span>
                    <input type="date" name="end_date" class="form-control border-start-0 shadow-none border-2" value="{{ $endDate }}">
                </div>
            </div>
            @else
            {{-- Hidden fields untuk mempertahankan nilai tanggal --}}
            <input type="hidden" name="start_date" value="{{ $startDate }}">
            <input type="hidden" name="end_date" value="{{ $endDate }}">
            @endif

            {{-- Pencarian --}}
            <div class="col-xl-3 col-lg-6 col-md-6">
                <label class="form-label fw-semibold text-dark mb-2">Cari Data</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-muted">
                        <i class="fas fa-search"></i>
                    </span>
                    <input type="text" name="search" class="form-control border-start-0 shadow-none border-2" 
                        placeholder="@if($reportType === 'loan_requests')Cari nama, kendaraan, atau supir...
                                 @elseif($reportType === 'vehicles')Cari jenis, plat, atau warna...
                                 @elseif($reportType === 'users')Cari nama, email, atau role...@endif" 
                        value="{{ $search }}">
                </div>
            </div>

            {{-- Tampilkan Data --}}
            <div class="col-xl-1 col-lg-3 col-md-4">
                <label class="form-label fw-semibold text-dark mb-2">Tampilkan</label>
                <select name="entries" class="form-select shadow-none border-2">
                    <option value="5" {{ $entries==5?'selected':'' }}>5 Data</option>
                    <option value="10" {{ $entries==10?'selected' : '' }}>10 Data</option>
                    <option value="25" {{ $entries==25?'selected' : '' }}>25 Data</option>
                    <option value="50" {{ $entries==50?'selected' : '' }}>50 Data</option>
                </select>
            </div>

            {{-- Tombol Aksi --}}
            <div class="col-xl-2 col-lg-6 col-md-8">
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary fw-semibold py-2">
                        <i class="fas fa-filter me-2"></i>Terapkan Filter
                    </button>
                    <a href="{{ route('admin.reports') }}" class="btn btn-outline-secondary btn-sm py-2">
                        <i class="fas fa-redo me-1"></i>Reset Filter
                    </a>
                </div>
            </div>
        </form>

        {{-- Info Filter Aktif --}}
        @if($startDate || $endDate || $search)
        <div class="row mt-3">
            <div class="col-12">
                <div class="alert alert-info alert-dismissible fade show py-2 mb-0" role="alert">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-info-circle me-2"></i>
                        <small class="flex-grow-1">
                            <strong>Filter Aktif:</strong>
                            @if($startDate && $endDate)
                                Periode {{ \Carbon\Carbon::parse($startDate)->format('d M Y') }} - {{ \Carbon\Carbon::parse($endDate)->format('d M Y') }}
                            @endif
                            @if($search)
                                {{ ($startDate && $endDate) ? ' | ' : '' }}
                                Pencarian: "{{ $search }}"
                            @endif
                        </small>
                        <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endif

{{-- ============================ --}}
{{--          TABLES              --}}
{{-- ============================ --}}

{{-- TABEL LAPORAN PEMINJAMAN --}}
@if($reportType === 'loan_requests')
<div class="{{ !$isPdf ? 'card shadow-lg border-0 rounded-3' : '' }}">
    @if(!$isPdf)
    <div class="card-header bg-white py-3 border-bottom rounded-top">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold text-dark">
                <i class="fas fa-list-alt me-2 text-primary"></i>Data Peminjaman
            </h5>
            <span class="badge bg-primary fs-6">
                <i class="fas fa-database me-1"></i>{{ $loanRequests->total() }} Data
            </span>
        </div>
    </div>
    @endif

    <div class="table-responsive">
        <table class="table table-hover table-bordered align-middle mb-0 {{ !$isPdf ? 'table-striped' : '' }}">
            <thead class="bg-gradient-dark text-white">
                <tr>
                    <th class="py-3 text-center fw-semibold" style="width: 60px;">No</th>
                    <th class="py-3 fw-semibold text-center">Peminjam</th>
                    <th class="py-3 fw-semibold text-center">Kendaraan</th>
                    <th class="py-3 fw-semibold text-center">Supir</th>
                    <th class="py-3 fw-semibold text-center">Tanggal Pinjam</th>
                    <th class="py-3 fw-semibold text-center">Tanggal Kembali</th>
                    <th class="py-3 fw-semibold text-center">Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($loanRequests as $item)
                <tr class="transition-all">
                    <td class="text-center fw-bold text-primary">{{ $loop->iteration }}</td>
                    
                    {{-- COLUMN: PEMINJAM --}}
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar-sm bg-light-primary rounded-circle d-flex align-items-center justify-content-center me-3">
                                <i class="fas fa-user text-primary"></i>
                            </div>
                            <div>
                                <span class="fw-semibold text-dark d-block">{{ $item->user->name ?? '-' }}</span>
                                <div class="text-muted small"></div>
                                <i class="fas fa-envelope me-1"></i>{{ $item->user->email ?? '-' }}
                            </div>
                        </div>
                    </td>
                    
                    {{-- COLUMN: KENDARAAN --}}
                    <td>
                        @if($item->vehicle)
                        <div class="d-flex align-items-start">
                            <div class="vehicle-icon bg-light-info rounded-circle d-flex align-items-center justify-content-center me-3">
                                <i class="fas fa-car text-info fs-6"></i>
                            </div>
                            <div class="flex-grow-1">
                                <div class="fw-semibold text-dark mb-1">{{ $item->vehicle->jenis ?? '-' }}</div>
                                <div class="text-muted small">
                                    <i class="fas fa-id-card me-1"></i>{{ $item->vehicle->plat ?? '-' }}
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="text-center text-muted">
                            <i class="fas fa-times-circle me-1"></i>Tidak Ada Kendaraan
                        </div>
                        @endif
                    </td>
                    
                    {{-- COLUMN: SUPIR --}}
                    <td>
                        @if($item->driver)
                            <div class="d-flex align-items-center">
                                <div class="avatar-sm bg-light-success rounded-circle d-flex align-items-center justify-content-center me-3">
                                    <i class="fas fa-user-tie text-success"></i>
                                </div>
                                <div>
                                    <span class="fw-semibold text-dark d-block">{{ $item->driver->name ?? '-' }}</span>
                                    <small class="text-muted">{{ $item->driver->license_number ?? '-' }}</small>
                                </div>
                            </div>
                        @else
                            <div class="text-center">
                                <span class="badge bg-light text-muted border py-2 px-3">
                                    <i class="fas fa-times me-1"></i>Tanpa Supir
                                </span>
                            </div>
                        @endif
                    </td>
                    
                    {{-- COLUMN: TANGGAL PINJAM --}}
                    <td>
                        <div class="text-center">
                            <span class="fw-semibold text-dark">{{ \Carbon\Carbon::parse($item->tanggal_pinjam)->format('d M Y') }}</span>
                        </div>
                    </td>
                    
                    {{-- COLUMN: TANGGAL KEMBALI --}}
                    <td>
                        @if($item->tanggal_kembali)
                            <div class="text-center">
                                <span class="fw-semibold text-dark">{{ \Carbon\Carbon::parse($item->tanggal_kembali)->format('d M Y') }}</span>
                            </div>
                        @else
                            <span class="text-muted fst-italic">-</span>
                        @endif
                    </td>
                    
                    {{-- COLUMN: STATUS --}}
                    <td class="text-center">
                        @php
                            $status = strtolower(trim($item->status ?? ''));
                            
                            $statusMapping = [
                                'selesai' => ['icon' => 'fa-check-circle', 'color' => 'bg-success text-white', 'text' => 'Selesai'],
                                'diproses' => ['icon' => 'fa-hourglass-half', 'color' => 'bg-warning text-dark', 'text' => 'Diproses'],
                                'ditolak' => ['icon' => 'fa-times-circle', 'color' => 'bg-danger text-white', 'text' => 'Ditolak'],
                                'disetujui' => ['icon' => 'fa-check', 'color' => 'bg-info text-white', 'text' => 'Disetujui'],
                                'pending' => ['icon' => 'fa-clock', 'color' => 'bg-secondary text-white', 'text' => 'Pending'],
                                'dipakai' => ['icon' => 'fa-car-side', 'color' => 'bg-primary text-white', 'text' => 'Dipakai'],
                                'dikembalikan' => ['icon' => 'fa-undo', 'color' => 'bg-success text-white', 'text' => 'Dikembalikan'],
                                'approved' => ['icon' => 'fa-check', 'color' => 'bg-info text-white', 'text' => 'Disetujui'],
                                'rejected' => ['icon' => 'fa-times-circle', 'color' => 'bg-danger text-white', 'text' => 'Ditolak'],
                                'completed' => ['icon' => 'fa-check-circle', 'color' => 'bg-success text-white', 'text' => 'Selesai'],
                                'in_progress' => ['icon' => 'fa-hourglass-half', 'color' => 'bg-warning text-dark', 'text' => 'Diproses'],
                                'in progress' => ['icon' => 'fa-hourglass-half', 'color' => 'bg-warning text-dark', 'text' => 'Diproses'],
                            ];
                            
                            $config = $statusMapping[$status] ?? [
                                'icon' => 'fa-question-circle',
                                'color' => 'bg-secondary text-white', 
                                'text' => ucfirst($status ?: 'Unknown')
                            ];
                        @endphp
                        <span class="badge fs-6 py-2 px-3 {{ $config['color'] }}">
                            <i class="fas {{ $config['icon'] }} me-1"></i>
                            {{ $config['text'] }}
                        </span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <div class="py-4">
                            <i class="fas fa-inbox fa-4x text-muted mb-3 opacity-50"></i>
                            <h5 class="text-muted fw-semibold">Tidak ada data peminjaman ditemukan</h5>
                            <p class="text-muted">Coba ubah filter pencarian Anda</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if(!$isPdf)
    <div class="card-footer bg-white border-top d-flex justify-content-between align-items-center rounded-bottom">
        <div class="text-muted fw-semibold">
            <i class="fas fa-info-circle me-1 text-primary"></i>
            Menampilkan <span class="text-dark">{{ $loanRequests->firstItem() ?? 0 }}</span> - 
            <span class="text-dark">{{ $loanRequests->lastItem() ?? 0 }}</span> dari 
            <span class="text-dark">{{ $loanRequests->total() }}</span> data
        </div>
        <div class="d-flex align-items-center">
            {{ $loanRequests->links('pagination::bootstrap-5') }}
        </div>
    </div>
    @endif
</div>

{{-- TABEL LAPORAN KENDARAAN --}}
@elseif($reportType === 'vehicles')
<div class="{{ !$isPdf ? 'card shadow-lg border-0 rounded-3' : '' }}">
    @if(!$isPdf)
    <div class="card-header bg-white py-3 border-bottom rounded-top">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold text-dark">
                <i class="fas fa-car me-2 text-primary"></i>Data Kendaraan
            </h5>
            <span class="badge bg-primary fs-6">
                <i class="fas fa-database me-1"></i>{{ $vehicles->total() }} Data
            </span>
        </div>
    </div>
    @endif

    <div class="table-responsive">
        <table class="table table-hover table-bordered align-middle mb-0 {{ !$isPdf ? 'table-striped' : '' }}">
            <thead class="bg-gradient-dark text-white">
                <tr>
                    <th class="py-3 text-center fw-semibold" style="width: 60px;">No</th>
                    <th class="py-3 fw-semibold text-center">Jenis Kendaraan</th>
                    <th class="py-3 fw-semibold text-center">Plat Nomor</th>
                    <th class="py-3 fw-semibold text-center">Warna</th>
                    <th class="py-3 fw-semibold text-center">Stok</th>
                    <th class="py-3 fw-semibold text-center">Foto</th>
                </tr>
            </thead>
            <tbody>
                @forelse($vehicles as $vehicle)
                <tr class="transition-all">
                    <td class="text-center fw-bold text-primary">{{ $loop->iteration }}</td>
                    
                    {{-- COLUMN: JENIS KENDARAAN --}}
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar-sm bg-light-primary rounded-circle d-flex align-items-center justify-content-center me-3">
                                <i class="fas fa-car-side text-primary"></i>
                            </div>
                            <div>
                                <span class="fw-semibold text-dark d-block">{{ $vehicle->jenis ?? '-' }}</span>
                            </div>
                        </div>
                    </td>
                    
                    {{-- COLUMN: PLAT NOMOR --}}
                    <td>
                        <span class="badge bg-dark text-white fs-6 py-2">{{ $vehicle->plat ?? '-' }}</span>
                    </td>
                    
                    {{-- COLUMN: WARNA --}}
                    <td>
                        <div class="d-flex align-items-center">
                            <span class="fw-semibold text-dark">{{ $vehicle->warna ?? '-' }}</span>
                        </div>
                    </td>
                    
                    {{-- COLUMN: STOK --}}
                    <td class="text-center">
                        <span class="badge fs-6 py-2 px-3 {{ $vehicle->stock > 0 ? 'bg-success' : 'bg-danger' }}">
                            {{ $vehicle->stock ?? 0 }}
                        </span>
                    </td>
                    
                    {{-- COLUMN: FOTO --}}
                    <td class="text-center">
                        @if($vehicle->foto)
                            <img src="{{ asset('storage/'.$vehicle->foto) }}" 
                                 class="vehicle-photo rounded" 
                                 alt="{{ $vehicle->jenis }}"
                                 style="width: 60px; height: 40px; object-fit: cover;">
                        @else
                            <span class="text-muted fst-italic">-</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center py-5">
                        <div class="py-4">
                            <i class="fas fa-car fa-4x text-muted mb-3 opacity-50"></i>
                            <h5 class="text-muted fw-semibold">Tidak ada data kendaraan ditemukan</h5>
                            <p class="text-muted">Coba ubah filter pencarian Anda</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if(!$isPdf)
    <div class="card-footer bg-white border-top d-flex justify-content-between align-items-center rounded-bottom">
        <div class="text-muted fw-semibold">
            <i class="fas fa-info-circle me-1 text-primary"></i>
            Menampilkan <span class="text-dark">{{ $vehicles->firstItem() ?? 0 }}</span> - 
            <span class="text-dark">{{ $vehicles->lastItem() ?? 0 }}</span> dari 
            <span class="text-dark">{{ $vehicles->total() }}</span> data
        </div>
        <div class="d-flex align-items-center">
            {{ $vehicles->links('pagination::bootstrap-5') }}
        </div>
    </div>
    @endif
</div>

{{-- TABEL LAPORAN USERS --}}
@elseif($reportType === 'users')
<div class="{{ !$isPdf ? 'card shadow-lg border-0 rounded-3' : '' }}">
    @if(!$isPdf)
    <div class="card-header bg-white py-3 border-bottom rounded-top">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold text-dark">
                <i class="fas fa-users me-2 text-primary"></i>Data Users
            </h5>
            <span class="badge bg-primary fs-6">
                <i class="fas fa-database me-1"></i>{{ $users->total() }} Data
            </span>
        </div>
    </div>
    @endif

    <div class="table-responsive">
        <table class="table table-hover table-bordered align-middle mb-0 {{ !$isPdf ? 'table-striped' : '' }}">
            <thead class="bg-gradient-dark text-white">
                <tr>
                    <th class="py-3 text-center fw-semibold" style="width: 60px;">No</th>
                    <th class="py-3 fw-semibold text-center">Nama User</th>
                    <th class="py-3 fw-semibold text-center">Email</th>
                    <th class="py-3 fw-semibold text-center">Role</th>
                    <th class="py-3 fw-semibold text-center">Tanggal Dibuat</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                <tr class="transition-all">
                    <td class="text-center fw-bold text-primary">{{ $loop->iteration }}</td>
                    
                    {{-- COLUMN: NAMA USER --}}
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="avatar-sm bg-light-primary rounded-circle d-flex align-items-center justify-content-center me-3">
                                <i class="fas fa-user text-primary"></i>
                            </div>
                            <div>
                                <span class="fw-semibold text-dark d-block">{{ $user->name ?? '-' }}</span>
                            </div>
                        </div>
                    </td>
                    
                    {{-- COLUMN: EMAIL --}}
                    <td>
                        <span class="text-dark">{{ $user->email ?? '-' }}</span>
                    </td>
                    
                    {{-- COLUMN: ROLE --}}
                    <td class="text-center">
                        @php
                            $roleConfig = [
                                'admin' => ['color' => 'bg-danger text-white', 'text' => 'Admin'],
                                'ga' => ['color' => 'bg-info text-dark', 'text' => 'GA'],
                                'manager_ga' => ['color' => 'bg-primary text-white', 'text' => 'Manager GA'],
                                'supir' => ['color' => 'bg-secondary text-white', 'text' => 'Supir'],
                                'karyawan' => ['color' => 'bg-success text-white', 'text' => 'Karyawan'],
                            ];
                            $config = $roleConfig[$user->role] ?? ['color' => 'bg-warning text-dark', 'text' => ucfirst($user->role)];
                        @endphp
                        <span class="badge fs-6 py-2 px-3 {{ $config['color'] }}">
                            {{ $config['text'] }}
                        </span>
                    </td>
                    
                    {{-- COLUMN: TANGGAL DIBUAT --}}
                    <td class="text-center">
                        <span class="fw-semibold text-dark">
                            {{ $user->created_at ? \Carbon\Carbon::parse($user->created_at)->format('d M Y') : '-' }}
                        </span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center py-5">
                        <div class="py-4">
                            <i class="fas fa-users fa-4x text-muted mb-3 opacity-50"></i>
                            <h5 class="text-muted fw-semibold">Tidak ada data users ditemukan</h5>
                            <p class="text-muted">Coba ubah filter pencarian Anda</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if(!$isPdf)
    <div class="card-footer bg-white border-top d-flex justify-content-between align-items-center rounded-bottom">
        <div class="text-muted fw-semibold">
            <i class="fas fa-info-circle me-1 text-primary"></i>
            Menampilkan <span class="text-dark">{{ $users->firstItem() ?? 0 }}</span> - 
            <span class="text-dark">{{ $users->lastItem() ?? 0 }}</span> dari 
            <span class="text-dark">{{ $users->total() }}</span> data
        </div>
        <div class="d-flex align-items-center">
            {{ $users->links('pagination::bootstrap-5') }}
        </div>
    </div>
    @endif
</div>
@endif

@if($isPdf)
<style>
    body { 
        font-family: 'DejaVu Sans', sans-serif; 
        font-size: 12px; 
        background: #fff !important;
    }
    table { 
        border-collapse: collapse; 
        width: 100%; 
    }
    th, td { 
        border: 1px solid #000 !important; 
        padding: 8px;
        text-align: left;
    }
    th { 
        background-color: #f8f9fa !important;
        font-weight: bold;
    }
    .badge {
        border: 1px solid #000 !important;
        padding: 4px 8px;
    }
    .vehicle-photo {
        max-width: 60px;
        max-height: 40px;
        object-fit: cover;
    }
</style>
@else
<style>
    .avatar-sm {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .transition-all {
        transition: all 0.3s ease;
    }
    .transition-all:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .bg-gradient-dark {
        background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%) !important;
    }
    .bg-gradient-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    }
    .color-indicator {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #dee2e6;
    }
</style>
@endif

@endsection