@extends('layouts.app')

@section('title', 'Add Corporate Employee')

@section('content')
<div class="max-w-2xl mx-auto space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-bold text-slate-900 dark:text-white">Add Corporate Client Employee</h1>
            <p class="text-xs text-slate-500">Corporate client employee profile linked to sponsoring corporate company.</p>
        </div>
        <a href="{{ route('app.corporate.employees.index') }}" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-semibold text-xs rounded-xl">Cancel</a>
    </div>

    <form action="{{ route('app.corporate.employees.store') }}" method="POST" 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">
        @csrf

        <div>
            <label class="block font-semibold mb-1">Corporate Client Company *</label>
            <select name="company_id" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-bold">
                @foreach($companies as $company)
                    <option value="{{ $company->id }}" @selected(old('company_id',request('company_id'))==$company->id)>{{ $company->name_en }} ({{ $company->company_code }})</option>
                @endforeach
            </select>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block font-semibold mb-1">Full Employee Name *</label>
                <input type="text" name="full_name" required placeholder="Vikram Sharma" 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">Nationality</label>
                <input type="text" name="nationality" value="Indian" 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>

        <div class="grid grid-cols-2 gap-4">
            <label class="font-semibold">UID<input name="uid" value="{{ old('uid') }}" class="erp-input mt-1"></label>
            <label class="font-semibold">Visa file number<input name="visa_file_number" value="{{ old('visa_file_number') }}" class="erp-input mt-1"></label>
            <label class="font-semibold">Mobile<input name="mobile" value="{{ old('mobile') }}" class="erp-input mt-1"></label>
            <label class="font-semibold">Email<input type="email" name="email" value="{{ old('email') }}" class="erp-input mt-1"></label>
            <label class="font-semibold">Designation<input name="designation" value="{{ old('designation') }}" class="erp-input mt-1"></label>
            <label class="font-semibold">Department<input name="department" value="{{ old('department') }}" class="erp-input mt-1"></label>
            <label class="font-semibold">Sponsor name<input name="sponsor_name" value="{{ old('sponsor_name') }}" class="erp-input mt-1"></label>
            <label class="font-semibold">Sponsor type<input name="sponsor_type" value="{{ old('sponsor_type') }}" class="erp-input mt-1"></label>
        </div>
        <label class="flex items-center gap-2 rounded-xl bg-amber-50 p-3 text-amber-900"><input type="checkbox" name="confirm_duplicate" value="1">I reviewed matching passport, EID, UID and visa file records and confirm a separate employee.</label>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block font-semibold mb-1">Passport Number</label>
                <input type="text" name="passport_number" placeholder="M8765432" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-mono uppercase">
            </div>
            <div>
                <label class="block font-semibold mb-1">Emirates ID (784-...)</label>
                <input type="text" name="emirates_id" placeholder="784-1988-7654321-1" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-mono">
            </div>
        </div>

        <div class="flex justify-end pt-4">
            <button type="submit" class="px-6 py-2.5 bg-sky-600 hover:bg-sky-700 text-white font-bold rounded-xl shadow-sm">Save Corporate Employee</button>
        </div>
    </form>
</div>
@endsection