@extends('layouts.branch')

@section('title', 'Employee Details - ' . $employee->full_name)
@section('header', 'Employee Profile')

@section('content')
<div class="space-y-8 print:p-0">
    <!-- Action Bar -->
    <div class="flex items-center justify-between print:hidden">
        @include('partials.branch._breadcrumbs', [
            'breadcrumbs' => [
                ['name' => 'Employees', 'url' => route('branch.employees.index')],
                ['name' => $employee->full_name, 'url' => '#']
            ]
        ])
        
        <div class="flex items-center gap-3">
            <button onclick="window.print()" class="px-6 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-slate-50 transition-all shadow-sm flex items-center gap-2">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                Print Report
            </button>
            <a href="{{ route('branch.employees.edit', $employee) }}" class="px-6 py-2.5 bg-indigo-600 text-white rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100 flex items-center gap-2">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                Edit Profile
            </a>
        </div>
    </div>

    <!-- Main Profile Document -->
    <div class="bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden print:border-0 print:shadow-none">
        
        <!-- Hospital Header -->
        <div class="px-10 py-12 bg-slate-50 border-b border-slate-100 relative">
            <div class="absolute top-0 right-0 p-10 opacity-5 print:opacity-10">
                <svg class="h-32 w-32 text-indigo-900" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 11h-4v4h-4v-4H6v-4h4V6h4v4h4v4z"/></svg>
            </div>
            
            <div class="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
                <div class="space-y-2">
                    <h1 class="text-3xl font-black text-slate-800 uppercase tracking-tighter">{{ config('app.name', 'Hospital Management System') }}</h1>
                    <div class="space-y-1">
                        <p class="text-sm font-bold text-indigo-600 uppercase tracking-widest">{{ $employee->branch->name }}</p>
                        <p class="text-xs font-medium text-slate-500 max-w-sm leading-relaxed">
                            {{ $employee->branch->address_1 }}@if($employee->branch->address_2), {{ $employee->branch->address_2 }}@endif<br>
                            {{ $employee->branch->city }}, {{ $employee->branch->state }} - {{ $employee->branch->zip }}
                        </p>
                    </div>
                </div>
                
                <div class="text-right">
                    <div class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-2 leading-none">Employee Summary Card</div>
                    <div class="inline-flex px-4 py-2 bg-white border border-slate-200 rounded-xl font-black text-slate-800 tracking-tighter text-xl shadow-sm">
                        {{ $employee->employee_id }}
                    </div>
                </div>
            </div>
        </div>

        <div class="p-10">
            <div class="flex flex-col lg:flex-row gap-12">
                
                <!-- Left Column: Photo & Direct Stats -->
                <div class="w-full lg:w-48 space-y-6">
                    <div class="aspect-square bg-slate-50 rounded-3xl border-2 border-slate-100 p-2 shadow-inner overflow-hidden">
                        @if($employee->photo)
                            <img src="{{ Storage::url($employee->photo) }}" class="h-full w-full object-cover rounded-2xl shadow-sm">
                        @else
                            <div class="h-full w-full flex items-center justify-center bg-indigo-50/50 rounded-2xl">
                                <svg class="h-16 w-16 text-indigo-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            </div>
                        @endif
                    </div>
                    
                    <div class="space-y-4">
                        <div class="p-4 bg-emerald-50/50 border border-emerald-100 rounded-2xl">
                            <p class="text-[9px] font-black text-emerald-600 uppercase tracking-widest">Employee Status</p>
                            <div class="flex items-center gap-2 mt-1">
                                <span class="h-2 w-2 bg-emerald-500 rounded-full animate-pulse"></span>
                                <span class="text-xs font-bold text-emerald-700 uppercase">Active Record</span>
                            </div>
                        </div>
                        
                        <div class="p-4 bg-indigo-50/50 border border-indigo-100 rounded-2xl">
                            <p class="text-[9px] font-black text-indigo-600 uppercase tracking-widest">Designated Role</p>
                            <p class="text-xs font-bold text-indigo-800 uppercase mt-1">{{ $employee->role }}</p>
                        </div>
                    </div>
                </div>

                <!-- Right Column: Full Details Table -->
                <div class="flex-1 space-y-8">
                    <!-- Personal Details -->
                    <div class="space-y-4">
                        <div class="flex items-center gap-3">
                            <div class="h-10 w-10 bg-slate-800 rounded-xl flex items-center justify-center text-white shadow-lg shadow-slate-200">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            </div>
                            <h2 class="text-lg font-black text-slate-800 uppercase tracking-tight">Personal & Professional Info</h2>
                        </div>
                        
                        <div class="bg-slate-50 border border-slate-100 rounded-3xl overflow-hidden shadow-inner">
                            <table class="w-full text-sm border-collapse">
                                <tbody class="divide-y divide-slate-200">
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 w-1/3 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Full Name</td>
                                        <td class="px-6 py-4 font-bold text-slate-700">{{ $employee->full_name }}</td>
                                    </tr>
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Staff Type</td>
                                        <td class="px-6 py-4">
                                            <span class="inline-flex px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest {{ $employee->type === 'clinical' ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">
                                                {{ $employee->type }}
                                            </span>
                                        </td>
                                    </tr>
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Email Address</td>
                                        <td class="px-6 py-4 font-bold text-slate-700">{{ $employee->email ?? 'Not Registered' }}</td>
                                    </tr>
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Date of Birth</td>
                                        <td class="px-6 py-4 font-bold text-slate-700">{{ $employee->dob?->format('d M, Y') ?? 'Not Provided' }}</td>
                                    </tr>
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Gender</td>
                                        <td class="px-6 py-4 font-bold text-slate-700">{{ $employee->gender ?? 'Not Specified' }}</td>
                                    </tr>
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Blood Group</td>
                                        <td class="px-6 py-4 font-bold text-rose-600">{{ $employee->blood_group ?? 'Not Known' }}</td>
                                    </tr>
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Emergency Contact</td>
                                        <td class="px-6 py-4 font-bold text-slate-700">{{ $employee->next_of_kin_phone ?? '---' }}</td>
                                    </tr>
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Permanent Address</td>
                                        <td class="px-6 py-4 font-medium text-slate-600 leading-relaxed">{{ $employee->permanent_address ?? '---' }}</td>
                                    </tr>
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Current Address</td>
                                        <td class="px-6 py-4 font-medium text-slate-600 leading-relaxed">{{ $employee->current_address ?? '---' }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Duty & Shifts -->
                    <div class="space-y-4">
                        <div class="flex items-center gap-3">
                            <div class="h-10 w-10 bg-indigo-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-indigo-200">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <h2 class="text-lg font-black text-slate-800 uppercase tracking-tight">Duty & Shift Assignment</h2>
                        </div>
                        
                        <div class="bg-slate-50 border border-slate-100 rounded-3xl overflow-hidden shadow-inner">
                            <table class="w-full text-sm border-collapse">
                                <tbody class="divide-y divide-slate-200">
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 w-1/3 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Shift Allocation</td>
                                        <td class="px-6 py-4 font-bold text-slate-700">{{ $employee->shift_type ?? 'Unassigned' }}</td>
                                    </tr>
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Weekly Off Day</td>
                                        <td class="px-6 py-4 font-bold text-slate-700">{{ $employee->weekly_off ?? 'Not Configured' }}</td>
                                    </tr>
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">OT Eligibility</td>
                                        <td class="px-6 py-4">
                                            <span class="inline-flex px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest {{ $employee->ot_eligibility ? 'bg-indigo-100 text-indigo-700' : 'bg-slate-200 text-slate-500' }}">
                                                {{ $employee->ot_eligibility ? 'Eligible' : 'Non-Eligible' }}
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Financial Details -->
                    <div class="space-y-4">
                        <div class="flex items-center gap-3">
                            <div class="h-10 w-10 bg-emerald-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-emerald-200">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <h2 class="text-lg font-black text-slate-800 uppercase tracking-tight">Bank & Financial Record</h2>
                        </div>
                        
                        <div class="bg-slate-50 border border-slate-100 rounded-3xl overflow-hidden shadow-inner">
                            <table class="w-full text-sm border-collapse">
                                <tbody class="divide-y divide-slate-200">
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 w-1/3 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Bank Institution</td>
                                        <td class="px-6 py-4 font-bold text-slate-700">{{ $employee->bank_name ?? '---' }}</td>
                                    </tr>
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Account Number</td>
                                        <td class="px-6 py-4 font-bold text-slate-700 tracking-wider">{{ $employee->bank_account_no ?? '---' }}</td>
                                    </tr>
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">IFSC / Routing</td>
                                        <td class="px-6 py-4 font-bold text-slate-700 uppercase tracking-widest">{{ $employee->bank_ifsc ?? '---' }}</td>
                                    </tr>
                                    <tr class="group hover:bg-white transition-colors">
                                        <td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-100/30">Branch Location</td>
                                        <td class="px-6 py-4 font-bold text-slate-700 uppercase tracking-widest">{{ $employee->bank_branch ?? '---' }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- KYC Documents Gallery -->
                    <div class="space-y-4">
                        <div class="flex items-center gap-3">
                            <div class="h-10 w-10 bg-amber-500 rounded-xl flex items-center justify-center text-white shadow-lg shadow-amber-200">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                            </div>
                            <h2 class="text-lg font-black text-slate-800 uppercase tracking-tight">Verified Verification Repository</h2>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            @forelse($employee->documents as $doc)
                                <div class="p-4 bg-white border border-slate-200 rounded-2xl flex items-center justify-between group hover:border-indigo-500 transition-all shadow-sm">
                                    <div class="flex items-center gap-3">
                                        <div class="h-10 w-10 bg-slate-100 rounded-xl flex items-center justify-center text-slate-500 font-black text-[10px]">
                                            {{ substr($doc->type, 0, 1) }}
                                        </div>
                                        <div>
                                            <p class="text-xs font-black text-slate-800 uppercase tracking-tight">{{ $doc->type }}</p>
                                            <p class="text-[9px] font-bold text-slate-400 uppercase mt-0.5 tracking-widest">{{ $doc->number ?? 'No ID#' }}</p>
                                        </div>
                                    </div>
                                    <a href="{{ Storage::url($doc->file_path) }}" target="_blank" class="h-8 w-8 bg-slate-50 text-slate-400 rounded-lg flex items-center justify-center hover:bg-slate-900 hover:text-white transition-all">
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                    </a>
                                </div>
                            @empty
                                <div class="md:col-span-2 p-12 bg-slate-50 border border-slate-100 rounded-3xl text-center">
                                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">No KYC documents have been uploaded for this employee</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer / Certification -->
        <div class="px-10 py-8 bg-slate-50/50 border-t border-slate-100 flex flex-col md:flex-row justify-between items-center gap-4">
            <p class="text-[9px] font-bold text-slate-400 uppercase tracking-[0.2em]">Generated on: {{ now()->format('d M, Y H:i') }}</p>
            <div class="flex items-center gap-2">
                <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Digitally Certified by:</span>
                <span class="text-[10px] font-black text-indigo-600 uppercase tracking-tighter">{{ $employee->branch->name }} Portal</span>
            </div>
        </div>
    </div>
</div>

<style>
    @media print {
        /* Hide UI Elements */
        aside, header, .print\:hidden { display: none !important; }
        
        /* Reset Layout */
        body { background-color: white !important; margin: 0 !important; padding: 0 !important; }
        .min-h-full { display: block !important; }
        main { padding: 0 !important; margin: 0 !important; display: block !important; width: 100% !important; overflow: visible !important; }
        .p-8, .p-10 { padding: 0 !important; }
        .space-y-8 > :not(:first-child) { margin-top: 2rem !important; }
        
        /* Document Styling */
        .bg-white { border: 0 !important; shadow: none !important; }
        .bg-slate-50 { background-color: #f8fafc !important; -webkit-print-color-adjust: exact; }
        .rounded-3xl, .rounded-xl, .rounded-2xl { border-radius: 0 !important; }
        
        /* Photo Size Control for Print */
        .lg\:w-48 { width: 120px !important; }
        
        @page { 
            margin: 1cm;
            size: auto;
        }

        /* Ensure Table visibility */
        table { border-collapse: collapse !important; width: 100% !important; }
        td { border: 1px solid #e2e8f0 !important; }
        .bg-slate-100\/30 { background-color: #f1f5f9 !important; -webkit-print-color-adjust: exact; }
    }
</style>
@endsection