@extends('layouts.app')

@section('title', 'Exit Process — ' . ($exit->employee?->first_name ?? '') . ' ' . ($exit->employee?->last_name ?? ''))

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('exit.index') }}">Exit Management</a>
        <span class="separator">/</span>
        <span class="current">{{ $exit->employee?->first_name }} {{ $exit->employee?->last_name }}</span>
    </div>
@endsection

@section('content')
<div class="space-y-6 animate-fade-up" x-data="{ activeTab: 'checklist', showStatusModal: false, showVisaModal: false }">

    {{-- Header --}}
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">
                {{ $exit->employee?->first_name }} {{ $exit->employee?->last_name }} — {{ $exit->exit_type_label }}
            </h1>
            <p class="text-sm text-gray-500 mt-1">
                {{ $exit->employee?->employee_code }} · {{ $exit->employee?->department?->name ?? '' }} · Initiated {{ $exit->initiated_date->format('d M Y') }}
            </p>
        </div>
        <div class="flex items-center gap-2">
            <span class="badge {{ $exit->status_badge_class }} text-sm px-3 py-1">{{ $exit->status_label }}</span>
            @if(auth()->user()->role === 'company_admin' && $exit->status !== 'completed')
                <button @click="showStatusModal = true" class="btn-secondary">Change Status</button>
            @endif
        </div>
    </div>

    {{-- Summary Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="stat-card">
            <div class="stat-label mb-1">Last Working Day</div>
            <div class="font-display text-xl font-bold text-gray-900">{{ $exit->last_working_date?->format('d M Y') ?? 'TBD' }}</div>
            @if($exit->days_remaining > 0)
                <div class="text-xs text-warning-600 mt-1">{{ $exit->days_remaining }} days remaining</div>
            @endif
        </div>
        <div class="stat-card">
            <div class="stat-label mb-1">Notice Period</div>
            <div class="font-display text-xl font-bold text-gray-900">{{ $exit->notice_period_days }} days</div>
        </div>
        <div class="stat-card">
            <div class="stat-label mb-1">Checklist Progress</div>
            <div class="flex items-center gap-3">
                <div class="font-display text-xl font-bold text-gray-900">{{ $exit->checklist_progress }}%</div>
                <div class="flex-1 bg-gray-100 rounded-full h-2">
                    <div class="h-2 rounded-full {{ $exit->checklist_progress === 100 ? 'bg-success-500' : 'bg-primary-500' }}" style="width: {{ $exit->checklist_progress }}%"></div>
                </div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-label mb-1">Settlement</div>
            @if($exit->final_settlement_amount)
                <div class="font-display text-xl font-bold text-gray-900">OMR {{ number_format($exit->final_settlement_amount, 3) }}</div>
                @if($exit->settlement_approved_at)
                    <div class="text-xs text-success-600 mt-1">Approved</div>
                @else
                    <div class="text-xs text-warning-600 mt-1">Pending approval</div>
                @endif
            @else
                <div class="text-sm text-gray-400">Not calculated</div>
            @endif
        </div>
    </div>

    {{-- Tabs --}}
    <div class="border-b border-gray-200">
        <nav class="flex gap-6">
            @foreach(['checklist' => 'Checklist', 'settlement' => 'Settlement', 'visa' => 'Visa & Repatriation', 'details' => 'Details'] as $tab => $label)
                <button @click="activeTab = '{{ $tab }}'" class="pb-3 text-sm font-medium border-b-2 transition-colors"
                    :class="activeTab === '{{ $tab }}' ? 'border-primary-600 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700'">
                    {{ $label }}
                </button>
            @endforeach
        </nav>
    </div>

    {{-- Checklist Tab --}}
    <div x-show="activeTab === 'checklist'" class="card">
        <div class="card-header">
            <h2 class="card-header-title">Exit Checklist</h2>
            <span class="text-sm text-gray-500">{{ $exit->checklistItems->where('status', 'completed')->count() }}/{{ $exit->checklistItems->where('status', '!=', 'not_applicable')->count() }} completed</span>
        </div>
        <div class="divide-y divide-gray-100">
            @foreach($exit->checklistItems as $item)
                <div class="px-5 py-4 flex items-start gap-4">
                    <div class="mt-0.5">
                        @if($item->status === 'completed')
                            <svg class="w-5 h-5 text-success-500" 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"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        @elseif($item->status === 'not_applicable')
                            <svg class="w-5 h-5 text-gray-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                        @else
                            <div class="w-5 h-5 rounded-full border-2 border-gray-300"></div>
                        @endif
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between">
                            <h4 class="text-sm font-medium {{ $item->status === 'completed' ? 'text-gray-400 line-through' : ($item->status === 'not_applicable' ? 'text-gray-400' : 'text-gray-800') }}">
                                {{ $item->item_name }}
                            </h4>
                            <span class="badge {{ $item->status_badge_class }}">{{ $item->status_label }}</span>
                        </div>
                        @if($item->item_description)
                            <p class="text-xs text-gray-500 mt-0.5">{{ $item->item_description }}</p>
                        @endif
                        @if($item->completed_at)
                            <p class="text-xxs text-gray-400 mt-1">Completed by {{ $item->completedByUser?->name ?? 'Unknown' }} on {{ $item->completed_at->format('d M Y H:i') }}</p>
                        @endif
                        @if($item->notes)
                            <p class="text-xs text-gray-500 mt-1 italic">{{ $item->notes }}</p>
                        @endif

                        {{-- Quick update form --}}
                        @if(auth()->user()->role === 'company_admin' && $exit->status !== 'completed')
                            <form method="POST" action="{{ route('exit.checklist.update', [$exit->id, $item->id]) }}" class="mt-2 flex items-center gap-2" x-data>
                                @csrf @method('PATCH')
                                <select name="status" class="text-xs border-gray-200 rounded py-1 px-2">
                                    <option value="pending" {{ $item->status === 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="completed" {{ $item->status === 'completed' ? 'selected' : '' }}>Completed</option>
                                    <option value="not_applicable" {{ $item->status === 'not_applicable' ? 'selected' : '' }}>N/A</option>
                                </select>
                                <input type="text" name="notes" value="{{ $item->notes }}" placeholder="Notes..." class="text-xs border-gray-200 rounded py-1 px-2 flex-1">
                                <button type="submit" class="text-xs text-primary-600 font-medium hover:text-primary-800">Update</button>
                            </form>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Settlement Tab --}}
    <div x-show="activeTab === 'settlement'" class="space-y-4">
        @if(auth()->user()->role === 'company_admin' && !$exit->settlement_breakdown && $exit->status !== 'completed')
            <form method="POST" action="{{ route('exit.settlement.calculate', $exit->id) }}">
                @csrf
                <button type="submit" class="btn-primary">Calculate Final Settlement</button>
            </form>
        @endif

        @if($settlement)
            <div class="card">
                <div class="card-header">
                    <h2 class="card-header-title">Final Settlement Breakdown</h2>
                    @if($exit->settlement_approved_at)
                        <span class="badge badge-active">Approved by {{ $exit->settlementApprover?->name ?? '' }}</span>
                    @endif
                </div>
                <div class="card-body">
                    <div class="space-y-3">
                        @php $breakdown = $settlement['breakdown'] ?? ($settlement instanceof array ? $settlement['breakdown'] : []); @endphp

                        {{-- Earnings --}}
                        <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Earnings</h4>
                        @foreach($breakdown as $key => $item)
                            @if(($item['type'] ?? '') === 'earning')
                                <div class="flex items-center justify-between py-2 border-b border-gray-50">
                                    <span class="text-sm text-gray-700">{{ $item['label'] }}</span>
                                    <span class="text-sm font-medium text-gray-800">OMR {{ number_format($item['amount'], 3) }}</span>
                                </div>
                            @endif
                        @endforeach
                        <div class="flex items-center justify-between py-2 bg-success-50 px-3 rounded-lg">
                            <span class="text-sm font-semibold text-success-700">Total Earnings</span>
                            <span class="text-sm font-bold text-success-700">OMR {{ number_format($settlement['total_earnings'] ?? 0, 3) }}</span>
                        </div>

                        {{-- Deductions --}}
                        @if(collect($breakdown)->where('type', 'deduction')->count() > 0)
                            <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mt-4">Deductions</h4>
                            @foreach($breakdown as $key => $item)
                                @if(($item['type'] ?? '') === 'deduction')
                                    <div class="flex items-center justify-between py-2 border-b border-gray-50">
                                        <span class="text-sm text-gray-700">{{ $item['label'] }}</span>
                                        <span class="text-sm font-medium text-danger-500">- OMR {{ number_format($item['amount'], 3) }}</span>
                                    </div>
                                @endif
                            @endforeach
                            <div class="flex items-center justify-between py-2 bg-danger-50 px-3 rounded-lg">
                                <span class="text-sm font-semibold text-danger-700">Total Deductions</span>
                                <span class="text-sm font-bold text-danger-700">OMR {{ number_format($settlement['total_deductions'] ?? 0, 3) }}</span>
                            </div>
                        @endif

                        {{-- Net --}}
                        <div class="flex items-center justify-between py-3 bg-primary-50 px-4 rounded-xl mt-4">
                            <span class="font-display text-base font-semibold text-primary-800">Net Final Settlement</span>
                            <span class="font-display text-xl font-bold text-primary-800">OMR {{ number_format($settlement['net_settlement'] ?? $exit->final_settlement_amount ?? 0, 3) }}</span>
                        </div>
                    </div>

                    @if(auth()->user()->role === 'company_admin' && !$exit->settlement_approved_at && $exit->final_settlement_amount)
                        <div class="mt-4 pt-4 border-t border-gray-100 flex justify-end">
                            <form method="POST" action="{{ route('exit.settlement.approve', $exit->id) }}">
                                @csrf
                                <button type="submit" class="btn-primary">Approve Settlement</button>
                            </form>
                        </div>
                    @endif
                </div>
            </div>
        @endif
    </div>

    {{-- Visa Tab --}}
    <div x-show="activeTab === 'visa'" class="card">
        <div class="card-header">
            <h2 class="card-header-title">Visa Cancellation & Repatriation</h2>
        </div>
        <div class="card-body space-y-5">
            {{-- Visa Status --}}
            <div>
                <label class="form-label">Visa Cancellation Status</label>
                @if(auth()->user()->role === 'company_admin' && $exit->status !== 'completed')
                    <form method="POST" action="{{ route('exit.visa.update', $exit->id) }}" class="flex items-center gap-3">
                        @csrf @method('PATCH')
                        <select name="visa_cancellation_status" class="form-select max-w-xs">
                            @foreach($visaStatuses as $key => $label)
                                <option value="{{ $key }}" {{ $exit->visa_cancellation_status === $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                        <button type="submit" class="btn-primary">Update</button>
                    </form>
                @else
                    <span class="badge {{ $exit->visa_cancellation_status === 'cancelled' ? 'badge-active' : 'badge-pending' }}">{{ $exit->visa_status_label }}</span>
                @endif
            </div>

            {{-- Visa Timeline --}}
            <div>
                <h4 class="text-sm font-medium text-gray-700 mb-3">Progress</h4>
                <div class="flex items-center gap-0">
                    @foreach(['not_started' => 'Not Started', 'initiated' => 'Initiated', 'submitted' => 'Submitted', 'cancelled' => 'Cancelled'] as $step => $label)
                        @php
                            $stepOrder = array_search($step, array_keys($visaStatuses));
                            $currentOrder = array_search($exit->visa_cancellation_status ?? 'not_started', array_keys($visaStatuses));
                            $isComplete = $stepOrder <= $currentOrder;
                            $isCurrent = $stepOrder === $currentOrder;
                        @endphp
                        <div class="flex-1 text-center">
                            <div class="w-8 h-8 mx-auto rounded-full flex items-center justify-center {{ $isComplete ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-400' }} {{ $isCurrent ? 'ring-4 ring-primary-100' : '' }}">
                                @if($isComplete && !$isCurrent)
                                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                                @else
                                    <span class="text-xs font-bold">{{ $stepOrder + 1 }}</span>
                                @endif
                            </div>
                            <p class="text-xxs mt-1 {{ $isCurrent ? 'text-primary-600 font-medium' : 'text-gray-400' }}">{{ $label }}</p>
                        </div>
                        @if(!$loop->last)
                            <div class="flex-1 h-0.5 {{ $isComplete ? 'bg-primary-600' : 'bg-gray-200' }} -mt-4"></div>
                        @endif
                    @endforeach
                </div>
            </div>

            {{-- Repatriation --}}
            <div>
                <h4 class="text-sm font-medium text-gray-700 mb-2">Repatriation Date</h4>
                <p class="text-sm text-gray-600">{{ $exit->repatriation_date?->format('d M Y') ?? 'Not set' }}</p>
            </div>
        </div>
    </div>

    {{-- Details Tab --}}
    <div x-show="activeTab === 'details'" class="card">
        <div class="card-header">
            <h2 class="card-header-title">Exit Details</h2>
        </div>
        <div class="card-body">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <span class="text-xs text-gray-500">Exit Type</span>
                    <p class="text-sm font-medium text-gray-800">{{ $exit->exit_type_label }}</p>
                </div>
                <div>
                    <span class="text-xs text-gray-500">Initiated By</span>
                    <p class="text-sm text-gray-800">{{ $exit->initiator?->name ?? '—' }}</p>
                </div>
                <div>
                    <span class="text-xs text-gray-500">Initiated Date</span>
                    <p class="text-sm text-gray-800">{{ $exit->initiated_date->format('d M Y') }}</p>
                </div>
                <div>
                    <span class="text-xs text-gray-500">Last Working Date</span>
                    <p class="text-sm text-gray-800">{{ $exit->last_working_date?->format('d M Y') ?? 'TBD' }}</p>
                </div>
                <div class="md:col-span-2">
                    <span class="text-xs text-gray-500">Reason</span>
                    <p class="text-sm text-gray-800">{{ $exit->exit_reason ?? 'Not specified' }}</p>
                </div>
                <div class="md:col-span-2">
                    <span class="text-xs text-gray-500">Exit Interview Notes</span>
                    <p class="text-sm text-gray-800">{{ $exit->exit_interview_notes ?? 'No notes recorded' }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Status Change Modal --}}
    <div x-show="showStatusModal" x-cloak class="modal-backdrop" @click.self="showStatusModal = false">
        <div class="modal animate-modal-in">
            <div class="modal-header">
                <h3 class="font-display text-lg font-semibold text-gray-800">Change Exit Status</h3>
            </div>
            <form method="POST" action="{{ route('exit.updateStatus', $exit->id) }}">
                @csrf @method('PATCH')
                <div class="modal-body">
                    <select name="status" class="form-select">
                        @foreach(config('exit.statuses') as $key => $label)
                            <option value="{{ $key }}" {{ $exit->status === $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                    @if($exit->status !== 'completed')
                        <p class="text-xs text-warning-600 mt-2">Setting to "Completed" will update the employee's final status.</p>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" @click="showStatusModal = false" class="btn-secondary">Cancel</button>
                    <button type="submit" class="btn-primary">Update Status</button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection