{{-- <div class="relative">
    <div class="bg-slate-100 p-5 flex justify-between items-center h-16">
        <p class="font-bold text-lg uppercase">Paymentsssss</p>
        <button class="text-gray-600 hover:text-gray-900"
            wire:click="$dispatch('closeModal', { component: 'tieup.tab.payments.payments-modal' })">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>
    <x-form wire:submit.prevent="save">
        <div class="p-3 h-auto">
            <div class="flex flex-col gap-3 w-full pt-3 h-auto">
                <div class="w-full flex flex-row gap-3">
                    <x-select label="GST Typee" placeholder="Select a GST type" placeholder-value="0"
                        :options="$gst_types" wire:model="form.selected_gst_type" wire:change="calculateGST" />
                </div>

                <div class="w-full flex flex-row gap-3">
                    <div class="w-1/3">
                        <x-input label="Payable Amount" type="number" wire:model="form.payment_amount" disabled />
                    </div>
                    <div class="w-1/3">
                        <x-input label="Paid Amount" type="number" wire:model.blur="form.paid_amount"
                            :disabled="$payment_amount == 0" disabled />
                    </div>
                    <div class="w-1/3">
                        <x-input label="Pending Amount" type="number" wire:model="form.pending_amount"
                            disabled/>
                    </div>
                </div>
                <div class="w-full flex flex-row gap-3">
                    <div class="w-1/3">
                        <x-select label="Payment Type" :options="$payment_types" wire:model="form.selected_payment_type" wire:change="checkDates"/>
                       
                    </div>
                    <div class="w-1/3">

                        <x-input label="Transaciton No" type="number" wire:model="form.transaction_no"
                       />
                    </div>
                    <div class="w-1/3">
                        <x-input label="Paid Date" type="date" wire:model="form.paid_date" wire:change="CompareDates"
                        />
                    </div>
                </div>

                <div class="w-full flex flex-row gap-3">
                   
                    <div class="w-1/3">
                        <x-input label="Deposit Date" type="date" wire:model="form.deposit_date" min="{{ $paid_date }}"
                            placeholder="Ex: Enter deposit date"   
                             />
                    </div>
                    <div class="w-1/3">
                        <x-input label="Bank Name" type="text" wire:model="form.bank_name"
                            placeholder="Ex: Enter bank name" />
                    </div>
                    <div class="w-1/3">
                        <x-input label="Branch Name" type="text" wire:model="form.branch_name"
                            placeholder="Ex: Enter branch name" />
                    </div>
                </div>
            </div>
           
            </div>
            <div class="bg-slate-200 p-3 h-16">
                <div class="flex justify-end items-center h-full space-x-2">
                    <x-button class="bg-success text-white w-32" type="submit">
                        Save
                    </x-button>
                    <x-button class="bg-red-400 text-white w-32" type="button"
                        wire:click="$dispatch('closeModal', { component: 'mou.mou-modal' })">
                        Cancel
                    </x-button>
                </div>
            </div>


    </x-form>


</div> --}}





<div class="relative">
    <!-- Header Section -->
    <div class="bg-slate-100 p-5 flex justify-between items-center h-16">
        <p class="font-bold text-lg uppercase">Payments</p>
        <button class="text-gray-600 hover:text-gray-900"
            wire:click="$dispatch('closeModal', { component: 'tieup.tab.payments.payments-modal' })">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>
    <x-form wire:submit.prevent="save">
        <div class="p-3 h-auto">
            <div class="flex flex-col gap-3 w-full pt-3 h-auto">
                <div class="w-full flex flex-row gap-3">
                    <div class="w-1/3">
                        <x-input label="Payable Amount" type="number" wire:model="form.payment_amount"
                            disabled />
                    </div>
                    <div class="w-1/3">
                        <x-input label="Paid Amount" type="number" wire:model="form.paid_amount" wire:change="checkPaidAmount"/>
                    </div>
                    <div class="w-1/3">
                        <x-input label="Pending Amount" type="number" wire:model="form.pending_amount" disabled/>
                    </div>
                </div>
                <div class="w-full flex flex-row gap-3">
                    <div class="w-1/3">
                        <x-select label="Payment Type" placeholder="Select a payment type" placeholder-value="0" :options="$payment_types" wire:model="form.selected_payment_type" 
                        wire:change="CompareDates" />
                    </div>  
                    <div class="w-1/3">
                        <x-input label="Transaction No" type="number" wire:model="form.transaction_no" />
                    </div>
                    <div class="w-1/3">
                        <x-input label="Paid Date" type="date" wire:model="form.paid_date" wire:change="checkDates"/>
                    </div>
                </div>

                <div class="w-full flex flex-row gap-3">
                   
                    <div class="w-1/3">
                        <x-input label="Deposit Date" type="date" wire:model="form.deposit_date" min="{{ $paid_date }}"
                            {{-- @if(in_array($selected_payment_type, [3, 4, 5])) disabled @endif  --}} />
                    </div>
                    <div class="w-1/3">
                        <x-input label="Bank Name" type="text" wire:model="form.bank_name"/>
                    </div>
                    <div class="w-1/3">
                        <x-input label="Branch Name" type="text" wire:model="form.branch_name"/>
                    </div>
                </div>
                <div class="w-full flex flex-row gap-3">
                    <div class="w-1/3">
                        <x-input label="Pan Number" type="text" wire:model="form.pan_number">
                            <x-slot name="label"><span class="required">Pan Number</span></x-slot>
                        </x-input>
                    </div>
                    <div class="w-1/3">
                        <x-input label="GST Number" type="text" wire:model="form.gst_number">
                            <x-slot name="label"><span class="required">GST Number</span></x-slot>
                        </x-input>
                    </div>
                </div>
            </div>
           
            </div>
            <div class="bg-slate-200 p-3 h-16">
                <div class="flex justify-end items-center h-full space-x-2">
                    <x-button class="bg-success text-white w-32" type="submit">
                        Save
                    </x-button>
                    <x-button class="bg-red-400 text-white w-32" type="button"
                        wire:click="$dispatch('closeModal', { component: 'mou.mou-modal' })">
                        Cancel
                    </x-button>
                </div>
            </div>
    </x-form>
</div>