@extends('layouts.app')

@section('title', 'Dashboard')

@push('styles')
<style>
    /* Page header */
    .page-header {
        margin-bottom: 32px;
    }

    .page-title {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #ffffff;
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .page-title svg {
        width: 32px;
        height: 32px;
    }

    .page-subtitle {
        color: rgba(255, 255, 255, 0.6);
        font-size: 15px;
    }

    /* Stat cards container */
    .stat-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }

    /* Individual stat card */
    .stat-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        padding: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .stat-content h3 {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0 0 8px 0;
    }

    .stat-content .stat-number {
        color: #ffffff;
        font-size: 36px;
        font-weight: 700;
        margin: 0;
    }

    .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
    }

    .stat-icon svg {
        width: 28px;
        height: 28px;
        color: rgba(255, 255, 255, 0.8);
    }

    .stat-icon.companies {
        background: rgba(59, 130, 246, 0.2);
    }

    .stat-icon.companies svg {
        color: #60a5fa;
    }

    .stat-icon.directors {
        background: rgba(34, 197, 94, 0.2);
    }

    .stat-icon.directors svg {
        color: #4ade80;
    }

    .stat-icon.appointments {
        background: rgba(6, 182, 212, 0.2);
    }

    .stat-icon.appointments svg {
        color: #22d3ee;
    }

    /* Table card */
    .table-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        overflow: hidden;
    }

    .table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .table-title {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #ffffff;
        font-size: 18px;
        font-weight: 600;
        margin: 0;
    }

    .table-title svg {
        width: 22px;
        height: 22px;
    }

    .btn-add {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(90deg, #14b8a6, #06b6d4);
        color: #ffffff;
        text-decoration: none;
        padding: 10px 18px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(20, 184, 166, 0.3);
    }

    .btn-add:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
        color: #ffffff;
    }

    .btn-add svg {
        width: 18px;
        height: 18px;
    }

    /* Table styling */
    .glass-table {
        width: 100%;
        border-collapse: collapse;
    }

    .glass-table thead tr {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .glass-table th {
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 16px 20px;
        text-align: left;
    }

    .glass-table td {
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .glass-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .glass-table tbody tr:last-child td {
        border-bottom: none;
    }

    .company-link {
        color: #ffffff;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s ease;
    }

    .company-link:hover {
        color: #5eead4;
    }

    /* Badge */
    .badge-active {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(34, 197, 94, 0.2);
        color: #4ade80;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
    }

    .badge-active svg {
        width: 14px;
        height: 14px;
    }

    /* Action buttons */
    .action-buttons {
        display: flex;
        gap: 6px;
        justify-content: flex-end;
    }

    .action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .action-btn:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #ffffff;
    }

    .action-btn svg {
        width: 16px;
        height: 16px;
    }

    .action-btn.view:hover {
        background: rgba(59, 130, 246, 0.2);
        border-color: rgba(59, 130, 246, 0.3);
        color: #60a5fa;
    }

    .action-btn.edit:hover {
        background: rgba(245, 158, 11, 0.2);
        border-color: rgba(245, 158, 11, 0.3);
        color: #fbbf24;
    }

    .action-btn.directors:hover {
        background: rgba(34, 197, 94, 0.2);
        border-color: rgba(34, 197, 94, 0.3);
        color: #4ade80;
    }

    .action-btn.export:hover {
        background: rgba(6, 182, 212, 0.2);
        border-color: rgba(6, 182, 212, 0.3);
        color: #22d3ee;
    }

    /* Empty state */
    .empty-state {
        padding: 60px 20px;
        text-align: center;
    }

    .empty-state svg {
        width: 64px;
        height: 64px;
        color: rgba(255, 255, 255, 0.3);
        margin-bottom: 20px;
    }

    .empty-state p {
        color: rgba(255, 255, 255, 0.5);
        font-size: 15px;
        margin: 0;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .stat-cards {
            grid-template-columns: 1fr;
        }

        .table-header {
            flex-direction: column;
            gap: 16px;
            align-items: flex-start;
        }

        .glass-table {
            display: block;
            overflow-x: auto;
        }

        .action-buttons {
            flex-wrap: wrap;
        }
    }
</style>
@endpush

@section('content')
<!-- Page Header -->
<div class="page-header">
    <h1 class="page-title">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="3" width="7" height="7"></rect>
            <rect x="14" y="3" width="7" height="7"></rect>
            <rect x="14" y="14" width="7" height="7"></rect>
            <rect x="3" y="14" width="7" height="7"></rect>
        </svg>
        Dashboard
    </h1>
    <p class="page-subtitle">Welcome to DCT Company Secretary - Statutory Record Management System</p>
</div>

<!-- Stat Cards -->
<div class="stat-cards">
    <!-- Total Companies -->
    <div class="stat-card">
        <div class="stat-content">
            <h3>Total Companies</h3>
            <p class="stat-number">{{ $companies->count() }}</p>
        </div>
        <div class="stat-icon companies">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="7" height="7"></rect>
                <rect x="14" y="3" width="7" height="7"></rect>
                <rect x="14" y="14" width="7" height="7"></rect>
                <rect x="3" y="14" width="7" height="7"></rect>
            </svg>
        </div>
    </div>

    <!-- Total Directors -->
    <div class="stat-card">
        <div class="stat-content">
            <h3>Total Directors</h3>
            <p class="stat-number">{{ $totalDirectors }}</p>
        </div>
        <div class="stat-icon directors">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0-4 4v2"></path>
                <circle cx="9" cy="7" r="4"></circle>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
        </div>
    </div>

    <!-- Active Appointments -->
    <div class="stat-card">
        <div class="stat-content">
            <h3>Active Appointments</h3>
            <p class="stat-number">{{ $activeAppointments }}</p>
        </div>
        <div class="stat-icon appointments">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0-4 4v2"></path>
                <circle cx="8.5" cy="7" r="4"></circle>
                <polyline points="17 11 19 13 23 9"></polyline>
            </svg>
        </div>
    </div>
</div>

<!-- Companies Table -->
<div class="table-card">
    <div class="table-header">
        <h5 class="table-title">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                <polyline points="9 22 9 12 15 12 15 22"></polyline>
            </svg>
            Companies
        </h5>
        <a href="{{ route('companies.create') }}" class="btn-add">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            Add Company
        </a>
    </div>
    <div class="table-content">
        <table class="glass-table">
            <thead>
                <tr>
                    <th>Company Name</th>
                    <th>CI Number</th>
                    <th>Date of Incorporation</th>
                    <th>Directors</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @if($companies->isEmpty())
                    <tr>
                        <td colspan="5">
                            <div class="empty-state">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                    <polyline points="9 22 9 12 15 12 15 22"></polyline>
                                </svg>
                                <p>No companies found. Click "Add Company" to create your first company.</p>
                            </div>
                        </td>
                    </tr>
                @else
                    @foreach($companies as $company)
                        <tr>
                            <td>
                                <a href="{{ route('companies.show', $company) }}" class="company-link text-decoration-none">
                                    {{ $company->company_name }}
                                </a>
                            </td>
                            <td>{{ $company->ci_number }}</td>
                            <td>{{ $company->date_of_incorporation->format('d/m/Y') }}</td>
                            <td>
                                <span class="badge-active">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <rect x="3" y="11" width="2" height="10"></rect>
                                        <rect x="21" y="11" width="2" height="10"></rect>
                                        <path d="M15 19a4 4 0 1 0 0-8 4 4 0 1 0 0 8z"></path>
                                    </svg>
                                    {{ $company->directorAppointments()->whereNull('date_of_ceasing')->count() }} active
                                </span>
                            </td>
                            <td class="text-end">
                                <div class="action-buttons">
                                    <a href="{{ route('companies.show', $company) }}" class="action-btn view" title="View">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                            <circle cx="12" cy="12" r="3"></circle>
                                        </svg>
                                    </a>
                                    <a href="{{ route('companies.edit', $company) }}" class="action-btn edit" title="Edit">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                        </svg>
                                    </a>
                                    <a href="{{ route('companies.appointments.index', $company) }}" class="action-btn directors" title="Manage Directors">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                            <circle cx="9" cy="7" r="4"></circle>
                                        </svg>
                                    </a>
                                    <a href="{{ route('companies.export-directors-docx', $company) }}" class="action-btn export" title="Export DOCX">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                            <polyline points="14 2 14 8 20 8"></polyline>
                                            <line x1="12" y1="18" x2="12" y2="12"></line>
                                            <line x1="9" y1="15" x2="15" y2="15"></line>
                                        </svg>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                @endif
            </tbody>
        </table>
    </div>
</div>
@endsection