@extends('layouts.app')

@section('title', 'Directors')

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

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

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

    .director-chinese {
        color: rgba(255, 255, 255, 0.5);
        font-size: 13px;
        margin-top: 2px;
    }

    /* Badge */
    .badge-companies {
        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-companies 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.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;
    }

    /* 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">Directors</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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 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>
        Directors
    </h1>
    <p class="page-subtitle">Manage directors and their company appointments</p>
</div>

<!-- Directors 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="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
            </svg>
            All Directors
        </h5>
        <a href="{{ route('directors.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 Director
        </a>
    </div>
    <div class="table-content">
        <table class="glass-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>HKID / Passport</th>
                    <th>Address</th>
                    <th>Companies</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @if($directors->isEmpty())
                    <tr>
                        <td colspan="5">
                            <div class="empty-state">
                                <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>
                                    <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>
                                <p>No directors found. Click "Add Director" to create your first director.</p>
                            </div>
                        </td>
                    </tr>
                @else
                    @foreach($directors as $director)
                        <tr>
                            <td>
                                <a href="{{ route('directors.show', $director) }}" class="director-link">
                                    {{ $director->english_name }}
                                </a>
                                @if($director->chinese_name)
                                    <div class="director-chinese">{{ $director->chinese_name }}</div>
                                @endif
                            </td>
                            <td>
                                @if($director->hkid_or_ci_number)
                                    {{ $director->hkid_or_ci_number }}
                                @elseif($director->passport_number)
                                    {{ $director->passport_number }}
                                    @if($director->passport_issuing_country)
                                        <span style="color: rgba(255,255,255,0.5);">({{ $director->passport_issuing_country }})</span>
                                    @endif
                                @else
                                    <span style="color: rgba(255,255,255,0.4);">-</span>
                                @endif
                            </td>
                            <td>
                                @if($director->residential_address)
                                    <span style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 200px;">
                                        {{ $director->residential_address }}
                                    </span>
                                @else
                                    <span style="color: rgba(255,255,255,0.4);">-</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge-companies">
                                    <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>
                                    {{ $director->directorAppointments()->count() }} appointment(s)
                                </span>
                            </td>
                            <td class="text-end">
                                <div class="action-buttons">
                                    <a href="{{ route('directors.show', $director) }}" 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('directors.edit', $director) }}" 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>
                                    <form action="{{ route('directors.destroy', $director) }}" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this director?');">
                                        @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