@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 p-6">

            <form action="{{ route('company.store') }}" method="POST" class="max-w-6xl">
                @csrf

                <!-- Top Basic Fields matching screenshot -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                    <div>
                        <label class="block text-xs font-bold text-gray-700 mb-1">Company Name <span class="text-red-500">*</span></label>
                        <input type="text" name="company_name" value="{{ old('company_name') }}" placeholder="Company Name" required
                            class="w-full border border-gray-400 px-2 py-1.5 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                        @error('company_name')<span class="text-red-500 text-xs">{{ $message }}</span>@enderror
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-700 mb-1">Address <span class="text-red-500">*</span></label>
                        <input type="text" name="company_address" value="{{ old('company_address') }}" placeholder="Address" required
                            class="w-full border border-gray-400 px-2 py-1.5 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                        @error('company_address')<span class="text-red-500 text-xs">{{ $message }}</span>@enderror
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-700 mb-1">Email Id</label>
                        <input type="email" name="email" value="{{ old('email') }}" placeholder="Email Address"
                            class="w-full border border-gray-400 px-2 py-1.5 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                        @error('email')<span class="text-red-500 text-xs">{{ $message }}</span>@enderror
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4">
                    <div>
                        <label class="block text-xs font-bold text-gray-700 mb-1">Password <span class="text-red-500">*</span></label>
                        <input type="password" name="password" required placeholder="Enter Login Password"
                            class="w-full border border-gray-400 px-2 py-1.5 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                        @error('password')<span class="text-red-500 text-xs">{{ $message }}</span>@enderror
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-700 mb-1">Phone Number</label>
                        <input type="text" name="phone" value="{{ old('phone') }}" placeholder="Phone Number"
                            class="w-full border border-gray-400 px-2 py-1.5 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                        @error('phone')<span class="text-red-500 text-xs">{{ $message }}</span>@enderror
                    </div>
                </div>

                <!-- Advanced Company Details -->
                <h3 class="text-[#d84315] font-bold text-sm mt-4 mb-3">Advanced Company Details</h3>
                <div class="grid grid-cols-2 md:grid-cols-6 gap-3 mb-4">
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Registration Number</label>
                        <input type="text" name="registration_no" value="{{ old('registration_no') }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">PT Application OR Not</label>
                        <select name="pt_application" class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 bg-white text-gray-700">
                            <option value="No" {{ old('pt_application', 'No') == 'No' ? 'selected' : '' }}>No</option>
                            <option value="Yes" {{ old('pt_application') == 'Yes' ? 'selected' : '' }}>Yes</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Company PF.Reg.No</label>
                        <input type="text" name="pf_no" value="{{ old('pf_no') }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">ESI Limit Amount</label>
                        <input type="number" step="0.01" name="esi_limit_amount" value="{{ old('esi_limit_amount', '0.00') }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">GST No</label>
                        <input type="text" name="gst_no" value="{{ old('gst_no') }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Account No <span class="text-red-500">*</span></label>
                        <input type="text" name="account_no" value="{{ old('account_no') }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Company ESI Reg.No</label>
                        <input type="text" name="esi_no" value="{{ old('esi_no') }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Company PAN No <span class="text-red-500">*</span></label>
                        <input type="text" name="pancard_no" value="{{ old('pancard_no') }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Employee PF Share%</label>
                        <input type="text" name="pf_percent" value="{{ old('pf_percent', '0') }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Employer PF Share%</label>
                        <input type="text" name="epf_percent" value="{{ old('epf_percent', '0') }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Employer ESI Share%</label>
                        <input type="text" name="esi_percent" value="{{ old('esi_percent', '0') }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Employee ESI Share%</label>
                        <input type="text" name="ppf_percent" value="{{ old('ppf_percent', '0') }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                </div>

                <!-- Define Addition Heads -->
                <h3 class="text-[#d84315] font-bold text-sm mt-4 mb-3">Define Addition Heads</h3>
                <div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-4">
                    <!-- Head1 with default Basic -->
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Head1</label>
                        <input type="text" name="head1" value="{{ old('head1', 'Basic') }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    @for($i = 2; $i <= 8; $i++)
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Head{{ $i }}{{ $i == 8 ? ' (Fix)' : '' }}</label>
                        <input type="text" name="head{{ $i }}" value="{{ old('head' . $i) }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    @endfor
                    <!-- Head9 Fix - editable with placeholder hint -->
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Head9(Fix)</label>
                        <input type="text" name="head9" value="{{ old('head9', 'Bonus') }}" readonly
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 bg-gray-200 cursor-not-allowed">
                    </div>
                    <!-- Head10 Fix For Tour - editable with placeholder hint -->
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Head10(Fix For Tour)</label>
                        <input type="text" name="head10" value="{{ old('head10', 'Conveyance') }}" readonly
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 bg-gray-200 cursor-not-allowed">
                    </div>
                </div>

                <!-- Fixed Deduction Heads - 5 heads, all editable -->
                <h3 class="text-[#d84315] font-bold text-sm mt-4 mb-3">Fixed Deduction Heads</h3>
                <div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-4">
                    @for($i = 1; $i <= 3; $i++)
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Head{{ $i }}</label>
                        <input type="text" name="deduction_head{{ $i }}" value="{{ old('deduction_head' . $i) }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    @endfor
                    <!-- Head4 = PT default, editable -->
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Head4</label>
                        <input type="text" name="deduction_head4" value="{{ old('deduction_head4', 'PT') }}" readonly
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 bg-gray-200 cursor-not-allowed">
                    </div>
                    <!-- Head5 editable -->
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Head5</label>
                        <input type="text" name="deduction_head5" value="{{ old('deduction_head5', 'Loan/Advance') }}" readonly
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 bg-gray-200 cursor-not-allowed">
                    </div>
                </div>

                <!-- Define Deduction Heads -->
                <h3 class="text-[#d84315] font-bold text-sm mt-4 mb-3">Define Deduction Heads</h3>
                <div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6">
                    @for($i = 1; $i <= 5; $i++)
                    <div>
                        <label class="block text-[10px] font-bold text-gray-700 mb-1">Head{{ $i == 5 ? 's' : '' }}{{ $i }}</label>
                        <input type="text" name="ded_head{{ $i }}" value="{{ old('ded_head' . $i) }}"
                            class="w-full border border-gray-400 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    @endfor
                </div>

                <!-- Action Buttons -->
                <div class="flex justify-center space-x-2 pt-4 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-8 py-2 rounded shadow text-sm font-bold">Save</button>
                    <a href="{{ route('company.index') }}" class="bg-gradient-to-r from-rose-500 to-rose-600 hover:from-rose-600 hover:to-rose-700 text-white px-8 py-2 rounded shadow text-sm font-bold">Cancel</a>
                </div>

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