@extends('layouts.app')

@section('title', 'Audit Company Details')

@section('content')
<div class="main-content">
    <div class="content-container">
        <!-- Page Header -->
        <div class="glass-card" style="padding: 24px; margin-bottom: 24px;">
            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
                <div style="display: flex; align-items: center; gap: 16px;">
                    <a href="{{ route('audit-companies.index') }}" style="display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); padding: 10px 16px; border-radius: 8px; text-decoration: none; font-size: 14px; transition: all 0.3s ease;">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px;">
                            <line x1="19" y1="12" x2="5" y2="12"></line>
                            <polyline points="12 19 5 12 12 5"></polyline>
                        </svg>
                        Back
                    </a>
                    <div>
                        <h1 style="font-size: 28px; font-weight: 600; margin-bottom: 4px;">{{ $auditCompany->name }}</h1>
                        <p style="color: rgba(255, 255, 255, 0.6); font-size: 14px;">Audit company details and administrators</p>
                    </div>
                </div>
                <div style="display: flex; gap: 8px;">
                    <a href="{{ route('audit-companies.edit', $auditCompany) }}" style="display: inline-flex; align-items: center; gap: 8px; background: rgba(20, 184, 166, 0.2); color: #14b8a6; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.3s ease;">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px;">
                            <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('audit-companies.create-admin', $auditCompany) }}" style="display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #14b8a6, #06b6d4); color: white; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.3s ease;">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px;">
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                        </svg>
                        Add Admin
                    </a>
                </div>
            </div>
        </div>

        @if(session('success'))
            <div class="glass-alert success" style="margin-bottom: 24px;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                </svg>
                {{ session('success') }}
            </div>
        @endif

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 24px;">
            <!-- Company Information -->
            <div class="glass-card" style="padding: 24px;">
                <h2 style="font-size: 20px; font-weight: 600; margin-bottom: 20px; color: #14b8a6; display: flex; align-items: center; gap: 10px;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px;">
                        <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 Information
                </h2>
                
                <div style="display: flex; flex-direction: column; gap: 16px;">
                    <div>
                        <div style="color: rgba(255, 255, 255, 0.5); font-size: 13px; margin-bottom: 4px;">Company Name</div>
                        <div style="color: #ffffff; font-size: 15px; font-weight: 500;">{{ $auditCompany->name }}</div>
                    </div>
                    
                    <div>
                        <div style="color: rgba(255, 255, 255, 0.5); font-size: 13px; margin-bottom: 4px;">Email</div>
                        <div style="color: #ffffff; font-size: 15px;">{{ $auditCompany->email }}</div>
                    </div>
                    
                    @if($auditCompany->phone)
                        <div>
                            <div style="color: rgba(255, 255, 255, 0.5); font-size: 13px; margin-bottom: 4px;">Phone</div>
                            <div style="color: #ffffff; font-size: 15px;">{{ $auditCompany->phone }}</div>
                        </div>
                    @endif
                    
                    @if($auditCompany->registration_number)
                        <div>
                            <div style="color: rgba(255, 255, 255, 0.5); font-size: 13px; margin-bottom: 4px;">Registration Number</div>
                            <div style="color: #ffffff; font-size: 15px;">{{ $auditCompany->registration_number }}</div>
                        </div>
                    @endif
                    
                    @if($auditCompany->address)
                        <div>
                            <div style="color: rgba(255, 255, 255, 0.5); font-size: 13px; margin-bottom: 4px;">Address</div>
                            <div style="color: #ffffff; font-size: 15px;">{{ $auditCompany->address }}</div>
                        </div>
                    @endif
                    
                    <div>
                        <div style="color: rgba(255, 255, 255, 0.5); font-size: 13px; margin-bottom: 4px;">Status</div>
                        @if($auditCompany->is_active)
                            <span style="display: inline-flex; align-items: center; gap: 6px; background: rgba(34, 197, 94, 0.2); color: #22c55e; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 12px; height: 12px;">
                                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                                </svg>
                                Active
                            </span>
                        @else
                            <span style="display: inline-flex; align-items: center; gap: 6px; background: rgba(239, 68, 68, 0.2); color: #ef4444; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 12px; height: 12px;">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="15" y1="9" x2="9" y2="15"></line>
                                    <line x1="9" y1="9" x2="15" y2="15"></line>
                                </svg>
                                Inactive
                            </span>
                        @endif
                    </div>
                    
                    <div>
                        <div style="color: rgba(255, 255, 255, 0.5); font-size: 13px; margin-bottom: 4px;">Created At</div>
                        <div style="color: #ffffff; font-size: 15px;">{{ $auditCompany->created_at->format('F j, Y') }}</div>
                    </div>
                </div>
            </div>

            <!-- Administrators -->
            <div class="glass-card" style="padding: 24px;">
                <h2 style="font-size: 20px; font-weight: 600; margin-bottom: 20px; color: #f97316; display: flex; align-items: center; gap: 10px;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px;">
                        <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>
                    Administrators ({{ $auditCompany->admins->count() }})
                </h2>
                
                @if($auditCompany->admins->count() > 0)
                    <div style="display: flex; flex-direction: column; gap: 12px;">
                        @foreach($auditCompany->admins as $admin)
                            <div style="background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px;">
                                <div style="display: flex; align-items: center; gap: 12px;">
                                    <div style="width: 40px; height: 40px; background: linear-gradient(135deg, #14b8a6, #06b6d4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px;">
                                        {{ strtoupper(substr($admin->name, 0, 1)) }}
                                    </div>
                                    <div style="flex: 1;">
                                        <div style="color: #ffffff; font-weight: 500; font-size: 15px; margin-bottom: 2px;">{{ $admin->name }}</div>
                                        <div style="color: rgba(255, 255, 255, 0.6); font-size: 13px;">{{ $admin->email }}</div>
                                    </div>
                                    <span style="display: inline-flex; align-items: center; gap: 6px; background: rgba(249, 115, 22, 0.2); color: #f97316; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">
                                        Admin
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div style="text-align: center; padding: 40px 20px;">
                        <svg viewBox="0 0 24 24" fill="none" stroke="rgba(255, 255, 255, 0.3)" stroke-width="1.5" style="width: 60px; height: 60px; margin-bottom: 12px;">
                            <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 style="color: rgba(255, 255, 255, 0.5); font-size: 14px; margin-bottom: 16px;">No administrators assigned yet</p>
                        <a href="{{ route('audit-companies.create-admin', $auditCompany) }}" style="display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #14b8a6, #06b6d4); color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px;">
                                <line x1="12" y1="5" x2="12" y2="19"></line>
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                            </svg>
                            Add First Admin
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection
