@extends('layouts.app')

@section('title', 'Corporate 360 - ' . $company->name_en)

@section('content')
<div class="space-y-6" x-data="{ tab: 'overview', contactModal: false }">

    <!-- Corporate 360 Header (Requirement 44) -->
    <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div class="flex items-center space-x-5 rtl:space-x-reverse">
                <div class="w-16 h-16 rounded-3xl bg-slate-900 text-white flex items-center justify-center font-extrabold text-2xl shadow-lg">
                    🏢
                </div>
                <div class="space-y-1">
                    <div class="flex items-center space-x-3 rtl:space-x-reverse">
                        <h1 class="text-2xl font-extrabold text-slate-900 dark:text-white">{{ $company->name_en }}</h1>
                        <span class="px-3 py-0.5 rounded-full bg-emerald-100 text-emerald-700 font-bold text-xs uppercase">{{ $company->status }}</span>
                    </div>

                    <div class="flex flex-wrap items-center gap-3 text-xs text-slate-500 font-medium">
                        <span class="font-mono font-bold text-sky-600">Code: {{ $company->company_code }}</span>
                        <span>•</span>
                        <span>Trade License: <strong>{{ $company->trade_license_number ?? 'N/A' }}</strong></span>
                        <span>•</span>
                        <span>TRN: <strong>{{ $company->trn ?? 'N/A' }}</strong></span>
                    </div>
                </div>
            </div>

            <div class="flex items-center space-x-2 rtl:space-x-reverse text-xs font-bold">
                <button @click="contactModal = true" class="px-4 py-2 bg-sky-600 text-white rounded-xl shadow-sm">+ Add Contact</button>
            </div>
        </div>

        <div class="flex items-center space-x-1 rtl:space-x-reverse text-xs font-bold border-t border-slate-100 dark:border-slate-700 pt-4">
            <button @click="tab = 'overview'" :class="tab === 'overview' ? 'bg-sky-600 text-white' : 'text-slate-500'" class="px-4 py-2 rounded-xl">Overview</button>
            <button @click="tab = 'contacts'" :class="tab === 'contacts' ? 'bg-sky-600 text-white' : 'text-slate-500'" class="px-4 py-2 rounded-xl">Contacts ({{ $company->contacts->count() }})</button>
            <button @click="tab = 'employees'" :class="tab === 'employees' ? 'bg-sky-600 text-white' : 'text-slate-500'" class="px-4 py-2 rounded-xl">Employees ({{ $company->corporateEmployees->count() }})</button>
        </div>
    </div>

    <div x-show="tab === 'overview'" class="grid grid-cols-1 md:grid-cols-2 gap-6 text-xs font-medium">
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-3">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs border-b border-slate-100 dark:border-slate-700 pb-2">Credit Account & Terms</h3>
            <p>Approved Credit Limit: <strong class="font-mono font-bold text-sky-600">AED {{ number_format($company->credit_limit, 2) }}</strong></p>
            <p>Payment Terms: <strong class="font-mono font-bold">{{ $company->credit_days }} Days Net</strong></p>
            <p>Emirate: <strong>{{ $company->emirate }}</strong></p>
        </div>

        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-3">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs border-b border-slate-100 dark:border-slate-700 pb-2">Government Establishment Numbers</h3>
            <p>MOHRE Establishment #: <strong class="font-mono">{{ $company->mohre_establishment_number ?? 'N/A' }}</strong></p>
            <p>Immigration Establishment #: <strong class="font-mono">{{ $company->immigration_establishment_number ?? 'N/A' }}</strong></p>
        </div>
    </div>

    <!-- Tab: Employees -->
    <div x-show="tab === 'employees'" class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4 text-xs">
        <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs border-b border-slate-100 dark:border-slate-700 pb-2">Corporate Client Employee Roster</h3>
        <div class="space-y-2">
            @forelse($company->corporateEmployees as $emp)
                <div class="p-3 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 flex justify-between items-center">
                    <div>
                        <span class="font-bold text-slate-900 dark:text-white">{{ $emp->full_name }}</span>
                        <span class="text-[10px] text-slate-400 font-mono block">{{ $emp->corporate_employee_code }} • Passport: {{ $emp->passport_number ?? 'N/A' }}</span>
                    </div>
                    <span class="px-2 py-0.5 rounded bg-emerald-100 text-emerald-700 font-bold text-[10px] uppercase">{{ $emp->status }}</span>
                </div>
            @empty
                <p class="text-slate-400 text-center py-6">No corporate client employees registered for this company yet.</p>
            @endforelse
        </div>
    </div>

    <!-- Add Contact Modal -->
    <div x-show="contactModal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4" x-cloak>
        <div class="bg-white dark:bg-slate-800 rounded-3xl max-w-md w-full p-6 border border-slate-200 dark:border-slate-700 shadow-2xl space-y-4 text-xs">
            <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">Add Authorized Corporate Contact</h3>
            <form action="{{ route('app.corporate.companies.add_contact', $company->id) }}" method="POST" class="space-y-3">
                @csrf
                <div>
                    <label class="block font-semibold mb-1">Contact Person Name *</label>
                    <input type="text" name="name" required placeholder="Tariq Mansoor" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>
                <div>
                    <label class="block font-semibold mb-1">Mobile Phone *</label>
                    <input type="text" name="mobile" required placeholder="+971 50 111 2233" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>
                <div>
                    <label class="block font-semibold mb-1">Designation</label>
                    <input type="text" name="designation" placeholder="HR Manager / PRO Officer" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>
                <div class="flex justify-end space-x-2 rtl:space-x-reverse pt-2">
                    <button type="button" @click="contactModal = false" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold rounded-xl">Cancel</button>
                    <button type="submit" class="px-5 py-2 bg-sky-600 text-white font-bold rounded-xl">Save Contact</button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection