@extends('builder.layouts.layout')

@section('content')
@if($Application->form_type == '1')
    @include('builder.applications.english')
@elseif($Application->form_type == '2')
    @include('builder.applications.gujarati')
@endif

@endsection

@section('footer-script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

<script>
$(document).ready(function () {

    $('.whitespace-trim').on('input', function() {
        var value = $(this).val();
        if (value && value.charAt(0) === ' ') {
            $(this).val(value.substring(1));
        }
    });

    $('.only-number').on('input', function() {
        var value = $(this).val();
        var numericValue = value.replace(/\D/g, '');
        if (numericValue.length > 10) {
            numericValue = numericValue.substring(0, 10);
        }
        $(this).val(numericValue);
    });

    $.validator.addMethod("lettersonly", function(value, element) {
        return this.optional(element) || /^[a-zA-Z\s]+$/.test(value);
    }, "Please enter only alphabetic characters and spaces.");

    $.validator.addMethod("gujaratiOnly", function (value, element) {
        return this.optional(element) || /^[\u0A80-\u0AFF\s]+$/.test(value);
    }, "ફક્ત ગુજરાતી અક્ષરો અને જગ્યા મંજુર છે.");

    $.validator.addMethod("regexEmail", function(value, element) {
        var regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        return this.optional(element) || regex.test(value);
    });

    $.validator.addMethod("propertyCardFormat", function (value, element) {
        return this.optional(element) || /^[A-Z]\/\d{2}\/\d{2}\/\d{3,4}$/.test(value);
    }, "Please enter in the format A/NN/NN/NNN or A/NN/NN/NNNN.");


    // Initialize the form validation
    $( '#applicationFormEng').validate({
        errorElement: 'div',
        rules: {
            'nature_of_document_id[]': {
                required: true
            },
            'full_name_claiming[]': {
                required: true,
                lettersonly: true
            },
            'religion_id_claiming[]': {
                required: true,
            },
            'age_claiming[]': {
                required: true,
                number: true
            },
            'occupation_id_claiming[]': {
                required: true
            },
            'mobile_no_claiming[]': {
                required: true,
                number: true,
                minlength: 10,
                maxlength: 10
            },
            'id_proof_type_id_claiming[]': {
                required: true
            },
            'id_proof_no_claiming[]': {
                required: true
            },
            'address_claiming[]': {
                required: true
            },
            'email_claiming[]': {
                email: true,
                regexEmail: true
            },
            north_boundary: {
                required: true,
            },
            south_boundary: {
                required: true,
            },
            east_boundary: {
                required: true,
            },
            west_boundary: {
                required: true,
            },
            'mortgage_cheque_upi_no[]': {
                number: true,
            },
            'mortgage_amount[]': {
                number: true,
            },
            'mortgage_top_up_amount[]': {
                number: true,
            },
            'banakhat_cheque_upi_no[]': {
                number: true,
            },
            'banakhat_amount[]': {
                number: true,
            },
            'banakhat_bank[]': {
                lettersonly: true,
            },
            'saledeed_cheque_upi_no[]': {
                number: true,
            },
            'saledeed_amount[]': {
                number: true,
            },
            'saledeed_bank[]': {
                lettersonly: true,
            },
        },
        messages: {
            'nature_of_document_id[]': {
                required: '<span class="text-danger">* Nature of Document is required.</span>',
            },
            'full_name_claiming[]': {
                required: '<span class="text-danger">* Full name is required.</span>',
                lettersonly: '<span class="text-danger">* Only alphabets and spaces are allowed.</span>'
            },
            'religion_id_claiming[]': {
                required: '<span class="text-danger">* Religion is required.</span>',
            },
            'age_claiming[]': {
                required: '<span class="text-danger">* Age is required.</span>',
                number: '<span class="text-danger">* Please enter a valid number.</span>'
            },
            'occupation_id_claiming[]': {
                required: '<span class="text-danger">* Occupation is required.</span>'
            },
            'mobile_no_claiming[]': {
                required: '<span class="text-danger">* Mobile number is required.</span>',
                number: '<span class="text-danger">* Please enter a valid number.</span>',
                minlength: '<span class="text-danger">* Mobile number must be at least 10 number.</span>',
                maxlength: '<span class="text-danger">* Mobile number must be at least 10 number.</span>'
            },
            'id_proof_type_id_claiming[]': {
                required: '<span class="text-danger">* Id Proof Type is required.</span>'
            },
            'id_proof_no_claiming[]': {
                required: '<span class="text-danger">* Id Proof No is required.</span>'
            },
            'address_claiming[]': {
                required: '<span class="text-danger">* Address is required.</span>'
            },
            'email_claiming[]': {
                email: '<span class="text-danger">* Please enter a valid email address (e.g., mailto:user@example.com).</span>',
                regexEmail: '<span class="text-danger">* Please enter a valid email address (e.g., mailto:user@example.com).</span>'
            },
            north_boundary: {
                required: '<span class="text-danger">* North Boundary is required.</span>'
            },
            south_boundary: {
                required: '<span class="text-danger">* South Boundary is required.</span>'
            },
            east_boundary: {
                required: '<span class="text-danger">* East Boundary is required.</span>'
            },
            west_boundary: {
                required: '<span class="text-danger">* West Boundary is required.</span>'
            },
            'mortgage_cheque_upi_no[]': {
                number: '<span class="text-danger">* Please enter a valid number.</span>',
            },
            'mortgage_amount[]': {
                number: '<span class="text-danger">* Please enter a valid number.</span>',
            },
            'mortgage_top_up_amount[]': {
                number: '<span class="text-danger">* Please enter a valid number.</span>',
            },
            'banakhat_cheque_upi_no[]': {
                number: '<span class="text-danger">* Please enter a valid number.</span>',
            },
            'banakhat_amount[]': {
                number: '<span class="text-danger">* Please enter a valid number.</span>',
            },
            'banakhat_bank[]': {
                lettersonly: '<span class="text-danger">* Only alphabets and spaces are allowed.</span>'
            },
            'saledeed_cheque_upi_no[]': {
                number: '<span class="text-danger">* Please enter a valid number.</span>',
            },
            'saledeed_amount[]': {
                number: '<span class="text-danger">* Please enter a valid number.</span>',
            },
            'saledeed_bank[]': {
                lettersonly: '<span class="text-danger">* Only alphabets and spaces are allowed.</span>'
            },
        },
    });

    $( '#applicationFormGuj').validate({
        errorElement: 'div',
        rules: {
            'nature_of_document_id[]': {
                required: true
            },
            'full_name_claiming[]': {
                required: true,
            },
            'religion_id_claiming[]': {
                required: true,
            },
            'age_claiming[]': {
                required: true,
                number: true
            },
            'occupation_id_claiming[]': {
                required: true
            },
            'mobile_no_claiming[]': {
                required: true,
                number: true,
                minlength: 10,
                maxlength: 10
            },
            'id_proof_type_id_claiming[]': {
                required: true
            },
            'id_proof_no_claiming[]': {
                required: true
            },
            'address_claiming[]': {
                required: true
            },
            north_boundary: {
                required: true,
            },
            south_boundary: {
                required: true,
            },
            east_boundary: {
                required: true,
            },
            west_boundary: {
                required: true,
            },
            'mortgage_cheque_upi_no[]': {
                number: true,
            },
            'mortgage_amount[]': {
                number: true,
            },
            'mortgage_top_up_amount[]': {
                number: true,
            },
            'banakhat_cheque_upi_no[]': {
                number: true,
            },
            'banakhat_amount[]': {
                number: true,
            },
            'banakhat_bank[]': {
                lettersonly: true,
            },
            'saledeed_cheque_upi_no[]': {
                number: true,
            },
            'saledeed_amount[]': {
                number: true,
            },
            'saledeed_bank[]': {
                lettersonly: true,
            },
            'constructionagreement_cheque_upi_no[]': {
                number: true,
            },
            'constructionagreement_amount[]': {
                number: true,
            },
            'constructionagreement_bank[]': {
                lettersonly: true,
            },
            'extraagreement_cheque_upi_no[]': {
                number: true,
            },
            'extraagreement_amount[]': {
                number: true,
            },
            'extraagreement_bank[]': {
                lettersonly: true,
            },
        },
        messages: {
            'nature_of_document_id[]': {
                required: '<span class="text-danger">* દસ્તાવેજનો સ્વરૂપ જરૂરી છે.</span>',
            },
            'full_name_claiming[]': {
                required: '<span class="text-danger">* પૂરું નામ જરૂરી છે.</span>',
            },
            'religion_id_claiming[]': {
                required: '<span class="text-danger">* ધર્મ જરૂરી છે.</span>',
            },
            'age_claiming[]': {
                required: '<span class="text-danger">* ઉંમર જરૂરી છે.</span>',
                number: '<span class="text-danger">* કૃપા કરી માન્ય ઉંમર દાખલ કરો.</span>'
            },
            'occupation_id_claiming[]': {
                required: '<span class="text-danger">* વ્યવસાય જરૂરી છે.</span>'
            },
            'mobile_no_claiming[]': {
                required: '<span class="text-danger">* મોબાઇલ નંબર જરૂરી છે.</span>',
                number: '<span class="text-danger">* કૃપા કરી માન્ય નંબર દાખલ કરો.</span>',
                minlength: '<span class="text-danger">* મોબાઇલ નંબર ઓછામાં ઓછો 10 અંકનો હોવો જોઈએ.</span>',
                maxlength: '<span class="text-danger">* મોબાઇલ નંબર વધુમાં વધુ 10 અંકનો હોવો જોઈએ.</span>'
            },
            'id_proof_type_id_claiming[]': {
                required: '<span class="text-danger">* ઓળખ પ્રમાણપત્ર પ્રકાર જરૂરી છે.</span>'
            },
            'id_proof_no_claiming[]': {
                required: '<span class="text-danger">* ઓળખ પ્રમાણપત્ર નંબર જરૂરી છે.</span>'
            },
            'address_claiming[]': {
                required: '<span class="text-danger">* સરનામું જરૂરી છે.</span>'
            },
            north_boundary: {
                required: '<span class="text-danger">* ઉત્તર સરહદ જરૂરી છે.</span>',
            },
            south_boundary: {
                required: '<span class="text-danger">* દક્ષિણ સરહદ જરૂરી છે.</span>',
            },
            east_boundary: {
                required: '<span class="text-danger">* પૂર્વ સરહદ જરૂરી છે.</span>',
            },
            west_boundary: {
                required: '<span class="text-danger">* પશ્ચિમ સરહદ જરૂરી છે.</span>',
            },
            'mortgage_cheque_upi_no[]': {
                number: '<span class="text-danger">* કૃપા કરી માન્ય નંબર દાખલ કરો.</span>',
            },
            'mortgage_amount[]': {
                number: '<span class="text-danger">* કૃપા કરી માન્ય રકમ દાખલ કરો.</span>',
            },
            'mortgage_top_up_amount[]': {
                number: '<span class="text-danger">* કૃપા કરી માન્ય રકમ દાખલ કરો.</span>',
            },
            'banakhat_cheque_upi_no[]': {
                number: '<span class="text-danger">* કૃપા કરી માન્ય નંબર દાખલ કરો.</span>',
            },
            'banakhat_amount[]': {
                number: '<span class="text-danger">* કૃપા કરી માન્ય રકમ દાખલ કરો.</span>',
            },
            'banakhat_bank[]': {
                lettersonly: '<span class="text-danger">* Only alphabets and spaces are allowed.</span>'
            },
            'saledeed_cheque_upi_no[]': {
                number: '<span class="text-danger">* કૃપા કરી માન્ય નંબર દાખલ કરો.</span>',
            },
            'saledeed_amount[]': {
                number: '<span class="text-danger">* કૃપા કરી માન્ય રકમ દાખલ કરો.</span>',
            },
            'saledeed_bank[]': {
                lettersonly: '<span class="text-danger">* Only alphabets and spaces are allowed.</span>'
            },
            'constructionagreement_cheque_upi_no[]': {
                number: '<span class="text-danger">* કૃપા કરી માન્ય નંબર દાખલ કરો.</span>',
            },
            'constructionagreement_amount[]': {
                number: '<span class="text-danger">* કૃપા કરી માન્ય રકમ દાખલ કરો.</span>',
            },
            'constructionagreement_bank[]': {
                lettersonly: '<span class="text-danger">* Only alphabets and spaces are allowed.</span>'
            },
            'extraagreement_cheque_upi_no[]': {
                number: '<span class="text-danger">* કૃપા કરી માન્ય નંબર દાખલ કરો.</span>',
            },
            'extraagreement_amount[]': {
                number: '<span class="text-danger">* કૃપા કરી માન્ય રકમ દાખલ કરો.</span>',
            },
            'extraagreement_bank[]': {
                lettersonly: '<span class="text-danger">* Only alphabets and spaces are allowed.</span>'
            },
        }
    });
});

// $(document).ready(function () {
//     $('.addMoreClaim').on('click', function () {
//         var newGroup = $('.claiming-party-group').first().clone();

//         // Clear input/select/textarea values
//         newGroup.find('input, textarea').val('');
//         newGroup.find('select').prop('selectedIndex', 0);

//         $('#claimingPartyContainer').append(newGroup);
//     });

//     // Remove claiming party group
//     $(document).on('click', '.removeClaim', function () {
//         if ($('.claiming-party-group').length > 1) {
//             $(this).closest('.claiming-party-group').remove();
//         } else {
//             alert("At least one claiming party is required.");
//         }
//     });
// });

$(document).ready(function () {
    let count = 1;

    // Function to generate new Claiming Party form block HTML (empty inputs)
    function getClaimingPartyHtml(index) {
        return `
        <div class="claiming-party-block mt-4">
            <div class="card-header border-bottom justify-content-between d-flex flex-wrap align-items-center gap-2 mb-3">
                <h3 class="header-title">Claiming Party: <span class="claiming-count">${index}</span></h3>
                <button type="button" class="btn btn-danger btn-sm removeClaim mt-4">Remove</button>
            </div>
            <div class="row claiming-party-group mb-4">
                <div class="mb-3 col-lg-3">
                    <input type="hidden" name="claiming_party_id[]" value="">
                    <label class="form-label">Full Name</label>
                    <input type="text" name="full_name_claiming[]" placeholder="Enter Full Name" class="form-control">
                </div>
                <div class="mb-3 col-lg-3">
                    <label class="form-label">Religion</label>
                    <select class="form-control" name="religion_id_claiming[]">
                        <option value="">Select Religion</option>
                        @foreach ($Religions as $Religion)
                            <option value="{{ $Religion->id }}">{{ $Religion->name_eng }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3 col-lg-3">
                    <label class="form-label">Age</label>
                    <input type="number" name="age_claiming[]" placeholder="Enter Age" class="form-control">
                </div>
                <div class="mb-3 col-lg-3">
                    <label class="form-label">Occupation</label>
                    <select class="form-control" name="occupation_id_claiming[]">
                        <option value="">Select Occupation</option>
                        @foreach ($Occupations as $Occupation)
                            <option value="{{ $Occupation->id }}">{{ $Occupation->name_eng }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3 col-lg-3">
                    <label class="form-label">Mobile No.</label>
                    <input type="tel" name="mobile_no_claiming[]" placeholder="Enter Mobile No." class="form-control">
                </div>
                <div class="mb-3 col-lg-3">
                    <label class="form-label">Id Proof</label>
                    <select class="form-control" name="id_proof_id[]">
                        <option value="">Select Id Proof</option>
                        @foreach ($IdProofTypes as $IdProofType)
                            <option value="{{ $IdProofType->id }}">{{ $IdProofType->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3 col-lg-3">
                    <label class="form-label">Id Proof No.</label>
                    <input type="text" name="id_proof_no[]" placeholder="Enter Id Proof No." class="form-control">
                </div>
                <div class="mb-3 col-lg-3">
                    <label class="form-label">Email</label>
                    <input type="email" name="email_claiming[]" placeholder="Enter Email" class="form-control">
                </div>
                <div class="mb-3 col-lg-3">
                    <label class="form-label">Address</label>
                    <textarea name="address_claiming[]" class="form-control" placeholder="Enter Address"></textarea>
                </div>
            </div>
        </div>
        `;
    }

    // Add new claiming party block on button click
    $(document).on('click', '.addMoreClaim', function () {
        count++;
        $('#claimingPartyContainer').append(getClaimingPartyHtml(count));
    });

    // Remove claiming party block on remove button click
    $(document).on('click', '.removeClaim', function () {
        $(this).closest('.claiming-party-block').remove();
        updateClaimingCount();
    });

    // Update claiming party count numbers on the form headers
    function updateClaimingCount() {
        count = 0;
        $('.claiming-party-block').each(function (index) {
            count++;
            $(this).find('.claiming-count').text(count);
        });
    }
});

$(document).ready(function () {
    updateClaimingCount(); // Call on page load

    // When "Add More" button is clicked
    $('.addMoreClaim').on('click', function () {
        // You would typically clone the first `.claiming-party-group`, append it, and then:
        $('#claimingPartyContainer').append($('.claiming-party-group:first').clone());
        $('#claimingPartyContainer .claiming-party-group:last input, #claimingPartyContainer .claiming-party-group:last textarea').val('');
        $('#claimingPartyContainer .claiming-party-group:last select').prop('selectedIndex', 0);

        updateClaimingCount();
    });

    // Delegate because remove buttons are dynamically added
    $('#claimingPartyContainer').on('click', '.removeClaim', function () {
        if ($('.claiming-party-group').length > 1) {
            $(this).closest('.claiming-party-group').remove();
            updateClaimingCount();
        }
    });
});


$(document).ready(function () {
    $(document).on('click', '.addConstructionAgreement', function () {
        let html = `
        <div class="row constructionagreement-row mb-3">
            <div class="col-lg-12 text-end mb-2">
                <button type="button" class="btn btn-danger btn-sm removeConstructionAgreement" style="width: 30px;">-</button>
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <label>Cheque No/UPI No</label>
                    <input type="text" name="constructionagreement_cheque_upi_no[]" class="form-control cheque-no" placeholder="Enter Cheque No/UPI No">
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <label>Consideration Amount (Rs.)</label>
                    <input type="text" name="constructionagreement_amount[]" class="form-control amount" placeholder="Enter Amount">
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <label>Bank Name</label>
                    <input type="text" name="constructionagreement_bank[]" class="form-control bank" placeholder="Enter Bank">
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <label>Date</label>
                    <input type="date" name="constructionagreement_date[]" class="form-control date">
                </div>
            </div>
        </div>
        `;
        $('#constructionagreement-container').append(html);
    });

    $(document).on('click', '.removeConstructionAgreement', function () {
        $(this).closest('.constructionagreement-row').remove();
    });
});

$(document).ready(function () {
    $(document).on('click', '.addBanakhat', function () {
        let html = `
        <div class="row banakhat-row mb-3">
            <div class="col-lg-12 text-end mb-2">
                <button type="button" class="btn btn-danger btn-sm removeBanakhat" style="width: 30px;">-</button>
            </div>

            <div class="col-lg-3">
                <div class="form-group">
                    <label>Cheque No/UPI No</label>
                    <input type="text" name="banakhat_cheque_upi_no[]" class="new-control form-control cheque-no whitespace-trim" placeholder="Enter Cheque No/UPI No">
                    <small class="text-danger" id="chequeNoErr"></small>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="form-group">
                    <label>Consideration Amount (Rs.)</label>
                    <input type="text" name="banakhat_amount[]" class="new-control form-control amount whitespace-trim" placeholder="Enter Amount">
                </div>
            </div>

            <div class="col-lg-3">
                <div class="form-group">
                    <label>Bank Name</label>
                    <input type="text" name="banakhat_bank[]" class="new-control form-control bank whitespace-trim" placeholder="Enter Bank">
                </div>
            </div>

            <div class="col-lg-3">
                <div class="form-group">
                    <label>Date</label>
                    <input type="date" name="banakhat_date[]" class="new-control form-control date whitespace-trim">
                </div>
            </div>
        </div>
        `;
        $('#banakhat-container').append(html);
    });

    $(document).on('click', '.removeBanakhat', function () {
        $(this).closest('.banakhat-row').remove();
    });
});

$(document).ready(function () {
    // Add Sale Deed Row
    $(document).on('click', '.addSaledeed', function () {
        let html = `
        <div class="row saledeed-row mb-3">
            <div class="col-lg-12 text-end mb-2">
                <button type="button" class="btn btn-danger btn-sm removeSaledeed" style="width: 30px;">-</button>
            </div>

            <div class="col-lg-3">
                <div class="form-group">
                    <label>Cheque No/UPI No</label>
                    <input type="text" name="saledeed_cheque_upi_no[]" class="new-control form-control cheque-no" placeholder="Enter Cheque No/UPI No">
                </div>
            </div>

            <div class="col-lg-3">
                <div class="form-group">
                    <label>Consideration Amount (Rs.)</label>
                    <input type="text" name="saledeed_amount[]" class="new-control form-control amount" placeholder="Enter Amount">
                </div>
            </div>

            <div class="col-lg-3">
                <div class="form-group">
                    <label>Bank Name</label>
                    <input type="text" name="saledeed_bank[]" class="new-control form-control bank" placeholder="Enter Bank">
                </div>
            </div>

            <div class="col-lg-3">
                <div class="form-group">
                    <label>Date</label>
                    <input type="date" name="saledeed_date[]" class="new-control form-control date">
                </div>
            </div>
        </div>`;
        $('#saledeed-container').append(html);
    });

    // Remove Sale Deed Row
    $(document).on('click', '.removeSaledeed', function () {
        $(this).closest('.saledeed-row').remove();
    });
});

$(document).ready(function () {
        let claimingIndex = 1;

        // Add More button click
        $(document).on('click', '.addMoreClaimGuj', function () {
            claimingIndex++;

            let html = `
            <div class="claiming-party-group-wrapper">
                <div class="card-header border-bottom justify-content-between d-flex flex-wrap align-items-center gap-2">
                    <h3 class="header-title">દાવો કરનાર પક્ષ : <span class="party-index">${claimingIndex}</span></h3>
                    <button type="button" class="btn btn-danger btn-sm removeClaimBlock">- દૂર કરો</button>
                </div>
                <div class="row claiming-party-group mb-3 mt-3">
                    <div class="mb-3 col-lg-3">
                        <label class="form-label">પૂરું નામ</label>
                        <input type="text" name="full_name_claiming[]" class="form-control" placeholder="પૂરું નામ દાખલ કરો">
                    </div>
                    <div class="mb-3 col-lg-3">
                        <label class="form-label">ધર્મ</label>
                        <select class="form-control" name="religion_id_claiming[]">
                            <option value="">ધર્મ પસંદ કરો</option>
                            @foreach ($Religions as $Religion)
                                <option value="{{ $Religion->id }}">{{ $Religion->name_guj }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3 col-lg-3">
                        <label class="form-label">ઉંમર</label>
                        <input type="number" name="age_claiming[]" class="form-control" placeholder="તમારી ઉંમર દાખલ કરો">
                    </div>
                    <div class="mb-3 col-lg-3">
                        <label class="form-label">વ્યવસાય</label>
                        <select class="form-control" name="occupation_id_claiming[]">
                            <option value="">વ્યવસાય પસંદ કરો</option>
                            @foreach ($Occupations as $Occupation)
                                <option value="{{ $Occupation->id }}">{{ $Occupation->name_guj }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3 col-lg-3">
                        <label class="form-label">મોબાઇલ નંબર</label>
                        <input type="tel" name="mobile_no_claiming[]" class="form-control" placeholder="મોબાઇલ નંબર દાખલ કરો">
                    </div>
                    <div class="mb-3 col-lg-3">
                        <label class="form-label">ઓળખનો પુરાવો</label>
                        <select class="form-control" name="id_proof_id[]">
                            <option value="">ઓળખનો પુરાવો પસંદ કરો</option>
                            @foreach ($IdProofTypes as $IdProofType)
                                <option value="{{ $IdProofType->id }}">{{ $IdProofType->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3 col-lg-3">
                        <label class="form-label">ઓળખ પુરાવાનો નંબર</label>
                        <input type="text" name="id_proof_no[]" class="form-control" placeholder="ઓળખ પુરાવાનો નંબર દાખલ કરો">
                    </div>
                    <div class="mb-3 col-lg-3">
                        <label class="form-label">ઇમેઇલ</label>
                        <input type="email" name="email_claiming[]" class="form-control" placeholder="ઇમેઇલ દાખલ કરો">
                    </div>
                    <div class="mb-3 col-lg-3">
                        <label class="form-label">સરનામું</label>
                        <textarea name="address_claiming[]" class="form-control" placeholder="સરનામું દાખલ કરો"></textarea>
                    </div>
                </div>
            </div>`;

            $('#claimingPartyContainer').append(html);
        });

        // Remove button click
        $(document).on('click', '.removeClaimBlock', function () {
            $(this).closest('.claiming-party-group-wrapper').remove();
            // Re-index the titles
            $('.party-index').each(function (index) {
                $(this).text(index + 1);
            });
        });
    });

$(document).on('click', '.addBanakhatGuj', function () {
    let html = `<div class="row banakhat-row-guj">
        <div class="col-lg-12">
            <div class="form-group mt-3" style="float: right;">
                <button type="button" class="btn btn-danger btn-sm removeBanakhatGuj" style="width: 30px;">-</button>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="form-group">
                <label>ચેક નંબર/યુપીઆઈ નંબર</label>
                <input type="text" name="banakhat_cheque_upi_no[]" class="new-control form-control cheque-no whitespace-trim" placeholder="ચેક નંબર/યુપીઆઈ નંબર દાખલ કરો">
                <small class="text-danger" class="chequeNoErr"></small>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="form-group">
                <label>વિચારણાની રકમ (રૂ. )</label>
                <input type="text" name="banakhat_amount[]" class="new-control form-control amount whitespace-trim" placeholder="રકમ દાખલ કરો">
            </div>
        </div>
        <div class="col-lg-3">
            <div class="form-group">
                <label>બેંકનું નામ</label>
                <input type="text" name="banakhat_bank[]" class="new-control form-control bank whitespace-trim" placeholder="બેંકનું નામ દાખલ કરો">
            </div>
        </div>
        <div class="col-lg-3">
            <div class="form-group">
                <label>તારીખ</label>
                <input type="date" name="banakhat_date[]" class="new-control form-control date whitespace-trim">
            </div>
        </div>
    </div>`;
    $('#banakhat-container-guj').append(html);
});
// Remove row
$(document).on('click', '.removeBanakhatGuj', function () {
    $(this).closest('.banakhat-row-guj').remove();
});

$(document).ready(function () {
    // Add new Sale Deed Payment row
    $(document).on('click', '.addSaledeedGuj', function (e) {
        e.preventDefault();
        let html = `
        <div class="row saledeed-row-guj">
            <div class="col-lg-12">
                <div class="form-group mt-3 " style="float: right;">
                    <button type="button" class="btn btn-danger btn-sm removeSaledeedGuj" style="width: 30px;">-</button>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <input type="hidden" name="saledeed_payment_id[]" value="">
                    <label>ચેક નંબર/યુપીઆઈ નંબર</label>
                    <input type="text" name="saledeed_cheque_upi_no[]" class="new-control form-control cheque-no whitespace-trim" placeholder="ચેક નંબર/યુપીઆઈ નંબર દાખલ કરો">
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <label>વિચારણાની રકમ (રૂ. )</label>
                    <input type="text" name="saledeed_amount[]" class="new-control form-control amount whitespace-trim" placeholder="રકમ દાખલ કરો">
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <label>બેંકનું નામ</label>
                    <input type="text" name="saledeed_bank[]" class="new-control form-control bank whitespace-trim" placeholder="બેંકનું નામ દાખલ કરો">
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <label>તારીખ</label>
                    <input type="date" name="saledeed_date[]" class="new-control form-control date whitespace-trim" placeholder="તારીખ દાખલ કરો">
                </div>
            </div>
        </div>`;

        // Append after last row
        $(this).closest('.saledeed-row-guj').after(html);
    });

    // Remove Sale Deed Payment row
    $(document).on('click', '.removeSaledeedGuj', function (e) {
        e.preventDefault();
        $(this).closest('.saledeed-row-guj').remove();
    });
});

$(document).ready(function () {
    // Add new row
    $(document).on('click', '.addConstructionAgreementGuj', function () {
        var row = $(this).closest('.construction-agreement-row-guj');
        var clone = row.clone();

        // Clear input values in cloned row
        clone.find('input').val('');

        // Replace Add button with Remove button
        clone.find('.addConstructionAgreementGuj')
            .removeClass('addConstructionAgreementGuj btn-primary')
            .addClass('removeConstructionAgreementGuj btn-danger')
            .text('-');

        // Append new row after current row
        $('#construction-agreement-container-guj').append(clone);
    });

    // Remove row
    $(document).on('click', '.removeConstructionAgreementGuj', function () {
        $(this).closest('.construction-agreement-row-guj').remove();
    });
});

$(document).ready(function () {

    // ADD Extra Agreement Row - GUJ
    $(document).on('click', '.addExtraAgreementGuj', function () {
        let container = $('#extra-agreement-container-guj');

        // Clone last input row
        let clonedRow = container.find('.extra-agreement-row-guj:last').clone();

        // Reset input values in the cloned row
        clonedRow.find('input').val('');

        // Replace '+' with '-' in new cloned row
        clonedRow.find('.addExtraAgreementGuj')
            .removeClass('addExtraAgreementGuj btn-primary')
            .addClass('removeExtraAgreementGuj btn-danger')
            .html('-');

        container.append(clonedRow);
    });

    // REMOVE Extra Agreement Row - GUJ
    $(document).on('click', '.removeExtraAgreementGuj', function () {
        $(this).closest('.extra-agreement-row-guj').remove();
    });

});

// $(document).ready(function () {

// function handleFormSubmit(formSelector) {
//     $(formSelector).on('submit', function (event) {
//         event.preventDefault();

//         // HTML5 form validation
//         if (!this.checkValidity()) {
//             this.reportValidity(); // Show native browser validation message
//             return false;
//         }

//         let id = $(this).data('id'); // Get data-id from form

//         // Setup CSRF token
//         $.ajaxSetup({
//             headers: {
//                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//             }
//         });

//         // Submit via AJAX
//         $.ajax({
//             url: "{{ route('applications.update', ':id') }}".replace(':id', id),
//             method: 'POST',
//             data: $(this).serialize(),
//             success: function (response) {
//                 if (Array.isArray(response.message)) {
//                     alert(response.message.join('\n'));
//                 } else {
//                     alert('Success: ' + response.message);
//                 }
//             },
//             error: function (xhr) {
//                 let errors = xhr.responseJSON?.errors || ['Unknown error'];
//                 let errorMessage = Object.values(errors).flat().join('\n');
//                 alert(errorMessage);
//             }
//         });
//     });
// }

// // Call the function for both forms
// handleFormSubmit('#applicationFormEng');
// handleFormSubmit('#applicationFormGuj');

// });

$(document).on('click', '.removeClaim', function() {
    let button = $(this);
    let id = button.data('id');

    if (!id) {
        alert('Invalid item ID');
        return;
    }

    if (!confirm('Are you sure you want to remove this claiming party?')) {
        return;
    }

    $.ajax({
        url: 'claiming-party/' + id,  // Adjust the route URL as per your Laravel routes
        type: 'DELETE',
        data: {
            _token: '{{ csrf_token() }}'  // CSRF token for security
        },
        success: function(response) {
            if(response.success) {
                // Remove the claiming-party-block from DOM
                button.closest('.claiming-party-block').remove();

                // Optionally update the Claiming Party numbers here
                $('.claiming-count').each(function(index) {
                    $(this).text(index + 1);
                });
            } else {
                alert('Failed to delete. Please try again.');
            }
        },
        error: function(xhr) {
            alert('Error occurred: ' + xhr.responseText);
        }
    });
});

$(document).on('click', '.removeClaimBlock', function () {
    let claimingPartyId = $(this).data('id');
    let cardBlock = $(this).closest('.card-header').next('.claiming-party-group').addBack();

    if (confirm("Are you sure you want to delete this entry?")) {
        $.ajax({
            url: 'remove-claiming-party/' + claimingPartyId,
            type: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function (response) {
                if (response.success) {
                    cardBlock.remove();
                } else {
                    alert('કોઈ ભૂલ થઈ. ફરીથી પ્રયત્ન કરો.');
                }
            }
        });
    }
});

$(document).on('click', '.removeBanakhat, .removeBanakhatGuj', function () {
    if (!confirm('Are you sure you want to delete this record?')) return;

    // Detect which class the clicked button belongs to
    let row;
    if ($(this).hasClass('removeBanakhat')) {
        row = $(this).closest('.banakhat-row');
    } else {
        row = $(this).closest('.banakhat-row-guj');
    }

    let paymentId = row.find('input[name="banakhat_payment_id[]"]').val();

    if (paymentId) {
        $.ajax({
            url: '{{ route('banakhat.delete') }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                id: paymentId
            },
            success: function (response) {
                if (response.success) {
                    row.remove();
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function () {
                alert('Something went wrong!');
            }
        });
    } else {
        // Just remove from DOM if it's not saved in DB
        row.remove();
    }
});


$(document).on('click', '.removeSaledeed, .removeSaledeedGuj', function () {
    const button = $(this);
    const id = button.data('id');
    const row = button.closest('.saledeed-row, .saledeed-row-guj');

    if (!confirm("Are you sure you want to delete this entry?")) return;

    if (id) {
        $.ajax({
            url: `delete-saledeed-payment/${id}`,
            type: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}' // More secure way to get token
            },
            success: function (response) {
                if (response.success) {
                    row.remove();
                } else {
                    alert(response.message || 'Something went wrong!');
                }
            },
            error: function (xhr) {
                console.error(xhr.responseText);
                alert('Server error occurred!');
            }
        });
    } else {
        row.remove();
    }
});




</script>

@endsection