@extends('layouts.sidebar')

@section('content')
    <div class="px-4 ">
        <div class="flex justify-between py-5 ">
            <div>
                <h2 class="text-2xl font-bold ">Clients Information</h2>

            </div>
            <div> <button class="px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
                    onclick="openModal('addItemModal')">Add Client</button>

                <a href="{{ route('export.clients') }}"
                    class="px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                    Export Clients
                </a>
            </div>
        </div>

        @if (session('success'))
            <div class="text-center text-red-900 alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <table id="leaseTable" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
            <thead class="">
                <tr>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Billings</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Business Line</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Business Name</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Owners Name</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Owners Name2</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">ID Type</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">ID No.</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Contact No.</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Contact No2.</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="text-sm text-gray-600">


            </tbody>
        </table>



        @foreach ($clients as $client)
            <div id="deleteModal{{ $client->client_id }}"
                class="fixed inset-0 flex items-center justify-center hidden bg-black bg-opacity-50">
                <!-- Modal dialog -->
                <div class="max-w-md mx-auto overflow-hidden bg-white rounded-lg shadow-xl">
                    <!-- Modal header -->
                    <div class="flex items-center justify-between px-4 py-2 bg-red-500">
                        <h5 class="font-bold text-white">Confirm Delete</h5>
                        <button onclick="closeModal('deleteModal{{ $client->client_id }}')"
                            class="text-white">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="px-4 py-4">
                        <p>Are you sure you want to delete this client?</p>
                    </div>

                    <!-- Modal footer -->
                    <div class="flex items-center justify-end px-4 py-3 bg-gray-100">
                        <button onclick="closeModal('deleteModal{{ $client->client_id }}')"
                            class="px-3 py-1 mr-2 text-gray-800 bg-gray-300 rounded hover:bg-gray-400">Cancel</button>

                        <!-- Form for delete -->
                        <form id="deleteForm{{ $client->id }}" action="{{ route('delete.client', $client->client_id) }}"
                            method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                class="px-3 py-1 text-white bg-red-500 rounded hover:bg-red-600">Delete</button>
                        </form>
                    </div>
                </div>
            </div>



            <div id="editUnitModal{{ $client->client_id }}"
                class="fixed inset-0 flex items-center justify-center hidden bg-black bg-opacity-50">
                <!-- Modal dialog -->
                <div class="w-1/2 mx-auto overflow-hidden bg-white rounded-lg shadow-xl">
                    <div class="flex items-center justify-between px-4 py-2 bg-blue-500">
                        <h5 class="font-bold text-white">Edit Client</h5>
                        <button onclick="closeModal1('editUnitModal{{ $client->client_id }}')"
                            class="text-white">&times;</button>
                    </div>

                    <form id="editItemForm{{ $client->client_id }}"
                        action="{{ route('client.update', $client->client_id) }}" method="POST"
                        class="p-6 bg-white rounded shadow-md">
                        @csrf
                        @method('PUT')

                        <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2">
                            <div>
                                <label for="business_type" class="block mb-2 text-sm font-bold text-gray-700">Business
                                    Line:</label>

                                <input list="business_types" id="business_type" name="business_type"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    value="{{ old('business_type', $client->business_type) }}">

                                <datalist id="business_types">
                                    <option value="Sole Proprietorship"></option>
                                    <option value="Partnership"></option>
                                    <option value="Limited Liability Company (LLC)"></option>
                                    <option value="Corporation"></option>
                                    <option value="Cooperative (Co-op)"></option>
                                    <option value="Nonprofit Organization"></option>
                                    <option value="Franchise"></option>
                                    <option value="Joint Venture"></option>
                                    <option value="Holding Company"></option>
                                    <option value="Social Enterprise"></option>
                                    <option value="Start-Up"></option>
                                </datalist>

                                @error('business_type')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>


                            <div>
                                <label for="business-name" class="block mb-2 text-sm font-bold text-gray-700">Business
                                    Name:</label>
                                <input type="text" id="business-name" name="business_name"
                                    value="{{ old('business_name', $client->business_name) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    placeholder="Business Name">
                                @error('business_name')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="owners-name" class="block mb-2 text-sm font-bold text-gray-700">Owner's
                                    Name:</label>
                                <input type="text" id="owners-name" name="owners_name"
                                    value="{{ old('owners_name', $client->owners_name) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    placeholder="Owner's Name">
                                @error('owners_name')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="owners-name2" class="block mb-2 text-sm font-bold text-gray-700">Owner's
                                    Name2:</label>
                                <input type="text" id="owners-name2" name="owners_name2"
                                    value="{{ old('owners_name2', $client->owners_name2) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    placeholder="Owner's Name">
                                @error('owners_name2')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="email" class="block mb-2 text-sm font-bold text-gray-700">Email:</label>
                                <input type="email" id="email" name="email"
                                    value="{{ old('email', $client->email) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    placeholder="email">
                                @error('email')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="email2" class="block mb-2 text-sm font-bold text-gray-700">Email2:</label>
                                <input type="email2" id="email2" name="email2"
                                    value="{{ old('email', $client->email2) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    placeholder="email">
                                @error('email2')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="home_address" class="block mb-2 text-sm font-bold text-gray-700">Home
                                    Address:</label>
                                <input type="text" id="home_address" name="home_address"
                                    value="{{ old('home_address', $client->home_address) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    placeholder="Home Address">
                                @error('home_address')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="home_address2" class="block mb-2 text-sm font-bold text-gray-700">Home
                                    Address2:</label>
                                <input type="text" id="home_address2" name="home_address2"
                                    value="{{ old('home_address2', $client->home_address2) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    placeholder="Home Address">
                                @error('home_address2')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="id-type" class="block mb-2 text-sm font-bold text-gray-700">ID Type:</label>
                                <select id="id-type" name="id_type"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                                    <option value="" disabled
                                        {{ old('id_type', $client->id_type) ? '' : 'selected' }}>Select ID Type</option>
                                    <option value="TIN"
                                        {{ old('id_type', $client->id_type) == 'TIN' ? 'selected' : '' }}>TIN</option>
                                    <option value="SSS"
                                        {{ old('id_type', $client->id_type) == 'SSS' ? 'selected' : '' }}>SSS</option>
                                    <option value="PhilHealth"
                                        {{ old('id_type', $client->id_type) == 'PhilHealth' ? 'selected' : '' }}>PhilHealth
                                    </option>
                                    <option value="Pag-IBIG"
                                        {{ old('id_type', $client->id_type) == 'Pag-IBIG' ? 'selected' : '' }}>Pag-IBIG
                                    </option>
                                    <option value="Driver License"
                                        {{ old('id_type', $client->id_type) == 'Driver License' ? 'selected' : '' }}>Driver
                                        License
                                    </option>
                                    <option value="Passport"
                                        {{ old('id_type', $client->id_type) == 'Passport' ? 'selected' : '' }}>Passport
                                    </option>
                                    <option value="Passport"
                                        {{ old('id_type', $client->id_type) == 'Passport' ? 'selected' : '' }}>Passport
                                    </option>
                                    <option value="UMID"
                                        {{ old('id_type', $client->id_type) == 'UMID' ? 'selected' : '' }}>UMID
                                    </option>
                                    <option value="(PhilSys) ID / National ID"
                                        {{ old('id_type', $client->id_type) == '(PhilSys) ID / National ID' ? 'selected' : '' }}>
                                        (PhilSys)
                                        ID / National ID
                                    </option>
                                    <option value="(GSIS) ID"
                                        {{ old('id_type', $client->id_type) == '(GSIS) ID' ? 'selected' : '' }}>(GSIS) ID
                                    </option>
                                    <option value="(PRC) ID"
                                        {{ old('id_type', $client->id_type) == '(PRC) ID' ? 'selected' : '' }}>(PRC) ID
                                    </option>
                                    <option value="Voter ID"
                                        {{ old('id_type', $client->id_type) == 'Voter ID' ? 'selected' : '' }}>Voter's ID
                                    </option>
                                    <option value="Postal ID"
                                        {{ old('id_type', $client->id_type) == 'Postal ID' ? 'selected' : '' }}>Postal ID
                                    </option>
                                    <option value="NBI"
                                        {{ old('id_type', $client->id_type) == 'NBI' ? 'selected' : '' }}>NBI
                                    </option>
                                </select>
                                @error('id_type')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="id_no" class="block mb-2 text-sm font-bold text-gray-700">ID No:</label>
                                <input type="text" id="id_no" name="id_no"
                                    value="{{ old('id_no', $client->id_no) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    placeholder="ID No.">
                                @error('id_no')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="contact-no" class="block mb-2 text-sm font-bold text-gray-700">Contact
                                    No:</label>
                                <input type="text" id="contact-no" name="contact_no"
                                    value="{{ old('contact_no', $client->contact_no) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    placeholder="Contact No">
                                @error('contact_no')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="contact-no2" class="block mb-2 text-sm font-bold text-gray-700">Contact
                                    No2:</label>
                                <input type="text" id="contact-no2" name="contact_no2"
                                    value="{{ old('contact_no2', $client->contact_no2) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    placeholder="Contact No">
                                @error('contact_no2')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="phone-no" class="block mb-2 text-sm font-bold text-gray-700">Phone
                                    Number:</label>
                                <input type="text" id="phone-no" name="phone_no"
                                    value="{{ old('phone_no', $client->phone_no) }}"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    placeholder="Phone Number">
                                @error('phone_no')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="penalty" class="block mb-2 text-sm font-bold text-gray-700">Penalty:</label>
                                <select id="penalty" name="penalty"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                                    <option value=""
                                        {{ old('penalty', $client->penalty) === null ? 'selected' : '' }}>Select</option>
                                    <option value="yes"
                                        {{ old('penalty', $client->penalty) === 'yes' ? 'selected' : '' }}>With Penalty
                                    </option>
                                    <option value="no"
                                        {{ old('penalty', $client->penalty) === 'no' ? 'selected' : '' }}>Without Penalty
                                    </option>
                                </select>
                                @error('penalty')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="vat" class="block mb-2 text-sm font-bold text-gray-700">Tax Type:</label>
                                <select name="vat"
                                    class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                                    <option value="" {{ old('vat', $client->vat) === null ? 'selected' : '' }}>
                                        Select</option>
                                    <option value="vat" {{ old('vat', $client->vat) === 'vat' ? 'selected' : '' }}>VAT
                                    </option>
                                    <option value="non-vat"
                                        {{ old('vat', $client->vat) === 'non-vat' ? 'selected' : '' }}>Non-VAT</option>
                                </select>
                                @error('vat')
                                    <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div @if (old('vat', $client->vat) !== 'vat') style="display: none;" @endif>
                            <label for="withholding-tax" class="block mb-2 text-sm font-bold text-gray-700">Withholding
                                Tax:</label>
                            <select
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                                <option value="">Select</option>
                                <option value="true"
                                    {{ old('withholding_tax', $client->w_holding_tax) == 'true' ? 'selected' : '' }}>True
                                </option>
                                <option value="false"
                                    {{ old('withholding_tax', $client->w_holding_tax) == 'false' ? 'selected' : '' }}>
                                    False</option>
                            </select>
                            @error('withholding_tax')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="mt-10 text-center"> <button type="submit"
                                class="col-span-2 px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">Update</button>
                        </div>

                    </form>
                </div>
            </div>
        @endforeach

        <div id="addItemModal" class="fixed inset-0 flex items-center justify-center hidden bg-black bg-opacity-50">
            <!-- Modal dialog -->
            <div class="w-1/2 mx-auto overflow-hidden bg-white rounded-lg shadow-xl">
                <div class="flex items-center justify-between px-4 py-2 bg-blue-500">
                    <h5 class="font-bold text-white">Add Client</h5>
                    <button onclick="closeModal1('addItemModal')" class="text-white">&times;</button>
                </div>
                <!-- client.blade.php -->
                <form action="{{ route('client.store') }}" method="POST" class="p-6 bg-white rounded shadow-md">
                    @csrf
                    <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2">
                        <div>
                            <label for="business_type" class="block mb-2 text-sm font-bold text-gray-700">Business
                                Line:</label>
                            <input list="business_types" id="business_type" name="business_type"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                value="{{ old('business_type') }}" required>

                            <datalist class="w-full" id="business_types">
                                <option value="Sole Proprietorship"></option>
                                <option value="Partnership"></option>
                                <option value="Limited Liability Company (LLC)"></option>
                                <option value="Corporation"></option>
                                <option value="Cooperative (Co-op)"></option>
                                <option value="Nonprofit Organization"></option>
                                <option value="Franchise"></option>
                                <option value="Joint Venture"></option>
                                <option value="Holding Company"></option>
                                <option value="Social Enterprise"></option>
                                <option value="Start-Up"></option>
                            </datalist>

                            @error('business_type')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="business-name" class="block mb-2 text-sm font-bold text-gray-700">Business
                                Name:</label>
                            <input required type="text" id="business-name" name="business_name"
                                value="{{ old('business_name') }}"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Business Name">
                            @error('business_name')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="owners-name" class="block mb-2 text-sm font-bold text-gray-700">Owner's
                                Name1:</label>
                            <input required type="text" id="owners-name" name="owners_name"
                                value="{{ old('owners_name') }}"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Owner's Name">
                            @error('owners_name')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="owners-name" class="block mb-2 text-sm font-bold text-gray-700">Owner's
                                Name2:</label>
                            <input type="text" id="owners-name2" name="owners_name2"
                                value="{{ old('owners_name2') }}"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Owner's Name">
                            @error('owners_name2')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="owners-name" class="block mb-2 text-sm font-bold text-gray-700">Email:</label>
                            <input required type="email" id="email-name" name="email" value="{{ old('email') }}"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="@gmail.com">
                            @error('email')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="owners-name2" class="block mb-2 text-sm font-bold text-gray-700">Email2:</label>
                            <input required type="email2" id="email-name2" name="email2" value="{{ old('email2') }}"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="@gmail.com">
                            @error('email2')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="home_address" class="block mb-2 text-sm font-bold text-gray-700">Home
                                Address:</label>
                            <input required type="text" id="home_address" name="home_address"
                                value="{{ old('home_address') }}"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Home Address">
                            @error('home_address')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="home_address2" class="block mb-2 text-sm font-bold text-gray-700">Home
                                Address2:</label>
                            <input required type="text" id="home_address2" name="home_address2"
                                value="{{ old('home_address2') }}"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Home Address">
                            @error('home_address2')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="id-type" class="block mb-2 text-sm font-bold text-gray-700">ID Type:</label>
                            <select required id="id-type" name="id_type"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                                <option value="" disabled selected>Select ID Type</option>
                                <option value="TIN">TIN</option>
                                <option value="SSS">SSS</option>
                                <option value="PhilHealth">PhilHealth</option>
                                <option value="Pag-IBIG">Pag-IBIG</option>
                                <option value="Driver License">Driver License</option>
                                <option value="Passport">Passport</option>
                                <option value="(PhilSys) ID / National ID">(PhilSys) ID / National ID</option>
                                <option value="(GSIS) ID">(GSIS) ID</option>
                                <option value="(PRC) ID">(PRC) ID</option>
                                <option value="Voter's ID">Voter's ID</option>
                                <option value="Postal ID">Postal ID</option>
                                <option value="NBI">NBI</option>
                            </select>
                            @error('id_type')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="id_no" class="block mb-2 text-sm font-bold text-gray-700">ID No:</label>
                            <input required type="text" id="id_no" name="id_no" value="{{ old('id_no') }}"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="No.">
                            @error('id_no')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="contact-no" class="block mb-2 text-sm font-bold text-gray-700">Contact
                                No1:</label>
                            <input required type="text" id="contact-no" name="contact_no"
                                value="{{ old('contact_no') }}"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Contact No">
                            @error('contact_no')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="contact-no" class="block mb-2 text-sm font-bold text-gray-700">Contact
                                No2:</label>
                            <input type="text" id="contact-no2" name="contact_no2" value="{{ old('contact_no2') }}"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Contact No">
                            @error('contact_no2')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="phone-no" class="block mb-2 text-sm font-bold text-gray-700">Phone Number:</label>
                            <input required type="text" id="phone-no" name="phone_no" value="{{ old('phone_no') }}"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Phone Number">
                            @error('phone_no')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="penalty" class="block mb-2 text-sm font-bold text-gray-700">Penalty:</label>
                            <select id="penalty" name="penalty"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                                <option value="">Select</option>
                                <option value="yes" @if (old('penalty') == 'yes') selected @endif>With Penalty
                                </option>
                                <option value="no" @if (old('penalty') == 'no') selected @endif>With Out Penalty
                                </option>
                            </select>
                            @error('penalty')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="vat" class="block mb-2 text-sm font-bold text-gray-700">Tax Type:</label>
                            <select id="vat" name="vat" onchange="toggleWithholdingTax()"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                                <option value="">Select Tax Type</option>
                                <option value="vat" @if (old('vat') == 'vat') selected @endif>VAT</option>
                                <option value="non-vat" @if (old('vat') == 'non-vat') selected @endif>Non-VAT</option>
                            </select>
                            @error('vat')
                                <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                    </div>
                    <div id="withholding-tax-div" @if (old('vat') !== 'vat') style="display: none;" @endif>
                        <label for="withholding-tax" class="block mb-2 text-sm font-bold text-gray-700">Withholding
                            Tax:</label>
                        <select id="withholding-tax" name="withholding_tax"
                            class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                            <option value="">Select</option>
                            <option value="true" @if (old('withholding_tax') == 'true') selected @endif>True</option>
                            <option value="false" @if (old('withholding_tax') == 'false') selected @endif>False</option>
                        </select>
                        @error('withholding_tax')
                            <p class="mt-1 text-xs italic text-red-500">{{ $message }}</p>
                        @enderror
                    </div>
                    <button type="submit" class="px-4 py-2 mt-4 text-white bg-blue-500 rounded hover:bg-blue-700">Save
                    </button>
                </form>


                <script>
                    function toggleWithholdingTax() {
                        const vatType = document.getElementById('vat').value;
                        const withholdingTaxDiv = document.getElementById('withholding-tax-div');

                        if (vatType === 'vat') {
                            withholdingTaxDiv.style.display = 'block'; // Show the div
                        } else {
                            withholdingTaxDiv.style.display = 'none'; // Hide the div
                        }
                    }

                    // Call the function once on page load to initialize based on initial selection
                    toggleWithholdingTax();
                </script>


            </div>
        </div>
    @endsection
    @section('scripts')
        <script>
            $(document).ready(function() {
                $('#leaseTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: "{{ url('/admin/clients') }}",
                    columns: [{
                            data: 'billing',
                            name: 'billing',
                            orderable: false,
                            searchable: false,

                        },
                        {
                            data: 'business_type',
                            name: 'business_type'
                        }, {
                            data: 'business_name',
                            name: 'business_name'
                        },
                        {
                            data: 'owners_name',
                            name: 'owners_name'
                        },
                        {
                            data: 'owners_name2',
                            name: 'owners_name2'
                        },
                        {
                            data: 'id_type',
                            name: 'id_type'
                        },
                        {
                            data: 'id_no',
                            name: 'id_no'
                        },
                        {
                            data: 'contact_no',
                            name: 'contact_no'
                        },
                        {
                            data: 'contact_no2',
                            name: 'contact_no2'
                        },
                        {
                            data: 'actions',
                            name: 'actions',
                            orderable: false,
                            searchable: false,

                        }
                    ]
                });
            });

            function openDeleteModal(clientId) {
                $('#deleteModal' + clientId).modal('show');

                $('#confirmDelete').on('click', function() {
                    deleteClient(clientId);
                });
            }

            function deleteClient(clientId) {
                $.ajax({
                    url: '/delete-client/' + clientId,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $('#leaseTable').DataTable().ajax.reload();
                        closeModal('deleteModal' + clientId);
                    }
                });
            }

            function closeModal(modalId) {
                $('#' + modalId).modal('hide');
            }
        </script>






        <script>
            function openModal1(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            }

            // Function to close a modal
            function closeModal1(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }

            // Function to open a modal
            function openModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.remove('hidden');
                modal.classList.add('flex');
            }

            // Function to close a modal
            function closeModal(modalId) {
                var modal = document.getElementById(modalId);
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }

            // Function to handle add item form submission
            function submitAddItemForm(event) {
                event.preventDefault();
                var itemName = document.getElementById('item-name').value;
                console.log('Adding item:', itemName);
                document.getElementById('addItemForm').reset(); // Reset form
                closeModal('addItemModal'); // Close modal
            }


            function openEditModal(propertyId) {

                document.getElementById('editItemModal' + propertyId).classList.remove('hidden');
            }


            function closeEditModal(propertyId) {
                // Hide the modal
                document.getElementById('editItemModal' + propertyId).classList.add('hidden');
            }

            // Function to handle form submission (in this case, just closing the modal)
            function submitEditItemForm(event, propertyId) {
                event.preventDefault(); // Prevent form submission

                // In a real scenario without AJAX, you might just close the modal
                closeEditModal(propertyId);
            }
        </script>
    @endsection