@extends('admin.layouts.app')

@section('content')
<div class="bg-gray-100 min-h-[calc(100vh-130px)] p-4 flex flex-col">
    <div class="bg-white shadow-sm flex-1 border border-gray-200">
        
        <!-- Header -->
        <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  mb-4">
            <i class="fa-solid fa-list mr-2"></i> Add/Edit Employee pay setup Details
        </div>

        <form action="{{ route('employees.storeSalarySetup', $employee->id) }}" method="POST" class="px-6 pb-6">
            @csrf

            <!-- Employee Salary Details Section -->
            <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  .5 mb-4">
                Employee Salary Details
                <div class="ml-6 flex items-center space-x-4 text-sm font-normal">
                    <label class="flex items-center"><input type="checkbox" name="show_overtime" class="mr-1" {{ ($salarySetup && $salarySetup->show_overtime) ? 'checked' : '' }}> Show overtime</label>
                    <label class="flex items-center"><input type="checkbox" name="show_weekoff" class="mr-1" {{ ($salarySetup ? $salarySetup->show_weekoff : true) ? 'checked' : '' }}> Show Week-Off</label>
                </div>
            </div>

            <!-- Salary Structure -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
                <div>
                    <label class="block text-xs font-bold text-gray-700 mb-1">Salary Structure</label>
                    <select name="salary_structure" class="w-full border border-gray-300 px-2 py-1.5 text-sm bg-gray-50 focus:outline-none">
                        <option value="Monthly" {{ ($salarySetup && $salarySetup->salary_structure == 'Monthly') ? 'selected' : '' }}>Monthly</option>
                        <option value="daywise" {{ ($salarySetup && $salarySetup->salary_structure == 'Daywise') ? 'selected' : '' }}>Daywise</option>
                        <option value="hrs_based" {{ ($salarySetup && $salarySetup->salary_structure == 'Hrs Based') ? 'selected' : '' }}>Hrs Based</option>

                    </select>
                </div>
                <div>
                    <label class="block text-xs font-bold text-gray-700 mb-1">Salary Fix Amount or In Percentage</label>
                    <select name="salary_fix_amount" class="w-full border border-gray-300 px-2 py-1.5 text-sm bg-gray-50 focus:outline-none">
                        <option value="Fixed Amount" {{ ($salarySetup && $salarySetup->salary_fix_amount == 'Fixed Amount') ? 'selected' : '' }}>Fixed Amount In Salary Head</option>
                        <option value="Percentage Amount" {{ ($salarySetup && $salarySetup->salary_fix_amount == 'Percentage Amount') ? 'selected' : '' }}>Percentage Amount In Salary Head</option>

                    </select>
                </div>
            </div>

            <!-- Employee Details Grid -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                <!-- Row 1 -->
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1">Employee Code</label>
                    <input type="text" value="{{ $employee->employee_code }}" readonly class="w-full border border-gray-300 px-2 py-1.5 text-sm bg-gray-100 focus:outline-none">
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1">Employee Name</label>
                    <input type="text" value="{{ $employee->name }}" readonly class="w-full border border-gray-300 px-2 py-1.5 text-sm bg-gray-100 focus:outline-none">
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1">Father/Husband Name</label>
                    <input type="text" value="{{ $employee->father_name ?? '' }}" readonly class="w-full border border-gray-300 px-2 py-1.5 text-sm bg-gray-100 focus:outline-none">
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1">Department</label>
                    <input type="text" value="{{ $employee->department ? $employee->department->name : '' }}" readonly class="w-full border border-gray-300 px-2 py-1.5 text-sm bg-gray-100 focus:outline-none">
                </div>

                <!-- Row 2 -->
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1">Employee PF%</label>
                    <input type="text" name="emp_pf_percent" value="{{ $salarySetup->emp_pf_percent ?? ($company->pf_percent ?? '0.00') }}" class="w-full border border-gray-300 px-2 py-1.5 text-sm focus:outline-none">
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1">Employer PF%</label>
                    <input type="text" name="employer_pf_percent" value="{{ $salarySetup->employer_pf_percent ?? ($company->epf_percent ?? '0.00') }}" class="w-full border border-gray-300 px-2 py-1.5 text-sm focus:outline-none">
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1">Employer ESI%</label>
                    <input type="text" name="employer_esi_percent" value="{{ $salarySetup->employer_esi_percent ?? ($company->esi_percent ?? '0.00') }}" class="w-full border border-gray-300 px-2 py-1.5 text-sm focus:outline-none">
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1">Employee ESI%</label>
                    <input type="text" name="emp_esi_percent" value="{{ $salarySetup->emp_esi_percent ?? ($company->ppf_percent ?? '0.00') }}" class="w-full border border-gray-300 px-2 py-1.5 text-sm focus:outline-none">
                </div>

                <!-- Row 3 -->
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1">OT Rate</label>
                    <input type="text" name="ot_rate" value="{{ $salarySetup->ot_rate ?? '0.00' }}" class="w-full border border-gray-300 px-2 py-1.5 text-sm focus:outline-none">
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1">TDS Amount</label>
                    <input type="text" name="tds_amount" value="{{ $salarySetup->tds_amount ?? '0.00' }}" class="w-full border border-gray-300 px-2 py-1.5 text-sm focus:outline-none">
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1">TDS %</label>
                    <input type="text" name="tds_percent" value="{{ $salarySetup->tds_percent ?? '0.00' }}" class="w-full border border-gray-300 px-2 py-1.5 text-sm focus:outline-none">
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1 flex items-center"><input type="checkbox" name="pf_on_limit" class="mr-1" {{ ($salarySetup && $salarySetup->pf_on_limit) ? 'checked' : '' }}> PF%(On Limit)</label>
                    <input type="text" name="pf_limit_amount" value="{{ $salarySetup->pf_limit_amount ?? '0.00' }}" class="w-full border border-gray-300 px-2 py-1.5 text-sm focus:outline-none mt-0.5">
                </div>

                <!-- Row 4 -->
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1">PFNo.</label>
                    <input type="text" name="pf_no" value="{{ $salarySetup->pf_no ?? ($company->pf_no ?? '0') }}" class="w-full border border-gray-300 px-2 py-1.5 text-sm focus:outline-none">
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-700 mb-1">ESI NO</label>
                    <input type="text" name="esi_no" value="{{ $salarySetup->esi_no ?? ($company->esi_no ?? '0') }}" class="w-full border border-gray-300 px-2 py-1.5 text-sm focus:outline-none">
                </div>
            </div>

            <!-- Addition Head Section -->
            <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  .5 mb-4">
                Addition Head
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-4 gap-x-8 gap-y-6 mb-8">
                @php
                    // Collect valid addition heads
                    $addition_heads = [];
                    for($i=1; $i<=10; $i++) {
                        $col = 'head'.$i;
                        if(!empty($company->$col)) {
                            $addition_heads[$i] = $company->$col;
                        }
                    }
                @endphp

                @foreach($addition_heads as $index => $head_name)
                    @php 
                        $addition_val = $salarySetup ? $salarySetup->{'addition_'.$index} : '0.00';
                        $is_esi_checked = $salarySetup ? $salarySetup->{'is_esi_'.$index} : ($index == 1);
                        $is_pf_checked = $salarySetup ? $salarySetup->{'is_pf_'.$index} : ($index == 1);
                        $is_ot_checked = $salarySetup ? $salarySetup->{'is_ot_'.$index} : ($index == 1);
                    @endphp
                    <div class="{{ $index >= 9 ? 'md:col-start-'.(($index-9)*2+3) : '' }}">
                        <label class="block text-[11px] font-bold text-gray-700 mb-1">{{ $head_name }}</label>
                        <input type="text" name="addition_{{ $index }}" value="{{ $addition_val }}" class="w-full border border-gray-300 px-2 py-1.5 text-sm focus:outline-none {{ $index >= 9 ? 'bg-gray-100' : '' }}">
                        
                        @if($index < 9)
                        <div class="flex items-center space-x-2 mt-2 text-[11px]">
                            <label class="flex items-center cursor-pointer text-[#d84315] font-bold"><input type="checkbox" name="is_esi_{{ $index }}" class="mr-1 accent-[#ff9800]" {{ $is_esi_checked ? 'checked' : '' }}>IS ESI</label>
                            <label class="flex items-center cursor-pointer text-[#d84315] font-bold"><input type="checkbox" name="is_pf_{{ $index }}" class="mr-1 accent-[#ff9800]" {{ $is_pf_checked ? 'checked' : '' }}>IS PF</label>
                            <label class="flex items-center cursor-pointer text-[#d84315] font-bold"><input type="checkbox" name="is_ot_{{ $index }}" class="mr-1 accent-[#ff9800]" {{ $is_ot_checked ? 'checked' : '' }}>IS OT</label>
                        </div>
                        @endif
                    </div>
                @endforeach
            </div>

            <!-- Fixed Deduction Head Section -->
            <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  .5 mb-2">
                Fixed Deduction Head
            </div>
            <div class="bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  .5 font-semibold mb-4 opacity-90">
                Fixed Deduction Head
            </div>

            <div class="grid grid-cols-1 md:grid-cols-4 gap-x-8 gap-y-6 mb-8">
                @php
                    // Collect valid fixed deduction heads
                    $fixed_deduction_heads = [];
                    for($i=1; $i<=5; $i++) {
                        $col = 'deduction_head'.$i;
                        if(!empty($company->$col)) {
                            $fixed_deduction_heads[$i] = $company->$col;
                        }
                    }
                @endphp

                @foreach($fixed_deduction_heads as $index => $head_name)
                    @php 
                        $fixed_deduction_val = $salarySetup ? $salarySetup->{'fixed_deduction_'.$index} : '0.00';
                    @endphp
                    <div class="md:col-start-{{ ($index % 2 == 1) ? '3' : '4' }}">
                        <label class="block text-[11px] font-bold text-gray-700 mb-1">{{ $head_name }}</label>
                        <input type="text" name="fixed_deduction_{{ $index }}" value="{{ $fixed_deduction_val }}" class="w-full border border-gray-300 px-2 py-1.5 text-sm bg-gray-100 focus:outline-none">
                    </div>
                @endforeach
            </div>

            <!-- Define Deduction Heads Section (Requested by user) -->
            @php
                // Collect valid define deduction heads
                $define_deduction_heads = [];
                for($i=1; $i<=5; $i++) {
                    $col = 'ded_head'.$i;
                    if(!empty($company->$col)) {
                        $define_deduction_heads[$i] = $company->$col;
                    }
                }
            @endphp
            
            @if(count($define_deduction_heads) > 0)
            <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  .5 mb-4">
                Define Deduction Heads
            </div>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-x-8 gap-y-6 mb-8">
                @foreach($define_deduction_heads as $index => $head_name)
                    @php 
                        $define_deduction_val = $salarySetup ? $salarySetup->{'define_deduction_'.$index} : '0.00';
                    @endphp
                    <div>
                        <label class="block text-[11px] font-bold text-gray-700 mb-1">{{ $head_name }}</label>
                        <input type="text" name="define_deduction_{{ $index }}" value="{{ $define_deduction_val }}" class="w-full border border-gray-300 px-2 py-1.5 text-sm focus:outline-none">
                    </div>
                @endforeach
            </div>
            @endif

            <!-- Action Buttons -->
            <div class="flex justify-center space-x-4 pt-6 border-t border-gray-100">
                <button type="submit" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-6 py-1.5 shadow text-sm font-semibold">Save</button>
                <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-1.5 shadow text-sm font-semibold">Delete</button>
                <a href="{{ route('employees.index') }}" class="bg-[#dc3545] hover:bg-[#c82333] text-white px-6 py-1.5 shadow text-sm font-semibold">Cancel</a>
            </div>

        </form>
    </div>
</div>
@endsection