@extends('layouts.branch')

@section('title', 'Add Employee')
@section('header', 'Register New Employee')
 
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<style>
    .ts-control { border-radius: 0.5rem !important; padding: 0.5rem 1rem !important; border-color: #e2e8f0 !important; background-color: #fff !important; font-weight: 500 !important; }
    .ts-dropdown { border-radius: 0.75rem !important; padding: 0.5rem !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1) !important; }
    .ts-control .item { background: #f1f5f9 !important; border-radius: 4px !important; color: #1e293b !important; }
    .focus .ts-control { border-color: #6366f1 !important; ring: 2px #6366f1 !important; }
</style>
@endpush

@section('content')
<div class="space-y-6">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Employees', 'url' => route('branch.employees.index')],
            ['name' => 'Create', 'url' => route('branch.employees.create')]
        ]
    ])

    <div class="max-w-4xl mx-auto pb-20" x-data="{ 
        activeTab: 'personal',
        type: '{{ old('type', 'non-clinical') }}',
        docs: [
            @if(old('docs'))
                @foreach(old('docs') as $index => $doc)
                    { type: '{{ $doc['type'] }}', number: '{{ $doc['number'] }}' },
                @endforeach
            @else
                { type: '', number: '' }
            @endif
        ],
        addDoc() {
            this.docs.push({ type: '', number: '' });
        },
        removeDoc(index) {
            this.docs.splice(index, 1);
            if (this.docs.length === 0) this.addDoc();
        }
    }">
        <form action="{{ route('branch.employees.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
            @csrf

            @if($errors->any())
            <div class="p-6 bg-rose-50 border border-rose-100 rounded-xl animate-in fade-in slide-in-from-top-4 duration-500">
                <div class="flex items-center gap-3 mb-4">
                    <div class="h-8 w-8 bg-rose-500 rounded-lg flex items-center justify-center text-white shadow-lg shadow-rose-100">
                        <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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-rose-800 uppercase tracking-tight">Registration Errors</h3>
                        <p class="text-[10px] text-rose-500 font-bold uppercase tracking-widest">Please correct the following issues to continue</p>
                    </div>
                </div>
                <ul class="space-y-1 ml-11">
                    @foreach($errors->all() as $error)
                        <li class="text-[11px] font-bold text-rose-600 uppercase tracking-wider flex items-center gap-2">
                            <span class="h-1 w-1 bg-rose-400 rounded-full"></span>
                            {{ $error }}
                        </li>
                    @endforeach
                </ul>
            </div>
            @endif

            <!-- Tabs Navigation -->
            <div class="flex items-center gap-1 p-1 bg-slate-100 rounded-xl">
                <button type="button" @click="activeTab = 'personal'" :class="activeTab === 'personal' ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'" 
                    class="flex-1 px-4 py-2.5 rounded-lg font-bold text-xs uppercase tracking-widest transition-all">
                    Personal Details
                </button>
                <button type="button" @click="activeTab = 'duty'" :class="activeTab === 'duty' ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'" 
                    class="flex-1 px-4 py-2.5 rounded-lg font-bold text-xs uppercase tracking-widest transition-all">
                    Duty & Shifts
                </button>
                <button type="button" @click="activeTab = 'kyc'" :class="activeTab === 'kyc' ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'" 
                    class="flex-1 px-4 py-2.5 rounded-lg font-bold text-xs uppercase tracking-widest transition-all">
                    KYC & Financial
                </button>
            </div>

            <!-- Tab 1: Personal Details -->
            <div x-show="activeTab === 'personal'" class="animate-in fade-in duration-500 space-y-6">
                
                <!-- Photo Booth Section -->
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden" x-data="photoBooth()">
                    <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                        <h3 class="text-lg font-semibold text-slate-800">Profile Photography</h3>
                        <p class="text-sm text-slate-500">Capture or upload employee profile picture.</p>
                    </div>
                    <div class="p-6">
                        <div class="flex flex-col md:flex-row gap-8 items-center">
                            <div class="relative group">
                                <div class="h-40 w-40 rounded-2xl bg-slate-50 overflow-hidden border-2 border-slate-100 shadow-inner flex items-center justify-center">
                                    <template x-if="!photoPreview">
                                        <svg class="h-16 w-16 text-slate-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>
                                    </template>
                                    <img x-show="photoPreview" :src="photoPreview" class="h-full w-full object-cover">
                                    
                                    <div x-show="streamActive" class="absolute inset-0 z-10">
                                        <video x-ref="video" autoplay playsinline class="h-full w-full object-cover"></video>
                                    </div>
                                </div>
                                
                                <button type="button" @click="toggleCamera()" class="absolute -bottom-2 -right-2 h-10 w-10 bg-slate-900 text-white rounded-xl flex items-center justify-center hover:bg-indigo-600 transition-all shadow-lg">
                                    <svg x-show="!streamActive" 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="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                    <svg x-show="streamActive" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>

                            <div class="flex-1 space-y-4">
                                <div class="flex flex-wrap gap-3">
                                    <label class="cursor-pointer bg-white px-4 py-2 border border-slate-200 rounded-lg text-xs font-bold uppercase tracking-widest text-slate-600 hover:border-indigo-600 hover:text-indigo-600 transition-all shadow-sm">
                                        <span>Upload Photo</span>
                                        <input type="file" name="photo" class="hidden" @change="handleFileUpload($event)" accept="image/*">
                                    </label>
                                    
                                    <button type="button" x-show="streamActive" @click="capturePhoto()" class="bg-indigo-600 text-white px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest hover:bg-indigo-700 transition-all shadow-md">
                                        Take Snapshot
                                    </button>
                                    
                                    <button type="button" x-show="photoPreview" @click="resetPhoto()" class="text-xs font-bold uppercase tracking-widest text-rose-500 hover:text-rose-700 ml-2">
                                        Reset
                                    </button>
                                </div>
                                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Supports JPG, PNG (Max 5MB). Use camera for instant capture.</p>
                                <input type="hidden" name="captured_photo" :value="capturedPhoto">
                                <canvas x-ref="canvas" style="display:none;" width="640" height="480"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                        <h3 class="text-lg font-semibold text-slate-800">Basic Information</h3>
                        <p class="text-sm text-slate-500">Core identity and personal details e.g. role, email and name.</p>
                    </div>
                    
                    <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="space-y-2">
                            <label class="block text-[10px] font-black text-indigo-600 uppercase tracking-widest">Employee ID (Auto-Generated)</label>
                            <input type="text" name="employee_id" value="{{ old('employee_id', $employeeIdPreview) }}" readonly 
                                class="w-full px-4 py-3 bg-indigo-50/30 border border-indigo-100 rounded-lg font-black text-indigo-700 tracking-widest focus:ring-0 uppercase">
                        </div>

                        <div class="space-y-2 md:col-span-2">
                            <label class="block text-sm font-medium text-slate-700">Employee Category <span class="text-rose-500">*</span></label>
                            <div class="grid grid-cols-2 gap-4">
                                <label class="relative group cursor-pointer">
                                    <input type="radio" name="type" value="clinical" x-model="type" class="peer sr-only">
                                    <div class="p-4 bg-white border border-slate-200 rounded-xl transition-all text-center"
                                        :class="type === 'clinical' ? 'border-emerald-500 bg-emerald-50 shadow-sm' : 'hover:border-slate-300'">
                                        <span class="block text-xs font-bold uppercase"
                                            :class="type === 'clinical' ? 'text-emerald-700' : 'text-slate-600'">Clinical</span>
                                    </div>
                                </label>
                                <label class="relative group cursor-pointer">
                                    <input type="radio" name="type" value="non-clinical" x-model="type" class="peer sr-only">
                                    <div class="p-4 bg-white border border-slate-200 rounded-xl transition-all text-center"
                                        :class="type === 'non-clinical' ? 'border-amber-500 bg-amber-50 shadow-sm' : 'hover:border-slate-300'">
                                        <span class="block text-xs font-bold uppercase"
                                            :class="type === 'non-clinical' ? 'text-amber-700' : 'text-slate-600'">Non-Clinical</span>
                                    </div>
                                </label>
                            </div>
                            @error('type') <p class="text-[10px] text-rose-500 font-bold mt-1 uppercase tracking-widest">{{ $message }}</p> @enderror
                        </div>

                        <div class="space-y-2">
                            <label for="full_name" class="block text-sm font-medium text-slate-700">Full Name <span class="text-rose-500">*</span></label>
                            <input type="text" id="full_name" name="full_name" value="{{ old('full_name') }}" required 
                                class="w-full px-4 py-2 border @error('full_name') border-rose-300 bg-rose-50/30 @else border-slate-200 @enderror rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all font-medium placeholder:text-slate-400" placeholder="e.g. John Doe">
                            @error('full_name') <p class="text-[10px] text-rose-500 font-bold mt-1 uppercase tracking-widest">{{ $message }}</p> @enderror
                        </div>

                        <div class="space-y-2">
                            <label for="role" class="block text-sm font-medium text-slate-700">Designated Role <span class="text-rose-500">*</span></label>
                            <select id="role" name="role" required class="tom-select-ajax">
                                <option value="">Search Hospital Role...</option>
                                @if(old('role'))
                                    <option value="{{ old('role') }}" selected>{{ old('role') }}</option>
                                @endif
                            </select>
                            @error('role') <p class="text-[10px] text-rose-500 font-bold mt-1 uppercase tracking-widest">{{ $message }}</p> @enderror
                        </div>

                        <div class="space-y-2">
                            <label for="email" class="block text-sm font-medium text-slate-700">Email Address</label>
                            <input type="email" id="email" name="email" value="{{ old('email') }}" 
                                class="w-full px-4 py-2 border @error('email') border-rose-300 @else border-slate-200 @enderror rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all font-medium placeholder:text-slate-400" placeholder="e.g. employee@hospital.com">
                            @error('email') <p class="text-[10px] text-rose-500 font-bold mt-1 uppercase tracking-widest">{{ $message }}</p> @enderror
                        </div>

                        <div class="space-y-2">
                            <label for="dob" class="block text-sm font-medium text-slate-700">Date of Birth</label>
                            <input type="date" id="dob" name="dob" value="{{ old('dob') }}"
                                class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all font-medium">
                        </div>

                        <div class="space-y-2">
                            <label for="gender" class="block text-sm font-medium text-slate-700">Gender</label>
                            <select id="gender" name="gender" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
                                <option value="">Select Gender</option>
                                <option value="Male" {{ old('gender') === 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ old('gender') === 'Female' ? 'selected' : '' }}>Female</option>
                                <option value="Other" {{ old('gender') === 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>

                        <div class="space-y-2">
                            <label for="blood_group" class="block text-sm font-medium text-slate-700">Blood Group</label>
                            <select id="blood_group" name="blood_group" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
                                <option value="">Select Blood Group</option>
                                @foreach(['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-'] as $bg)
                                    <option value="{{ $bg }}" {{ old('blood_group') === $bg ? 'selected' : '' }}>{{ $bg }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="space-y-2">
                            <label for="next_of_kin_phone" class="block text-sm font-medium text-slate-700">Emergency Contact (Next of Kin)</label>
                            <input type="text" id="next_of_kin_phone" name="next_of_kin_phone" value="{{ old('next_of_kin_phone') }}" 
                                class="w-full px-4 py-2 border @error('next_of_kin_phone') border-rose-300 @else border-slate-200 @enderror rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none font-medium" placeholder="+91 00000 00000">
                            @error('next_of_kin_phone') <p class="text-[10px] text-rose-500 font-bold mt-1 uppercase tracking-widest">{{ $message }}</p> @enderror
                        </div>

                        <div class="space-y-2 md:col-span-2">
                            <label for="current_address" class="block text-sm font-medium text-slate-700">Current Address</label>
                            <textarea id="current_address" name="current_address" rows="3" 
                                class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all font-medium" placeholder="Street, City, State..."></textarea>
                        </div>
                        <div class="space-y-2 md:col-span-2">
                            <label for="permanent_address" class="block text-sm font-medium text-slate-700">Permanent Address</label>
                            <textarea id="permanent_address" name="permanent_address" rows="3" 
                                class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all font-medium" placeholder="Same as current?"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab 2: Duty & Shifts -->
            <div x-show="activeTab === 'duty'" class="animate-in fade-in duration-500">
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                        <h3 class="text-lg font-semibold text-slate-800">Shift & Duty Management</h3>
                        <p class="text-sm text-slate-500">Operational timings and benefits.</p>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label for="shift_type" class="block text-sm font-medium text-slate-700">Shift Assignment</label>
                            <select id="shift_type" name="shift_type" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
                                <option value="">Select Shift</option>
                                @foreach(['Morning', 'Evening', 'Night', 'General'] as $shift)
                                    <option value="{{ $shift }}" {{ old('shift_type') === $shift ? 'selected' : '' }}>{{ $shift }} Shift</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="space-y-2">
                            <label for="weekly_off" class="block text-sm font-medium text-slate-700">Weekly Off Day</label>
                            <select id="weekly_off" name="weekly_off" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
                                <option value="">Select Day</option>
                                @foreach(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] as $day)
                                    <option value="{{ $day }}" {{ old('weekly_off') === $day ? 'selected' : '' }}>{{ $day }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="md:col-span-2">
                            <label class="flex items-center justify-between p-4 bg-slate-50 rounded-xl border border-slate-200 cursor-pointer group hover:bg-white transition-all">
                                <div>
                                    <p class="text-sm font-bold text-slate-700 uppercase tracking-widest">OT Eligibility</p>
                                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Eligible for overtime compensation tracking.</p>
                                </div>
                                <div class="relative">
                                    <input type="checkbox" name="ot_eligibility" value="1" {{ old('ot_eligibility') ? 'checked' : '' }} class="peer sr-only">
                                    <div class="w-12 h-6 bg-slate-200 rounded-full transition-all peer-checked:bg-emerald-500 after:absolute after:top-1 after:left-1 after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-6"></div>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab 3: KYC & Financial -->
            <div x-show="activeTab === 'kyc'" class="animate-in fade-in duration-500">
                <div class="space-y-6">
                    <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
                        <div class="p-6 border-b border-slate-200 bg-slate-50/50 flex items-center justify-between">
                            <div>
                                <h3 class="text-lg font-semibold text-slate-800">Identity Documents</h3>
                                <p class="text-sm text-slate-500">Attach multiple government IDs.</p>
                            </div>
                            <button type="button" @click="addDoc()" class="inline-flex items-center px-3 py-1.5 bg-indigo-50 text-indigo-700 rounded-lg text-[10px] font-black uppercase tracking-widest hover:bg-indigo-100 transition-all border border-indigo-100">
                                <svg class="h-3 w-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
                                Add Document
                            </button>
                        </div>
                        <div class="p-6 space-y-4">
                            <template x-for="(doc, index) in docs" :key="index">
                                <div class="p-4 bg-slate-50/50 border border-slate-100 rounded-xl relative group animate-in zoom-in-95 duration-200">
                                    <button type="button" @click="removeDoc(index)" class="absolute -top-2 -right-2 h-6 w-6 bg-rose-500 text-white rounded-full flex items-center justify-center shadow-lg opacity-0 group-hover:opacity-100 transition-all hover:bg-rose-600 z-10">
                                        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
                                    </button>
                                    
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <div class="space-y-1.5">
                                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">Document Type</label>
                                            <select :name="`docs[${index}][type]`" x-model="doc.type" class="w-full px-3 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
                                                <option value="">Select ID Type</option>
                                                <option value="Aadhar">Aadhar Card</option>
                                                <option value="PAN">PAN Card</option>
                                                <option value="Voter ID">Voter ID</option>
                                                <option value="Passport">Passport</option>
                                                <option value="Driving License">Driving License</option>
                                                <option value="Other">Other</option>
                                            </select>
                                        </div>
                                        <div class="space-y-1.5">
                                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">ID Number</label>
                                            <input type="text" :name="`docs[${index}][number]`" x-model="doc.number" class="w-full px-3 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition-all" placeholder="Enter ID number">
                                        </div>
                                        <div class="space-y-1.5">
                                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">Attachment</label>
                                            <input type="file" :name="`docs[${index}][file]`" class="w-full px-3 py-1.5 bg-white border border-slate-200 rounded-lg text-[10px] text-slate-500 file:mr-3 file:py-0.5 file:px-2 file:rounded file:border-0 file:text-[10px] file:font-bold file:bg-slate-100 file:text-slate-600 hover:file:bg-slate-200 transition-all">
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
                        <div class="p-6 border-b border-slate-200 bg-slate-50/50">
                            <h3 class="text-lg font-semibold text-slate-800">Bank Financial Details</h3>
                            <p class="text-sm text-slate-500">Salary transfer information.</p>
                        </div>
                        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-2">
                                <label for="bank_name" class="block text-sm font-medium text-slate-700">Bank Name</label>
                                <input type="text" id="bank_name" name="bank_name" value="{{ old('bank_name') }}" 
                                    class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" placeholder="e.g. HDFC Bank">
                            </div>
                            <div class="space-y-2">
                                <label for="bank_account_no" class="block text-sm font-medium text-slate-700">Account Number</label>
                                <input type="text" id="bank_account_no" name="bank_account_no" value="{{ old('bank_account_no') }}" 
                                    class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" placeholder="1234 5678 9012">
                            </div>
                            <div class="space-y-2">
                                <label for="bank_ifsc" class="block text-sm font-medium text-slate-700">IFSC Code</label>
                                <input type="text" id="bank_ifsc" name="bank_ifsc" value="{{ old('bank_ifsc') }}" 
                                    class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none uppercase" placeholder="HDFC0001234">
                            </div>
                            <div class="space-y-2">
                                <label for="bank_branch" class="block text-sm font-medium text-slate-700">Bank Branch</label>
                                <input type="text" id="bank_branch" name="bank_branch" value="{{ old('bank_branch') }}" 
                                    class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none uppercase" placeholder="e.g. Downtown Branch">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Actions Footer -->
            <div class="flex items-center justify-end gap-3 pt-6 border-t border-slate-100">
                <a href="{{ route('branch.employees.index') }}" class="px-6 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg transition-colors">
                    Cancel
                </a>
                <button type="submit" class="px-6 py-2.5 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors shadow-sm shadow-indigo-200">
                    Register Employee
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.tom-select-ajax').forEach((el) => {
            new TomSelect(el, {
                valueField: 'name',
                labelField: 'name',
                searchField: 'name',
                load: function(query, callback) {
                    var url = '{{ route("branch.employees.roles.search") }}?q=' + encodeURIComponent(query);
                    fetch(url)
                        .then(response => response.json())
                        .then(json => {
                            callback(json);
                        }).catch(()=> {
                            callback();
                        });
                },
                render: {
                    option: function(item, escape) {
                        return '<div class="py-2 px-3 border-b border-slate-50 hover:bg-indigo-50 transition-colors">' +
                            '<div class="font-bold text-slate-700 uppercase tracking-tight">' + escape(item.name) + '</div>' +
                            '</div>';
                    },
                    item: function(item, escape) {
                        return '<div class="font-bold text-indigo-600 uppercase tracking-widest text-[10px]">' + escape(item.name) + '</div>';
                    }
                },
                placeholder: 'Type to search roles...',
                maxOptions: 10,
            });
        });
    });

    function photoBooth() {
        return {
            streamActive: false,
            photoPreview: null,
            capturedPhoto: '',
            stream: null,

            async toggleCamera() {
                if (this.streamActive) {
                    this.stopCamera();
                } else {
                    try {
                        this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
                        this.$refs.video.srcObject = this.stream;
                        this.streamActive = true;
                    } catch (err) {
                        alert('Could not access camera: ' + err.message);
                    }
                }
            },

            stopCamera() {
                if (this.stream) {
                    this.stream.getTracks().forEach(track => track.stop());
                }
                this.streamActive = false;
            },

            capturePhoto() {
                const video = this.$refs.video;
                const canvas = this.$refs.canvas;
                const context = canvas.getContext('2d');
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
                
                this.photoPreview = canvas.toDataURL('image/jpeg');
                this.capturedPhoto = this.photoPreview;
                this.stopCamera();
            },

            handleFileUpload(e) {
                const file = e.target.files[0];
                if (!file) return;
                
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.photoPreview = e.target.result;
                    this.capturedPhoto = '';
                };
                reader.readAsDataURL(file);
                if (this.streamActive) this.stopCamera();
            },

            resetPhoto() {
                this.photoPreview = null;
                this.capturedPhoto = '';
                if (this.streamActive) this.stopCamera();
            }
        }
    }
</script>
@endpush