@extends('layouts.sidebar')

@section('content')
    <button class="px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
        onclick="openModal('addItemModal')">Add Lease</button>
        @if (session('success'))
            <div class="p-4 mb-4 text-white bg-green-500">
                {{ session('success') }}
            </div>
        @endif
    <div class="flex flex-wrap justify-center">
   
        <div class="w-full px-4 lg:w-1/3">
            <div class="overflow-hidden bg-white rounded-lg shadow-md">
                <div class="px-4 py-2 bg-gray-200 border-b">
                    <h3 class="text-lg font-semibold text-gray-800">Unit Information</h3>
                </div>
                <div class="p-4">
                    <div class="mb-4">
                        <p class="text-sm font-semibold">Property Name</p>
                        <p class="text-sm">{{ $clientmain->property->property_name }}</p>
                    </div>
                    <div class="mb-4">
                        <p class="text-sm font-semibold">Property Address</p>
                        <p class="text-sm">{{ $clientmain->property->street_address }}, {{ $clientmain->property->city }},
                            {{ $clientmain->property->state }}, {{ $clientmain->property->zip }}</p>
                    </div>
                    <div class="mb-4">
                        <p class="text-sm font-semibold">Unit</p>
                        <p class="text-sm">{{ $clientmain->unit->unit_name }}</p>
                    </div>
                    <div class="mb-4">
                        <p class="text-sm font-semibold">Rate</p>
                        <p class="text-sm">{{ $clientmain->unit->rate }}</p>
                    </div>
                    <div class="mb-4">
                        <p class="text-sm font-semibold">Status</p>
                        <p class="text-sm">{{ $clientmain->unit->status }}</p>
                    </div>
                    <div class="mb-4">
                        <p class="text-sm font-semibold">Current Tenant</p>
                        <p class="text-sm">{{ $clientmain->client->owners_name }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full px-4 mb-4 lg:w-2/3 lg:mb-0">
            <div class="overflow-hidden bg-white rounded-lg shadow-md">
                <div class="px-4 py-2 bg-gray-200 border-b">
                    <h3 class="text-lg font-semibold text-gray-800">Lease Contracts</h3>
                </div>
                <table id="leaseTable" class="table text-sm text-center"> <!-- Added text-sm class -->
                    <thead>
                        <tr>
                            <th>Client Name</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm text-gray-600">

                    </tbody>
                </table>
            </div>
        </div>
    </div>







    @extends('CMS.unitmodal.modal')
    <script>
        function opencancelModal(modalId) {
            var modal = document.getElementById(modalId);
            modal.style.display = 'flex'; // Change from 'none' to 'flex' to properly show the modal
        }

        function closecancelModal(modalId) {
            var modal = document.getElementById(modalId);
            modal.style.display = 'none'; // Hide the modal by setting display to 'none'
        }
    </script>
    <script>
        $(document).ready(function() {
            var unit_id = '{{ $clientmain->unit_id }}'; // Assuming $clientmain has unit_id
            $('#leaseTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('lease.index', $clientmain->unit_id) }}",
                    data: function(d) {
                        d.unit_id = unit_id;
                    }
                },
                columns: [{
                        data: 'client_name',
                        name: 'client_name'
                    },
                    {
                        data: 'lease_start_date',
                        name: 'lease_start_date'
                    },
                    {
                        data: 'lease_end_date',
                        name: 'lease_end_date'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
    <div id="addItemModal"
        class="fixed inset-0 flex items-center justify-center hidden overflow-auto bg-gray-500 bg-opacity-75 z-50">
        <div class="w-[80rem]  h-[30rem] bg-white rounded">
            <!-- Modal header -->
            <div class="flex items-center justify-between px-4 py-2 bg-blue-500 ">
                <h5 class="font-bold text-white">Add</h5>
                <button onclick="closeModal('addItemModal')" class="text-white">&times;</button>
            </div>
            <!-- lease-form.blade.php -->
            <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="rent_amount" name="rent_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('rent_amount', $clientmain->rate_type == 'Per Square Meter' ? $clientmain->rate * $clientmain->size : $clientmain->rate) }}">
                                    @error('rent_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>

                                        <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_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>
                                                <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>
                                        <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_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><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="number" 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="Enter utilities"
                                       value="{{ old('utilities') }}" step="0.01" min="0">

                                    @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>
                                        <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_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><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>

        </div>
    </div>



    <script>
        function openModal1(modalId) {
            var modal = document.getElementById(modalId);
            modal.style.display = 'flex'; // Change from 'none' to 'flex' to properly show the modal
        }

        function closeModal1(modalId) {
            var modal = document.getElementById(modalId);
            modal.style.display = 'none'; // Hide the modal by setting display to 'none'
        }
    </script>




    @foreach ($lease as $lease)
        <div id="editItemModal{{ $lease->lease_id }}"
            class="fixed inset-0 flex items-center justify-center hidden bg-gray-500 bg-opacity-75">
            <div class="w-1/2 overflow-y-auto bg-white rounded-lg">
                <!-- Modal header -->
                <div class="flex items-center justify-between px-4 py-2 bg-blue-500">
                    <h5 class="font-bold text-white">Edit Lease Agreement</h5>
                    <button onclick="closeModal1('editItemModal{{ $lease->lease_id }}')"
                        class="text-white">&times;</button>
                </div>

                <!-- Edit Lease Form -->
                <form id="editItemForm{{ $lease->lease_id }}" action="{{ route('lease.update', $lease->lease_id) }}"
                    method="POST" class="p-6">
                    @csrf

                    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">

                        <input type="hidden" id="property_id" name="property_id" required
                            value="{{ $lease->property_id }}">
                        <input type="hidden" id="unit_id" name="unit_id" required value="{{ $lease->unit_id }}">

                        <div class="col-span-1">
                            <label for="client_id" class="block mb-2 text-sm font-bold text-gray-700">Tenant Name:</label>
                            <select id="client_id" name="client_id"
                                class="w-full px-3 py-2 text-sm text-gray-700 border border-black rounded shadow-sm focus:outline-none focus:shadow-outline"
                                required>
                                <option value="">Select Client</option>
                                @foreach ($editclients as $client)
                                    <option value="{{ $client->client_id }}"
                                        {{ $lease->client_id == $client->client_id ? 'selected' : '' }}>
                                        {{ $client->owners_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-span-1">
                            <label for="lease_start_date" class="block mb-2 text-sm font-bold text-gray-700">Lease Start
                                Date:</label>
                            <input type="date" id="lease_start_date" name="lease_start_date"
                                class="w-full px-3 py-2 text-sm text-gray-700 border border-black rounded shadow-sm focus:outline-none focus:shadow-outline"
                                value="{{ $lease->lease_start_date }}" required>
                        </div>

                        <div class="col-span-1">
                            <label for="rate_type{{ $lease->lease_id }}"
                                class="block mb-2 text-sm font-bold text-gray-700">Contract Type:</label>
                            <select id="rate_type{{ $lease->lease_id }}" name="rate_type"
                                class="w-full px-3 py-2 text-sm text-gray-700 border border-black rounded shadow-sm focus:outline-none focus:shadow-outline">
                                <option value="" disabled>Select Contract Type</option>
                                <option value="Daily" {{ $lease->contract_type == 'Daily' ? 'selected' : '' }}>Daily
                                </option>
                                <option value="Weekly" {{ $lease->contract_type == 'Weekly' ? 'selected' : '' }}>Weekly
                                </option>
                                <option value="Monthly" {{ $lease->contract_type == 'Monthly' ? 'selected' : '' }}>Monthly
                                </option>
                                <option value="Yearly" {{ $lease->contract_type == 'Yearly' ? 'selected' : '' }}>Yearly
                                </option>
                            </select>
                        </div>

                        <div class="col-span-1">
                            <label for="lease_duration" class="block mb-2 text-sm font-bold text-gray-700">Lease
                                Duration:</label>
                            <input type="number" id="lease_duration" name="lease_duration"
                                class="w-full px-3 py-2 text-sm text-gray-700 border border-black rounded shadow-sm focus:outline-none focus:shadow-outline"
                                placeholder="Enter Duration" value="{{ $lease->lease_duration }}" required>
                        </div>

                        <div class="col-span-1">
                            <label for="payment_amount" class="block mb-2 text-sm font-bold text-gray-700">Rent
                                Amount:</label>
                            <input type="text" id="payment_amount" name="payment_amount"
                                class="w-full px-3 py-2 text-sm text-gray-700 border border-black rounded shadow-sm focus:outline-none focus:shadow-outline"
                                placeholder="Enter Monthly Rent Amount" value="{{ $lease->rent_amount }}">
                        </div>

                        <div class="col-span-1">
                            <label for="yearly_escalation{{ $lease->lease_id }}"
                                class="block mb-2 text-sm font-bold text-gray-700">Yearly Escalation:</label>
                            <input type="number" id="yearly_escalation{{ $lease->lease_id }}" name="yearly_escalation"
                                class="w-full px-3 py-2 text-sm text-gray-700 border border-black rounded shadow-sm focus:outline-none focus:shadow-outline"
                                placeholder="Yearly Escalation" value="{{ $lease->yearly_escalation }}">
                        </div>

                        <div class="col-span-1">
                            <label for="terms{{ $lease->lease_id }}"
                                class="block mb-2 text-sm font-bold text-gray-700">Terms:</label>
                            <input type="number" id="terms{{ $lease->lease_id }}" name="terms"
                                class="w-full px-3 py-2 text-sm text-gray-700 border border-black rounded shadow-sm focus:outline-none focus:shadow-outline"
                                placeholder="Terms" value="{{ $lease->terms }}">
                        </div>

                        <div class="col-span-1">
                            <label for="relief_rental" class="block mb-2 text-sm font-bold text-gray-700">Annual (Rental
                                Relief):</label>
                            <input type="text" id="relief_rental" name="relief_rental"
                                class="w-full px-3 py-2 text-sm text-gray-700 border border-black rounded shadow-sm focus:outline-none focus:shadow-outline"
                                placeholder="" value="{{ $lease->relief_rental }}">
                        </div>

                        <div class="col-span-1">
                            <label for="advance_payment" class="block mb-2 text-sm font-bold text-gray-700">Advance
                                Payment:</label>
                            <input type="text" id="advance_payment" name="advance_payment"
                                class="w-full px-3 py-2 text-sm text-gray-700 border border-black rounded shadow-sm focus:outline-none focus:shadow-outline"
                                placeholder="Advance Payment" value="{{ $lease->relief_rental }}">
                        </div>

                        <div class="col-span-1">
                            <label for="security_deposit" class="block mb-2 text-sm font-bold text-gray-700">Security
                                Deposit:</label>
                            <input type="text" id="security_deposit" name="security_deposit"
                                class="w-full px-3 py-2 text-sm text-gray-700 border border-black rounded shadow-sm focus:outline-none focus:shadow-outline"
                                placeholder="Deposit" value="{{ $lease->security_deposit }}">
                        </div>
                    </div>

                    <div class="h-auto pt-10 overflow-y-auto">
                        <div class="col-span-3">
                            <label for="utilities{{ $lease->lease_id }}"
                                class="block mb-2 text-sm font-bold text-gray-700">Utilities:</label>
                            <textarea id="utilities{{ $lease->lease_id }}" name="utilities" rows="3"
                                class="w-full px-3 py-2 text-sm text-gray-700 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">{{ $lease->utilities }}</textarea>
                        </div>

                        <div class="col-span-3">
                            <label for="rules{{ $lease->lease_id }}"
                                class="block mb-2 text-sm font-bold text-gray-700">Rules and Regulations:</label>
                            <textarea id="rules{{ $lease->lease_id }}" name="rules_and_regulations" rows="3"
                                class="w-full px-3 py-2 text-sm text-gray-700 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">{{ $lease->rules_and_regulations }}</textarea>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="flex justify-end p-4">
                        <button type="submit"
                            class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">Update Lease
                            Agreement</button>
                    </div>
                </form>
            </div>
        </div>






        <div id="cancelModal{{ $lease->lease_id }}"
            class="fixed inset-0 flex items-center justify-center hidden overflow-auto bg-gray-500 bg-opacity-75">
            <div class="w-1/2 bg-white rounded">
                <!-- Modal header -->
                <div class="flex items-center justify-between px-4 py-2 bg-blue-500 rounded-t">
                    <h5 class="font-bold text-white">Cancel Lease</h5>
                    <button onclick="closecancelModal('cancelModal{{ $lease->lease_id }}')"
                        class="text-white">&times;</button>
                </div>
                <div class="p-4">
                    <p>Are you sure you want to cancel this lease?</p>
                </div>
                <div class="flex justify-end p-4 space-x-2 bg-gray-100 border-t rounded-b">
                    <form id="cancelForm" method="POST" action="{{ route('lease.cancel', $lease->lease_id) }}">
                        @csrf
                        <button type="button" onclick="closecancelModal('cancelModal{{ $lease->lease_id }}')"
                            class="px-4 py-2 font-semibold text-gray-700 bg-gray-200 rounded hover:bg-gray-300">Close</button>
                        <button type="submit"
                            class="px-4 py-2 font-semibold text-white bg-red-500 rounded hover:bg-red-600">Cancel
                            Lease</button>
                    </form>
                </div>
            </div>
        </div>



        <div id="viewModal{{ $lease->lease_id }}"
            class="fixed inset-0 flex items-center justify-center hidden bg-gray-800 bg-opacity-75">
            <div class="w-full max-w-3xl overflow-y-auto bg-white border border-gray-300 rounded-lg shadow-lg">
                <!-- Modal header -->
                <div class="px-6 py-4 text-white bg-gray-900 rounded-t-lg">
                    <h5 class="text-lg font-bold">Lease Agreement</h5>
                </div>

                <!-- Document Content -->
                <div class="p-6">


                    <div class="pb-4 mb-4">
                        <h3 class="mb-2 text-xl font-semibold text-gray-800">Lease Details</h3>
                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                            <div class="p-3 border border-gray-200 rounded-lg shadow bg-gray-50">
                                <p class="text-sm text-gray-700"><strong>Tenant Name:</strong> <span
                                        class="font-semibold">{{ $lease->client->owners_name ?? 'N/A' }}</span></p>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg shadow bg-gray-50">
                                <p class="text-sm text-gray-700"><strong>Lease Start Date:</strong> <span
                                        class="font-semibold">{{ \Carbon\Carbon::parse($lease->lease_start_date)->format('F j, Y') }}</span>
                                </p>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg shadow bg-gray-50">
                                <p class="text-sm text-gray-700"><strong>Contract Type:</strong> <span
                                        class="font-semibold">{{ $lease->contract_type }}</span></p>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg shadow bg-gray-50">
                                <p class="text-sm text-gray-700"><strong>Lease Duration:</strong> <span
                                        class="font-semibold">{{ $lease->lease_duration }}
                                        {{ $lease->contract_type === 'Daily' ? 'days' : ($lease->contract_type === 'Weekly' ? 'weeks' : ($lease->contract_type === 'Yearly' ? 'years' : 'months')) }}
                                </p>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg shadow bg-gray-50">
                                <p class="text-sm text-gray-700"><strong>Estimated End Date:</strong> <span
                                        class="font-semibold">{{ \Carbon\Carbon::parse($lease->lease_start_date)
    ->addMonths($lease->contract_type === 'Monthly' ? $lease->lease_duration : 0)
    ->addWeeks($lease->contract_type === 'Weekly' ? $lease->lease_duration : 0)
    ->addDays($lease->contract_type === 'Daily' ? $lease->lease_duration : 0)
    ->addYears($lease->contract_type === 'Yearly' ? $lease->lease_duration : 0) // Add this line for yearly
    ->format('F j, Y') }}</span>
                                </p>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg shadow bg-gray-50">
                                <p class="text-sm text-gray-700"><strong>Rent Amount:</strong> <span
                                        class="font-semibold">₱{{ $clientmain->rent_amount }}</span>
                                </p>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg shadow bg-gray-50">
                                <p class="text-sm text-gray-700"><strong>Yearly Escalation:</strong> <span
                                        class="font-semibold">{{ $lease->yearly_escalation }}%</span></p>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg shadow bg-gray-50">
                                <p class="text-sm text-gray-700"><strong>Terms:</strong> <span
                                        class="font-semibold">{{ $lease->terms }}</span></p>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg shadow bg-gray-50">
                                <p class="text-sm text-gray-700"><strong>Advance Payment:</strong> <span
                                        class="font-semibold">{{ $lease->relief_rental }}</span></p>
                            </div>
                            <div class="p-3 border border-gray-200 rounded-lg shadow bg-gray-50">
                                <p class="text-sm text-gray-700"><strong>Security Deposit:</strong> <span
                                        class="font-semibold">₱{{ number_format($lease->security_deposit, 2) }}</span></p>
                            </div>
                        </div>
                    </div>

                    <h3 class="mt-4 mb-2 text-lg font-semibold text-gray-800">Additional Information</h3>
                    <p class="text-sm text-gray-700"><strong>Utilities:</strong> <span
                            class="font-semibold">{{ $lease->utilities }}</span></p>
                    <p class="text-sm text-gray-700"><strong>Rules and Regulations:</strong> <span
                            class="font-semibold">{{ $lease->rules_and_regulations }}</span></p>

                    <div class="pt-4 mt-4 border-t border-gray-300">
                        <h3 class="text-lg font-semibold text-gray-800">Acknowledgment</h3>
                        <p class="mt-2 text-sm text-gray-700">
                            By signing this lease agreement, both parties acknowledge their understanding and acceptance of
                            the terms outlined above.
                        </p>
                    </div>
                </div>

                <!-- Close Button -->
                <div class="px-8 pb-6">
                    <button onclick="closeviewModal('viewModal{{ $lease->lease_id }}')"
                        class="w-full px-4 py-2 text-white transition duration-200 bg-gray-900 rounded hover:bg-gray-800">Close</button>
                </div>
            </div>
        </div>
    @endforeach

    <script>
        function openviewModal(modalId) {
            var modal = document.getElementById(modalId);
            modal.style.display = 'flex'; // Change from 'none' to 'flex' to properly show the modal
        }

        function closeviewModal(modalId) {
            var modal = document.getElementById(modalId);
            modal.style.display = 'none'; // Hide the modal by setting display to 'none'
        }
    </script>
@endsection