@extends('layouts.app')

@section('title', $company->company_name)

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

    /* Header with actions */
    .header-actions {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 16px;
    }

    .header-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Glass card */
    .glass-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;
        margin-bottom: 24px;
    }

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

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

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

    .card-body {
        padding: 24px;
    }

    /* Layout grid */
    .detail-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Detail rows */
    .detail-item {
        margin-bottom: 20px;
    }

    .detail-item:last-child {
        margin-bottom: 0;
    }

    .detail-label {
        color: rgba(255, 255, 255, 0.6);
        font-size: 13px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
    }

    .detail-value {
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;
    }

    /* Button styles */
    .btn-gradient {
        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-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
        color: #ffffff;
    }

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

    .btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.15);
        color: #ffffff;
        text-decoration: none;
        padding: 10px 18px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.2);
        cursor: pointer;
    }

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

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

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

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

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

    .btn-danger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(239, 68, 68, 0.2);
        color: #f87171;
        text-decoration: none;
        padding: 10px 18px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: 1px solid rgba(239, 68, 68, 0.3);
        cursor: pointer;
    }

    .btn-danger:hover {
        background: rgba(239, 68, 68, 0.3);
        color: #fca5a5;
    }

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

    .btn-sm {
        padding: 8px 14px;
        font-size: 13px;
    }

    .btn-sm svg {
        width: 14px;
        height: 14px;
    }

    /* Directors table */
    .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: 14px 16px;
        text-align: left;
    }

    .glass-table td {
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        padding: 14px 16px;
        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;
    }

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

    .badge-ceased {
        display: inline-flex;
        align-items: center;
        background: rgba(156, 163, 175, 0.2);
        color: #9ca3af;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
    }

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

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

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

    /* Danger zone */
    .danger-zone {
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .danger-zone .card-header {
        border-bottom-color: rgba(239, 68, 68, 0.2);
    }

    .danger-zone .card-title {
        color: #f87171;
    }

    .danger-text {
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        margin: 0 0 16px 0;
    }

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

        .header-actions {
            flex-direction: column;
        }

        .header-buttons {
            width: 100%;
        }

        .header-buttons a,
        .header-buttons button {
            flex: 1;
            justify-content: center;
        }

        .glass-table {
            display: block;
            overflow-x: auto;
        }
    }
</style>
@endpush

@section('content')
<!-- Breadcrumb -->
<div class="glass-breadcrumb">
    <a href="{{ route('dashboard') }}">Dashboard</a>
    <span class="separator">/</span>
    <a href="{{ route('companies.index') }}">Companies</a>
    <span class="separator">/</span>
    <span class="current">{{ $company->company_name }}</span>
</div>

<!-- Page Header -->
<div class="page-header">
    <div class="header-actions">
        <div>
            <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>
                {{ $company->company_name }}
            </h1>
            <p class="page-subtitle">Company details and statutory records</p>
        </div>
        <div class="header-buttons">
            <a href="{{ route('companies.edit', $company) }}" class="btn-secondary 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>
                Edit
            </a>
            <a href="{{ route('companies.appointments.index', $company) }}" class="btn-secondary 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>
                Manage Directors
            </a>
            <a href="{{ route('companies.export-directors-docx', $company) }}" class="btn-secondary export">
                <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>
                Export DOCX
            </a>
        </div>
    </div>
</div>

<!-- Detail Grid -->
<div class="detail-grid">
    <!-- Company Details Card -->
    <div class="glass-card">
        <div class="card-header">
            <h2 class="card-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="12" y1="16" x2="12" y2="12"></line>
                    <line x1="12" y1="8" x2="12.01" y2="8"></line>
                </svg>
                Company Details / 公司資料
            </h2>
        </div>
        <div class="card-body">
            <div class="detail-item">
                <div class="detail-label">Company Name / 公司名稱</div>
                <div class="detail-value">{{ $company->company_name }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">CI Number / 公司註冊證號碼</div>
                <div class="detail-value">{{ $company->ci_number }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Date of Incorporation / 成立日期</div>
                <div class="detail-value">{{ $company->date_of_incorporation->format('d/m/Y') }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Created</div>
                <div class="detail-value">{{ $company->created_at->format('d/m/Y H:i') }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Last Updated</div>
                <div class="detail-value">{{ $company->updated_at->format('d/m/Y H:i') }}</div>
            </div>
        </div>
    </div>

    <!-- Directors Card -->
    <div class="glass-card">
        <div class="card-header">
            <h2 class="card-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 / 董事
            </h2>
            <a href="{{ route('companies.appointments.create', $company) }}" class="btn-gradient btn-sm">
                <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
            </a>
        </div>
        <div class="card-body" style="padding: 0;">
            @if($company->directorAppointments->isEmpty())
                <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>
                    </svg>
                    <p>No directors appointed yet.</p>
                </div>
            @else
                <table class="glass-table">
                    <thead>
                        <tr>
                            <th>Director Name</th>
                            <th>Appointed</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($company->directorAppointments as $appointment)
                            <tr>
                                <td>
                                    <a href="{{ route('directors.show', $appointment->director) }}" class="director-link">
                                        {{ $appointment->director->full_name }}
                                    </a>
                                </td>
                                <td>{{ $appointment->date_of_appointment->format('d/m/Y') }}</td>
                                <td>
                                    @if($appointment->date_of_ceasing)
                                        <span class="badge-ceased">
                                            Ceased {{ $appointment->date_of_ceasing->format('d/m/Y') }}
                                        </span>
                                    @else
                                        <span class="badge-active">Active</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>
    </div>
</div>

<!-- Danger Zone -->
<div class="glass-card danger-zone">
    <div class="card-header">
        <h2 class="card-title">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
                <line x1="12" y1="9" x2="12" y2="13"></line>
                <line x1="12" y1="17" x2="12.01" y2="17"></line>
            </svg>
            Danger Zone
        </h2>
    </div>
    <div class="card-body">
        <p class="danger-text">Deleting this company will also remove all associated director appointments. This action cannot be undone.</p>
        <form action="{{ route('companies.destroy', $company) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this company? This action cannot be undone.');">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn-danger">
                <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>
                Delete Company
            </button>
        </form>
    </div>
</div>
@endsection