@extends('layouts.app')
@section('title', isset($employee) ? 'Edit Employee' : 'Add Employee')
@section('page-title', isset($employee) ? 'Edit Employee' : 'Add Employee')

@section('content')
<form method="POST"
      action="{{ isset($employee) ? route('expenses.employees.update', $employee) : route('expenses.employees.store') }}"
      x-data="{
          basic: {{ old('basic_salary', $employee->basic_salary ?? 0) }},
          hra: {{ old('hra', $employee->hra ?? 0) }},
          other: {{ old('other_allowances', $employee->other_allowances ?? 0) }},
          get gross() { return parseFloat(this.basic||0) + parseFloat(this.hra||0) + parseFloat(this.other||0); },
          get pfEmp() { return Math.min(parseFloat(this.basic||0)*0.12, 1800).toFixed(2); },
          get esiEmp() { return this.gross <= 21000 ? (this.gross*0.0075).toFixed(2) : '0.00'; },
          get net() { return (this.gross - parseFloat(this.pfEmp) - parseFloat(this.esiEmp)).toFixed(2); }
      }">
    @csrf
    @if(isset($employee)) @method('PUT') @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-5">

            {{-- Personal Info --}}
            <div class="card">
                <h2 class="text-sm font-bold text-slate-700 mb-4 pb-2 border-b border-slate-100">Personal Information</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <label class="form-label">Full Name <span class="text-red-500">*</span></label>
                        <input type="text" name="name" value="{{ old('name', $employee->name ?? '') }}"
                               class="form-input" required placeholder="Employee full name">
                        @error('name')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="form-label">Email</label>
                        <input type="email" name="email" value="{{ old('email', $employee->email ?? '') }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" value="{{ old('phone', $employee->phone ?? '') }}" class="form-input" placeholder="+91 9876543210">
                    </div>
                    <div>
                        <label class="form-label">Designation</label>
                        <input type="text" name="designation" value="{{ old('designation', $employee->designation ?? '') }}" class="form-input" placeholder="Manager, Chef, etc.">
                    </div>
                    <div>
                        <label class="form-label">Department</label>
                        <select name="department" class="form-input">
                            <option value="">— Select —</option>
                            @foreach($departments as $dept)
                            <option value="{{ $dept }}" {{ old('department', $employee->department ?? '') === $dept ? 'selected' : '' }}>{{ $dept }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Employment Type <span class="text-red-500">*</span></label>
                        <select name="employment_type" class="form-input" required>
                            @foreach(['full_time'=>'Full Time','part_time'=>'Part Time','contract'=>'Contract','intern'=>'Intern'] as $val=>$label)
                            <option value="{{ $val }}" {{ old('employment_type', $employee->employment_type ?? 'full_time') === $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Date of Joining <span class="text-red-500">*</span></label>
                        <input type="date" name="joining_date"
                               value="{{ old('joining_date', isset($employee) ? \Carbon\Carbon::parse($employee->joining_date)->format('Y-m-d') : today()->format('Y-m-d')) }}"
                               class="form-input" required>
                    </div>
                    <div>
                        <label class="form-label">PAN Number</label>
                        <input type="text" name="pan" value="{{ old('pan', $employee->pan ?? '') }}" class="form-input font-mono uppercase" placeholder="ABCDE1234F" maxlength="10">
                    </div>
                    <div>
                        <label class="form-label">Aadhar Number</label>
                        <input type="text" name="aadhar" value="{{ old('aadhar', $employee->aadhar ?? '') }}" class="form-input" placeholder="12-digit Aadhar" maxlength="12">
                    </div>
                </div>
            </div>

            {{-- Salary --}}
            <div class="card">
                <h2 class="text-sm font-bold text-slate-700 mb-4 pb-2 border-b border-slate-100">Salary & CTC</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="form-label">Basic Salary (₹) <span class="text-red-500">*</span></label>
                        <input type="number" name="basic_salary" step="0.01" min="0"
                               value="{{ old('basic_salary', $employee->basic_salary ?? 0) }}"
                               class="form-input" x-model="basic" @input="basic=$event.target.value" required>
                    </div>
                    <div>
                        <label class="form-label">HRA (₹)</label>
                        <input type="number" name="hra" step="0.01" min="0"
                               value="{{ old('hra', $employee->hra ?? 0) }}"
                               class="form-input" x-model="hra" @input="hra=$event.target.value">
                    </div>
                    <div>
                        <label class="form-label">Other Allowances (₹)</label>
                        <input type="number" name="other_allowances" step="0.01" min="0"
                               value="{{ old('other_allowances', $employee->other_allowances ?? 0) }}"
                               class="form-input" x-model="other" @input="other=$event.target.value">
                    </div>
                </div>

                {{-- Live CTC Breakdown --}}
                <div class="mt-4 bg-slate-50 rounded-xl p-4 text-sm">
                    <h3 class="font-semibold text-slate-700 mb-3 text-xs uppercase tracking-wide">Auto-Calculated CTC Breakdown</h3>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        <div class="bg-white rounded-lg p-3 text-center">
                            <p class="text-xs text-slate-400">Gross Salary</p>
                            <p class="font-bold text-slate-800 text-base" x-text="'₹'+parseFloat(gross).toFixed(2)"></p>
                        </div>
                        <div class="bg-white rounded-lg p-3 text-center">
                            <p class="text-xs text-slate-400">PF (Employee 12%)</p>
                            <p class="font-semibold text-orange-600" x-text="'₹'+pfEmp"></p>
                        </div>
                        <div class="bg-white rounded-lg p-3 text-center">
                            <p class="text-xs text-slate-400">ESI (Employee 0.75%)</p>
                            <p class="font-semibold text-orange-600" x-text="'₹'+esiEmp"></p>
                            <p class="text-xs text-slate-400">(if gross ≤ ₹21,000)</p>
                        </div>
                        <div class="bg-green-50 rounded-lg p-3 text-center md:col-span-3">
                            <p class="text-xs text-slate-500">Net Take-Home</p>
                            <p class="font-bold text-green-700 text-xl" x-text="'₹'+net"></p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Bank Details --}}
            <div class="card">
                <h2 class="text-sm font-bold text-slate-700 mb-4 pb-2 border-b border-slate-100">Bank & Compliance</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="form-label">Bank Name</label>
                        <input type="text" name="bank_name" value="{{ old('bank_name', $employee->bank_name ?? '') }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">Account Number</label>
                        <input type="text" name="bank_account" value="{{ old('bank_account', $employee->bank_account ?? '') }}" class="form-input font-mono">
                    </div>
                    <div>
                        <label class="form-label">IFSC Code</label>
                        <input type="text" name="bank_ifsc" value="{{ old('bank_ifsc', $employee->bank_ifsc ?? '') }}" class="form-input font-mono uppercase" placeholder="SBIN0001234">
                    </div>
                    <div>
                        <label class="form-label">UAN Number (PF)</label>
                        <input type="text" name="uan_number" value="{{ old('uan_number', $employee->uan_number ?? '') }}" class="form-input font-mono" placeholder="12-digit UAN">
                    </div>
                </div>
            </div>
        </div>

        {{-- Right: Status --}}
        <div class="space-y-4">
            <div class="card">
                <h2 class="text-sm font-bold text-slate-700 mb-4 pb-2 border-b border-slate-100">Status</h2>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" value="1"
                           {{ old('is_active', $employee->is_active ?? true) ? 'checked' : '' }}
                           class="w-4 h-4 rounded border-slate-300 text-brand-600">
                    <span class="text-sm text-slate-700">Active Employee</span>
                </label>
            </div>

            <div class="flex flex-col gap-3">
                <button type="submit" class="btn-primary w-full justify-center">
                    {{ isset($employee) ? 'Update Employee' : 'Add Employee' }}
                </button>
                <a href="{{ route('expenses.employees') }}" class="btn-secondary w-full justify-center">Cancel</a>
            </div>
        </div>
    </div>
</form>
@endsection