@extends('layouts.app')

@section('title', 'Companies')

@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;
    }

    /* Breadcrumb */
    .glass-breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }

    .glass-breadcrumb a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 14px;
        transition: color 0.2s ease;
    }

    .glass-breadcrumb a:hover {
        color: #5eead4;
    }

    .glass-breadcrumb .separator {
        color: rgba(255, 255, 255, 0.4);
        font-size: 12px;
    }

    .glass-breadcrumb .current {
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
    }

    /* 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);
        border: none;
        cursor: pointer;
    }

    .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 {
        transition: background 0.2s ease;
    }

    .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-directors {
        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-directors 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;
        cursor: pointer;
    }

    .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;
    }

    .action-btn.delete:hover {
        background: rgba(239, 68, 68, 0.2);
        border-color: rgba(239, 68, 68, 0.3);
        color: #f87171;
    }

    /* 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;
    }

    /* Tooltip */
    [title] {
        position: relative;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .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')
<!-- Breadcrumb -->
<div class="glass-breadcrumb">
    <a href="{{ route('dashboard') }}">Dashboard</a>
    <span class="separator">/</span>
    <span class="current">Companies</span>
</div>

<!-- Page Header -->
<div class="page-header">
    <h1 class="page-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
    </h1>
    <p class="page-subtitle">Manage your registered companies and their statutory records</p>
</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="M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16"></path>
                <path d="M1 21h22"></path>
                <path d="M9 7h1"></path>
                <path d="M9 11h1"></path>
                <path d="M9 15h1"></path>
                <path d="M14 7h1"></path>
                <path d="M14 11h1"></path>
                <path d="M14 15h1"></path>
            </svg>
            All 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">
                                    {{ $company->company_name }}
                                </a>
                            </td>
                            <td>{{ $company->ci_number }}</td>
                            <td>{{ $company->date_of_incorporation->format('d/m/Y') }}</td>
                            <td>
                                <span class="badge-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>
                                    {{ $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>
                                    <form action="{{ route('companies.destroy', $company) }}" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this company?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="action-btn delete" title="Delete">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <polyline points="3 6 5 6 21 6"></polyline>
                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                                <line x1="10" y1="11" x2="10" y2="17"></line>
                                                <line x1="14" y1="11" x2="14" y2="17"></line>
                                            </svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                @endif
            </tbody>
        </table>
    </div>
</div>
@endsection