@extends('layouts.sidebar') <!-- Use your layout template as per your application setup -->

@section('content')
    <div class="container mx-auto">
        <div class="text-center">
            <h2 class="mb-4 text-3xl font-bold">Add lease</h2>
            @if (session('success'))
                <div class="text-center text-red-900 alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            <form method="POST" action="{{ route('lease.store') }}" class="p-6 bg-white rounded">
                @csrf
                <input type="hidden" id="property_id" name="property_id"
                    value="{{ old('property_id', $clientmain->property->id) }}">
                <input type="hidden" id="unit_id" name="unit_id" value="{{ old('unit_id', $clientmain->unit_id) }}">

                <div class="overflow-x-auto">
                    <table class="w-full border border-collapse border-gray-200">
                        <thead>
                            <tr class="text-left bg-gray-100">
                                <th class="px-4 py-2 border border-gray-300">Field</th>
                                <th class="px-4 py-2 border border-gray-300">Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="px-4 py-2 font-bold border border-gray-300">Tenant Name:</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <select id="client_id" name="client_id"
                                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                        required>
                                        <option value="">Select Client</option>
                                        @foreach ($clients as $client)
                                            <option value="{{ $client->client_id }}"
                                                {{ old('client_id') == $client->client_id ? 'selected' : '' }}>
                                                {{ $client->owners_name }}({{$client->business_name}})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('client_id')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 font-bold border border-gray-300">Lease Start Date:</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <input type="date" id="lease_start_date" name="lease_start_date"
                                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                        value="{{ old('lease_start_date') }}" required>
                                    @error('lease_start_date')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 font-bold border border-gray-300">Contract Type:</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <select id="rate_type" name="rate_type"
                                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline">
                                        <option value="" disabled selected>Select Contract Type</option>
                                        <option value="Daily" {{ old('rate_type') == 'Daily' ? 'selected' : '' }}>Daily
                                        </option>
                                        <option value="Weekly" {{ old('rate_type') == 'Weekly' ? 'selected' : '' }}>Weekly
                                        </option>
                                        <option value="Monthly" {{ old('rate_type') == 'Monthly' ? 'selected' : '' }}>
                                            Monthly</option>Yearly
                                        <option value="Yearly" {{ old('rate_type') == 'Yearly' ? 'selected' : '' }}>
                                            Yearly</option>
                                    </select>
                                    @error('rate_type')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 font-bold border border-gray-300">Lease Duration:</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <input type="number" id="lease_duration" name="lease_duration"
                                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                        placeholder="Enter Duration" value="{{ old('lease_duration') }}" required>
                                    @error('lease_duration')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 font-bold border border-gray-300">Rent Amount:</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <input type="text" id="payment_amount" name="payment_amount"
                                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                        placeholder="Enter Monthly Rent Amount"
                                        value="{{ old('payment_amount', $clientmain->rate_type == 'Per Square Meter' ? $clientmain->rate * $clientmain->size : $clientmain->rate) }}">
                                    @error('payment_amount')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 font-bold border border-gray-300">Yearly Escalation:</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <input type="number" id="yearly_escalation" name="yearly_escalation"
                                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                        placeholder="Yearly Escalation" value="{{ old('yearly_escalation') }}">
                                    @error('yearly_escalation')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 font-bold border border-gray-300">Terms:</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <input type="number" id="terms" name="terms"
                                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                        placeholder="Terms" value="{{ old('terms') }}">
                                    @error('terms')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 font-bold border border-gray-300">Business Start Date:</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <input type="date" id="business_start_date" name="business_start"
                                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                        placeholder="Business Start Date" value="{{ old('business_start') }}">
                                    @error('business_start')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 font-bold border border-gray-300">Advance Payment:</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <input type="text" id="relief_rental" name="relief_rental"
                                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                        placeholder="" value="{{ old('relief_rental') }}">
                                    @error('relief_rental')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror

                                    <div class="grid grid-cols-1 gap-2 mt-2 md:grid-cols-3 lg:grid-cols-5">
                                        <div class="mt-2">
                                            <select id="relief_rental_paymentmethod" name="relief_rental_paymentmethod"
                                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline">
                                                <option value="" disabled selected>Select a payment method</option>
                                                <option value="Cash">Cash</option>
                                                <option value="Check">Check</option>
                                                <option value="PDC">PDC</option>
                                                <option value="Debit">Debit</option>
                                                <option value="E-Wallet">E-Wallet</option>
                                                <option value="Online Transfer">Online Transfer</option>
                                            </select>
                                            <div>
                                                <input type="text" id="relief_rental_voucher"
                                                    name="relief_rental_voucher"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="Voucher" value="{{ old('relief_rental_voucher') }}">
                                                @error('relief_rental_voucher')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                       
                                        <div id="conditional-fields"
                                            class="grid hidden grid-cols-1 col-span-4 gap-2 mt-2 md:grid-cols-3 lg:grid-cols-4">
                                            <div>
                                                <input type="text" id="relief_rental_bank" name="relief_rental_bank"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="Bank" value="{{ old('relief_rental_bank') }}">
                                                @error('relief_rental_bank')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                           
                                            <div>
                                                <input type="text" id="relief_rental_chckno"
                                                    name="relief_rental_chckno"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="Check#" value="{{ old('relief_rental_chckno') }}">
                                                @error('relief_rental_chckno')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                            <div>
                                                <input type="text" id="relief_rental_chckname"
                                                    name="relief_rental_chckname"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="Check Name" value="{{ old('relief_rental_chckname') }}">
                                                @error('relief_rental_chckname')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                            <div>
                                                <input type="date" id="relief_rental_chckdate"
                                                    name="relief_rental_chckdate"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    value="{{ old('relief_rental_chckdate') }}">
                                                @error('relief_rental_chckdate')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <script>
                                        document.addEventListener('DOMContentLoaded', function() {
                                            const paymentMethodSelect = document.getElementById('relief_rental_paymentmethod');
                                            const conditionalFields = document.getElementById('conditional-fields');

                                            paymentMethodSelect.addEventListener('change', function() {
                                                if (this.value === 'Cash') {
                                                    conditionalFields.classList.add('hidden'); // Hide fields when "Cash" is selected
                                                } else {
                                                    conditionalFields.classList.remove('hidden'); // Show fields for other payment methods
                                                }
                                            });
                                        });
                                    </script>

                                </td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 font-bold border border-gray-300">Security Deposit:</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <input type="text" id="security_deposit" name="security_deposit"
                                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                        placeholder="Deposit" value="{{ old('security_deposit') }}">
                                    @error('security_deposit')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                    <div class="grid grid-cols-1 gap-2 mt-2 md:grid-cols-3 lg:grid-cols-5">
                                        <div><select id="security_deposit_paymentmethod"
                                                name="security_deposit_paymentmethod"
                                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline">
                                                <option value="" disabled selected>Select a payment method
                                                </option>
                                                <option value="Cash">Cash</option>
                                                <option value="Check">Check</option>
                                                <option value="PDC">PDC</option>
                                                <option value="Debit">Debit</option>
                                                <option value="E-Wallet">E-Wallet</option>
                                                <option value="Online Transfer">Online Transfer</option>
                                            </select>
                                            <div><input type="text" id="security_deposit_voucher"
                                                    name="security_deposit_voucher"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="Voucher" value="{{ old('security_deposit_voucher') }}">
                                                @error('security_deposit_voucher')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                        <div id="conditional-fields1"
                                            class="grid hidden grid-cols-1 col-span-4 gap-2 mt-2 md:grid-cols-3 lg:grid-cols-4">
                                            <div><input type="text" id="security_deposit_bank"
                                                    name="security_deposit_bank"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="Bank" value="{{ old('security_deposit_bank') }}">
                                                @error('security_deposit_bank')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                            
                                            <div><input type="text" id="security_deposit_chckno"
                                                    name="security_deposit_chckno"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="Check#" value="{{ old('security_deposit_chckno') }}">
                                                @error('security_deposit_chckno')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                            <div><input type="text" id="security_deposit_chckname"
                                                    name="security_deposit_chckname"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="Check Name"
                                                    value="{{ old('security_deposit_chckname') }}">
                                                @error('security_deposit_chckname')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                            <div><input type="date" id="security_deposit_chckdate"
                                                    name="security_deposit_chckdate"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="" value="{{ old('security_deposit_chckdate') }}">
                                                @error('security_deposit_chckdate')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <script>
                                    document.addEventListener('DOMContentLoaded', function() {
                                        const paymentMethodSelect = document.getElementById('security_deposit_paymentmethod');
                                        const conditionalFields = document.getElementById('conditional-fields1');

                                        paymentMethodSelect.addEventListener('change', function() {
                                            if (this.value === 'Cash') {
                                                conditionalFields.classList.add('hidden'); // Hide fields when "Cash" is selected
                                            } else {
                                                conditionalFields.classList.remove('hidden'); // Show fields for other payment methods
                                            }
                                        });
                                    });
                                </script>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 font-bold border border-gray-300">Utilities:</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <input type="text" id="utilities" name="utilities"
                                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                        placeholder="utilities" value="{{ old('utilities') }}">
                                    @error('utilities')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                    <div class="grid grid-cols-1 gap-2 mt-2 md:grid-cols-2 lg:grid-cols-5">
                                        <div><select id="utilities_paymentmethod" name="utilities_paymentmethod"
                                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline">
                                                <option value="" disabled selected>Select a payment method
                                                </option>
                                                <option value="Cash">Cash</option>
                                                <option value="Check">Check</option>
                                                <option value="PDC">PDC</option>
                                                <option value="Debit">Debit</option>
                                                <option value="E-Wallet">E-Wallet</option>
                                                <option value="Online Transfer">Online Transfer</option>
                                            </select>
                                            <div><input type="text" id="utilities_voucher" name="utilities_voucher"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="Voucher" value="{{ old('utilities_voucher') }}">
                                                @error('utilities_voucher')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                        <div id="conditional-fields2"
                                            class="grid hidden grid-cols-1 col-span-4 gap-2 mt-2 md:grid-cols-3 lg:grid-cols-4">
                                            <div><input type="text" id="utilities_bank" name="utilities_bank"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="Bank" value="{{ old('utilities_bank') }}">
                                                @error('utilities_bank')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                          
                                            <div><input type="text" id="utilities_chckno" name="utilities_chckno"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="Check#" value="{{ old('utilities_chckno') }}">
                                                @error('utilities_chckno')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                            <div><input type="text" id="utilities_chckname" name="utilities_chckname"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="Check Name" value="{{ old('utilities_chckname') }}">
                                                @error('utilities_chckname')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                            <div><input type="date" id="utilities_chckdate" name="utilities_chckdate"
                                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline"
                                                    placeholder="" value="{{ old('utilities_chckdate') }}">
                                                @error('utilities_chckdate')
                                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <script>
                                    document.addEventListener('DOMContentLoaded', function() {
                                        const paymentMethodSelect = document.getElementById('utilities_paymentmethod');
                                        const conditionalFields = document.getElementById('conditional-fields2');

                                        paymentMethodSelect.addEventListener('change', function() {
                                            if (this.value === 'Cash') {
                                                conditionalFields.classList.add('hidden'); // Hide fields when "Cash" is selected
                                            } else {
                                                conditionalFields.classList.remove('hidden'); // Show fields for other payment methods
                                            }
                                        });
                                    });
                                </script>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 font-bold border border-gray-300">Rules and Regulations:</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <textarea id="rules" name="rules_and_regulations" rows="3"
                                        class="w-full px-3 py-2 text-gray-700 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">{{ old('rules_and_regulations') }}</textarea>
                                    @error('rules_and_regulations')
                                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                    @enderror
                                </td>
                            </tr>
                            <tr>
                                <td class="px-4 py-2 font-bold border border-gray-300">Payment Schedule:</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <div id="payment_schedule"
                                        class="w-full h-40 px-3 py-2 overflow-x-auto text-gray-700 border border-gray-300 rounded shadow-sm">
                                        <!-- Payment schedule content here -->
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Submit Button -->
                <div class="mt-4">
                    <button type="submit" class="w-full px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700">Save
                        Lease Agreement</button>
                </div>
            </form>


            <a href="{{ url('/lease', $clientmain->unit_id) }}"
                class="inline-block px-4 py-2 mt-4 text-white bg-blue-500 rounded hover:bg-blue-700">Go to list</a>
        </div>
    </div>
    @extends('CMS.unitmodal.modal')
@endsection