@extends('layouts.main')
@section('title', $data['title'])
@section('content')

    <style>
        /* .modal-body .input-group-text {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            padding: 0;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            outline: 0;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            width: 60px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        } */

        select#form-control {
            height: 34px;
        }

        select#form-control {
            height: 34px;
            outline: 0;
            border: none;
        }

        .input-group-text .select2-container--default .select2-selection--single .select2-selection__arrow b {
            left: 75%;
        }

        .input-group-text .select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 0;
        }

        input {
            width: 250px;
            padding: 10px;
            border-radius: 2px;
            border: 1px solid #ccc;
        }

        input::placeholder {
            color: #BBB;
        }

        .card-body {
            padding: 2rem 2rem;
        }

        h3.mt-1.fw-bold {
            font-size: 1.5rem;
            font-weight: 700 !important;
            line-height: 1;
            margin-top: 5px !important;
        }

        .form-label.bill-label {
            position: unset;
        }

        .page-content {
            padding: calc(70px + 24px) calc(24px / 2) 150px calc(24px / 2)
        }

        #addcustomerModalLabel,
        #discountModalLabel {
            color: #3751A1;
            font-weight: bold;
            padding: 10px;
        }

        /* Modal Styles */
        .modal-header {
            /* background-color: #f8f9fa; */
            /* border-bottom: 2px solid #dee2e6; */
            padding: 0px 7px;
        }

        .form-label {
            position: static;
            /* font-size: initial; */
            font-size: 14px;
            left: initial;
            top: initial;
            transform: none;
            background-color: transparent;
            color: initial;
            padding: initial;
            margin: initial;
            transform-origin: initial;
            pointer-events: initial;
        }

        .form-label {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .form-control {
            border: 1px solid #ced4da;
            border-radius: 5px;
            padding: 0.5rem;
        }

        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .form-control {
            border: 1px solid #ced4da;
            border-radius: 6px;
            padding: 0.5rem;
        }

        ::-webkit-scrollbar {
            width: 16px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #3751A1;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #3751A1;
            border-radius: 20px;
            border: 6px solid transparent;
            background-clip: content-box;
        }

        #Customerdetail,
        #Branchdetail {
            width: 100%;
            border-collapse: separate;
            border: 1px solid #e1e1e1;
            padding: 10px;
            border-radius: 12px;
        }

        /* #Customerdetail td,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                #Branchdetail td {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    border: 1px solid #ddd;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    padding: 10px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    color: #000;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                } */

        #Customerdetail .label-column,
        #Branchdetail .label-column {
            /* width: 200px; */
            font-weight: bold;
            /* background-color: #F5F6FA; */
            white-space: nowrap;
            color: #000;
        }

        #Customerdetail .address-column,
        #Branchdetail .address-column {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 400px;
            display: block;
        }

        .datepicker table tr td span {
            display: block;
            width: 23%;
            height: 54px;
            /* line-height: 54px; */
            float: left;
            /* margin: 1%; */
            cursor: pointer;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            align-content: center;
        }

        .datepicker .datepicker-switch {
            width: 145px;
        }

        .datepicker td,
        .datepicker th {
            text-align: center;
            width: 20px;
            height: 20px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: none;
        }

        .text-danger {
            font-size: 100%;

        }

        #additem thead th:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        #additem thead th:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;

        }

        .table-bordered {
            border: 1px solid #ddd;
            border-radius: 10px;
            overflow: hidden;
        }

        .table-bordered th,
        .table-bordered td {
            border: none;
        }

        .Branchdetail,
        .customer_detail,
        .shipping_to_detail {
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #ddd;
            background: #fff;
        }

        .modal-title {
            font-weight: bold;
            font-size: 1.25rem;
        }

        #seaction_family_detail .table-responsive {
            width: 100%;
            max-height: 500px;
            /* Adjust as needed */
            overflow-x: auto;
            overflow-y: auto;

                {
                    {
                    -- position: relative;
                    --
                }
            }
        }

        #seaction_family_detail .table {
            width: 100%;
            /* Ensures the table overflows horizontally */
        }

        #seaction_family_detail .table thead {
            position: sticky;
            top: 0;
            background: white;
            z-index: 10;
        }

        button#sales_order_checkout {
            height: auto;
        }

        .title-row {
            font-size: 22px;
            font-weight: bold;
            color: #333;
        }

        @media (max-width: 1347px) {
            #seaction_family_detail .table {
                width: 260% !important;
                /* Ensures the table overflows horizontally */
            }
        }

        @media (max-width: 750px) {
            #seaction_family_detail .table {
                width: 460% !important;
                /* Ensures the table overflows horizontally */
            }
        }

        @media (max-width: 415px) {
            #seaction_family_detail .table {
                width: 650% !important;
                /* Ensures the table overflows horizontally */
            }
        }

        #shipping_to_detail_address_show .table-bordered td,
        #customer_detail_address_show .table-bordered td {
            padding: 4px;
            width: 20%;
        }

        #calendar-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            color: #3751A1;
            pointer-events: none;
            /* Prevents icon from being clickable */
        }

        #seaction_family_detail tbody tr:nth-child(odd),
        #seaction_family_detail tbody tr:nth-child(odd) {
            background-color: #ddddddf2;
            outline: thin solid #8b8b8b;
            border-radius: 5px;
        }

        #seaction_family_detail tbody tr:nth-child(even),
        #seaction_family_detail tbody tr:nth-child(even) {
            background-color: #4f92ff45;
            outline: thin solid #5b98fc;
            border-radius: 5px;
        }

        a#auto_filled_address {
            height: auto;
        }

        input#company_address_line_1 {
            display: inline-block;
            width: 70%;
        }

        .address {
            width: 100%;
            display: block;
        }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="assets/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <div class="page-content">
        <div class="container-fluid full_page">
            <div class="row align-items-center mb-2 mt-2">
            </div>
            <form id="formParty" method="POST" class="needs-validation" action="{{ route('party.save') }}" novalidate
                enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="party_id" name="party_id" value="0">
                <input type="hidden" id="party_family_member_count" name="party_family_member_count" value="0">


                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="pills-personal-detail-tab" data-bs-toggle="pill"
                            href="#pills-personal-detail" role="tab" aria-controls="pills-personal-detail"
                            aria-selected="true">Personal Detail</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-company-detail-tab" data-bs-toggle="pill" href="#pills-company-detail"
                            role="tab" aria-controls="pills-company-detail" aria-selected="true">Company Detail</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-other-detail-tab" data-bs-toggle="pill" href="#pills-other-detail"
                            role="tab" aria-controls="pills-other-detail" aria-selected="false">Other Detail</a>
                    </li>
                    {{-- <li class="nav-item">
                        <a class="nav-link" id="pills-family-detail-tab" data-bs-toggle="pill" href="#pills-family-detail"
                            role="tab" aria-controls="pills-family-detail" aria-selected="false">Family Detail</a>
                    </li> --}}
                </ul>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-personal-detail" role="tabpanel"
                                        aria-labelledby="pills-personal-detail-tab">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Account Name <code>*</code> </label>
                                                    <input type="text" name="party_account_name" id="party_account_name"
                                                        placeholder="Account name" class="form-control" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Account Group <code>*</code></label>
                                                    <select class="form-select select2-ajax" id="party_account_group"
                                                        name="party_account_group" required>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">First Name <code>*</code></label>
                                                    <input type="text" name="party_first_name" id="party_first_name"
                                                        placeholder="First name" class="form-control" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Last Name <code>*</code></label>
                                                    <input type="text" name="party_last_name" id="party_last_name"
                                                        placeholder="Last Name" class="form-control" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Phone Number</label>
                                                    <input type="number" name="party_phone_number" id="party_phone_number"
                                                        placeholder="Phone Number" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Email</label>
                                                    <input type="email" name="party_email" id="party_email"
                                                        placeholder="Email" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Marital Status</label>
                                                    <select class="form-select select2-ajax" id="party_marital_status"
                                                        name="party_marital_status">
                                                        <option value="Married">Married</option>
                                                        <option value="Unmarried">Unmarried</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Gender</label>
                                                    <select class="form-select select2-ajax" id="party_gender"
                                                        name="party_gender">
                                                        <option value="Male">Male</option>
                                                        <option value="Female">Female</option>
                                                        <option value="Other">Other</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">House No / Street No <code>*</code></label>
                                                    <input type="text" name="party_address_line_1" id="party_address_line_1"
                                                        placeholder="House No" class="form-control" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Soc Name</label>
                                                    <input type="text" name="party_address_line_2" id="party_address_line_2"
                                                        placeholder="Soc Name" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Area</label>
                                                    <input type="text" name="party_area" id="party_area" placeholder="Area"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Pincode <code>*</code></label>
                                                    <input type="number" name="party_pincode" id="party_pincode"
                                                        placeholder="Pincode" class="form-control" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Country <code>*</code></label>
                                                    <select class="form-select select2-ajax" id="party_country_id"
                                                        name="party_country_id" required>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">State <code>*</code></label>
                                                    <select class="form-select select2-ajax" id="party_state_id"
                                                        name="party_state_id" required>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">City <code>*</code></label>
                                                    <select class="form-select select2-ajax" id="party_city_id"
                                                        name="party_city_id" required>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade show" id="pills-company-detail" role="tabpanel"
                                        aria-labelledby="pills-company-detail-tab">
                                        <div class="row">
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Company Logo</label>
                                                    <input type="file" name="company_logo" id="company_logo"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Company Name <code>*</code></label>
                                                    <input type="text" name="company_name" id="company_name"
                                                        placeholder=" Company Name" class="form-control" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Phone Number</label>
                                                    <input type="number" name="company_phone_number"
                                                        id="company_phone_number" placeholder=" Phone Number"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Email</label>
                                                    <input type="email" name="company_email" id="company_email"
                                                        placeholder=" Email" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Website Link</label>
                                                    <input type="text" name="company_website_link" id="company_website_link"
                                                        placeholder=" Website Link" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Office No / Street No <code>*</code></label>
                                                    <div class="address">
                                                        <input type="text" name="company_address_line_1"
                                                            id="company_address_line_1" placeholder=" House No"
                                                            class="form-control" required>
                                                        <a class="btn btn-primary" id="auto_filled_address"><i
                                                                class="bx bxs-map"
                                                                title="same as personal detail address"></i></a>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Building Name</label>
                                                    <input type="text" name="company_address_line_2"
                                                        id="company_address_line_2" placeholder=" Soc Name"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Area</label>
                                                    <input type="text" name="company_area" id="company_area"
                                                        placeholder=" Area" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Pincode <code>*</code></label>
                                                    <input type="number" name="company_pincode" id="company_pincode"
                                                        placeholder=" Pincode" class="form-control" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Country <code>*</code></label>
                                                    <select class="form-select select2-ajax" id="company_country_id"
                                                        name="company_country_id" required>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">State <code>*</code></label>
                                                    <select class="form-select select2-ajax" id="company_state_id"
                                                        name="company_state_id" required>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">City <code>*</code></label>
                                                    <select class="form-select select2-ajax" id="company_city_id"
                                                        name="company_city_id" required>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Pancard No.</label>
                                                    <input type="text" name="company_pan_card_no" id="company_pan_card_no"
                                                        placeholder=" Pincode" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Gst No <code>*</code></label>
                                                    <input type="text" name="company_gst_no" id="company_gst_no"
                                                        placeholder="Gst No" class="form-control" required>
                                                </div>
                                            </div>
                                            {{-- <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3 ajax-select">
                                                    <label class="form-label">Gst Type <code>*</code></label>
                                                    <select class="form-select select2-ajax" id="company_gst_type"
                                                        name="company_gst_type" required>
                                                        <option value="Local">Local</option>
                                                        <option value="Inter State">Inter State</option>
                                                    </select>
                                                </div>
                                            </div> --}}
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3">
                                                    <label class="form-label">Remark</label>
                                                    <input type="text" name="company_remark" id="company_remark"
                                                        placeholder=" Remark" class="form-control">
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-other-detail" role="tabpanel"
                                        aria-labelledby="pills-other-detail-tab">
                                        <div class="row">
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3">
                                                    <label class="form-label">UPI Id</label>
                                                    <input type="text" name="other_upi_id" id="other_upi_id"
                                                        placeholder=" UPI Id" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3">
                                                    <label class="form-label">Passport</label>
                                                    <input type="text" name="other_passport" id="other_passport"
                                                        placeholder=" Passport" class="form-control">
                                                </div>
                                            </div>

                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3">
                                                    <label class="form-label">Bank Name</label>
                                                    <input type="text" name="other_bank_name" id="other_bank_name"
                                                        placeholder=" Bank Name" class="form-control">
                                                </div>
                                            </div>

                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3">
                                                    <label class="form-label">Branch Name</label>
                                                    <input type="text" name="other_branch_name" id="other_branch_name"
                                                        placeholder=" Branch Name" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3">
                                                    <label class="form-label">Account No</label>
                                                    <input type="text" name="other_account_no" id="other_account_no"
                                                        placeholder=" Account No" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3">
                                                    <label class="form-label">IFSC Code</label>
                                                    <input type="text" name="other_ifsc_code" id="other_ifsc_code"
                                                        placeholder=" IFSC Code" class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-6 col-sm-12 mb-2">
                                                <div class="mb-3">
                                                    <label class="form-label">Remark</label>
                                                    <input type="text" name="other_remark" id="other_remark"
                                                        placeholder=" Remark" class="form-control">
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="tab-pane fade" id="pills-family-detail" role="tabpanel"
                                        aria-labelledby="pills-family-detail-tab">
                                        <div class="row" id="seaction_family_detail">
                                            <div class="row align-items-center mb-2 mt-2">
                                                <div class="col-md-6">
                                                    <h4 class="title-row">Family Detail</h4>
                                                </div>
                                                <div
                                                    class="col-12 col-md-6 d-flex justify-content-center justify-content-md-end mt-2 mt-md-0 text-nowrap">
                                                    <button type="button" class="btn btn-primary"
                                                        onclick="addFamilyMember()">
                                                        <i class="bx bx-plus font-size-16 align-middle me-2"></i> Add
                                                        Family
                                                        Member</button>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered text-center mb-0 table-nowrap">
                                                        <thead class="table-light">
                                                            <tr>
                                                                <th style="width: 5%">Image</th>
                                                                <th style="width: 12%">Member Name</th>
                                                                <th style="width: 12%">Relation</th>
                                                                <th style="width: 12%">Mobile No</th>
                                                                <th style="width: 12%">Email</th>
                                                                <th style="width: 12%">Marital Status & Gender</th>
                                                                <th style="width: 12%">Birth Date</th>
                                                                <th style="width: 12%">Anniversary Date</th>
                                                                <th style="width: 12%">Occupation & Remark</th>
                                                                <th style="width: 5%">Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="cartTbody">

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-md-12 col-sm-12">
                        <div class="card h-100 shadow-sm">
                            <div class="card-body">
                                <h5 class="mb-4 text-black">Opening Balance</h5>

                                <div class="row g-4">
                                    <!-- Amount -->
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="mb-3">
                                            <label for="opening_amount" class="form-label">Amount</label>
                                            <input type="number" name="opening_amount" id="opening_amount"
                                                class="form-control" value="0">
                                        </div>
                                    </div>

                                    <!-- Amount Type -->
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="mb-3">
                                            <label for="opening_amount_type" class="form-label">Amount Type</label>
                                            <select class="form-select select2-ajax" id="opening_amount_type"
                                                name="opening_amount_type">
                                                <option value="Credit">Credit</option>
                                                <option value="Debit">Debit</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-4">

                                    <!-- Gold Weight -->
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="mb-3">
                                            <label for="opening_gold" class="form-label">Gold Weight</label>
                                            <input type="number" name="opening_gold" id="opening_gold" class="form-control"
                                                value="0">
                                        </div>
                                    </div>

                                    <!-- Gold Weight Type -->
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="mb-3">
                                            <label for="opening_gold_type" class="form-label">Gold Weight Type</label>
                                            <select class="form-select select2-ajax" id="opening_gold_type"
                                                name="opening_gold_type">
                                                <option value="Credit">Credit</option>
                                                <option value="Debit">Debit</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-4">
                                    <!-- Silver Weight -->
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="mb-3">
                                            <label for="opening_silver" class="form-label">Silver Weight</label>
                                            <input type="number" name="opening_silver" id="opening_silver"
                                                class="form-control" value="0">
                                        </div>
                                    </div>

                                    <!-- Silver Weight Type -->
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="mb-3">
                                            <label for="opening_silver_type" class="form-label">Silver Weight Type</label>
                                            <select class="form-select select2-ajax" id="opening_silver_type"
                                                name="opening_silver_type">
                                                <option value="Credit">Credit</option>
                                                <option value="Debit">Debit</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div> <!-- End inner row -->
                        </div>
                    </div>
                </div>
        </div>

        <button type="submit" class="btn btn-primary shortcut_key_save float-end" id="saveParty"> Save
            <small>(Alt + S)</small>
        </button>
        </form>
    </div>
    </div>
@endsection('content')
@section('custom-scripts')
    <script src="assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="assets/js/pages/form-validation.init.js"></script>
    <script src="assets/libs/parsleyjs/parsley.min.js"></script>
    <script src="assets/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script>
    <script src="assets/js/pages/jquery.form.js"></script>
    <script type="text/javascript">
        var csrfToken = $("[name=_token").val();
        var AjaxSearchPartyAccountGroup = "{{ route('party.account.group.search') }}";
        var AjaxSelectCIty = "{{ route('party.city.search') }}";
        var AjaxSelectState = "{{ route('party.state.search') }}";
        var AjaxSelectCountry = "{{ route('party.country.search') }}";
        var AjaxURLPartyStatusSearch = "{{ route('party.status.search') }}";
        var reditectURL = "{{ route('party.table') }}";
        var getDetail = "{{ route('party.detail') }}";
        var MemberCount = 0;
        var ViewId = {{ $data['view_id'] }};


        $(document).ready(function () {

            if (ViewId != 0) {
                GetDetail(ViewId);
            }

            var option = {
                beforeSubmit: showRequest,
                success: showResponse
            };
            $("#formParty").ajaxForm(option);
        });

        $(document).on('click', '#auto_filled_address', function () {
            // console.log("Auto-fill button clicked");
            var house_no = $("#party_address_line_1").val();
            var soc_name = $("#party_address_line_2").val();
            var area = $("#party_area").val();
            var pincode = $("#party_pincode").val();
            var country_id = $("#party_country_id").val();
            var state_id = $("#party_state_id").val();
            var city_id = $("#party_city_id").val();
            var selectedCountry = $('#party_country_id option:selected').text();
            var selectedState = $('#party_state_id option:selected').text();
            var selectedCity = $('#party_city_id option:selected').text();

            $("#company_address_line_1").val(house_no);
            $("#company_address_line_2").val(soc_name);
            $("#company_area").val(area);
            $("#company_pincode").val(pincode);
            var newOption = new Option(selectedCountry, country_id, true, true);
            $('#company_country_id').append(newOption).trigger('change');

            var newOption = new Option(selectedState, state_id, true, true);
            $('#company_state_id').append(newOption).trigger('change');

            var newOption = new Option(selectedCity, city_id, true, true);
            $('#company_city_id').append(newOption).trigger('change');

        });

        function showRequest(FormData, jqForm, option) {
            // generateHierarchyCode($("#main_master_name").val());
            var queryString = $.param(FormData);
            $("#saveParty").html("Saving...");
            $("#saveParty").prop("disabled", true);
            return true;
        }

        function showResponse(responseText, statusText, xhr, $form) {
            $("#saveParty").html("Save <small>(Alt + S)</small>");
            $("#saveParty").prop("disabled", false);
            if (responseText['status'] == 1) {
                toastr['success'](responseText['msg']);
                setTimeout(function () {
                    window.location = reditectURL;
                }, 2000); // 2000 milliseconds = 2 seconds
            } else if (responseText['status'] == 0) {

                if (responseText['data']) {
                    $.each(responseText['data'], function (field, errors) {
                        $.each(errors, function (index, error) {
                            toastr['error'](error);
                        });
                    });
                } else {
                    toastr['error'](responseText['msg']);
                }
            }
        }

        function addFamilyMember(Data = null) {
            // console.log(Data);

            MemberCount++;
            $('#party_family_member_count').val(MemberCount);

            var Html = '<tr id="member_main_row_' + MemberCount + '">';



            // Image Upload
            Html += '<td style="display: inline-grid;">' +
                ((Data && Data.image) ?
                    '' :
                    '<i class="bx bxs-cloud-upload font-size-18 upload-img-icon mt-2" data-id="' + MemberCount + '"></i>' +
                    '<small class="text-muted upload-img-icon" data-id="' + MemberCount + '">Image Set</small>'
                ) +
                '<input type="file" class="d-none upload-img" data-id="' + MemberCount + '" id="party_member_upload_img_' +
                MemberCount + '" name="party_member_upload_img_' + MemberCount + '">' +
                '<img class="uploaded-img ' + ((Data && Data.image) ? '' : 'd-none') + '" src="' +
                ((Data && Data.image) ? Data.image : '') + '" alt="" data-id="' + MemberCount +
                '" id="party_member_upload_img_show_' +
                MemberCount + '" width="50" height="50"></td>';



            // Member Name
            Html += '<td><input type="text" name="party_family_member_name_' + MemberCount +
                '" id="party_family_member_name_' + MemberCount +
                '" class="form-control" placeholder="Member Name" value="' +
                (Data ? Data.member_name : '') + '"></td>';



            // Member Relation
            Html += '<td><input type="text" name="party_family_relation_' + MemberCount +
                '" id="party_family_relation_' + MemberCount +
                '" class="form-control" placeholder="Member Relation" value="' +
                (Data ? Data.relation : '') + '"></td>';

            // Mobile Number
            Html += '<td><input type="number" name="party_family_number_' + MemberCount +
                '" id="party_family_number_' + MemberCount + '" class="form-control" placeholder="Member Number" value="' +
                (Data ? Data.mobile_no : '') + '"></td>';

            // Email
            Html += '<td><input type="email" name="party_family_email_' + MemberCount +
                '" id="party_family_email_' + MemberCount + '" class="form-control" placeholder="Member Email" value="' +
                (Data ? Data.email : '') + '"></td>';


            let maritalStatus = Data && Data.marital_status ? Data.marital_status : '';
            let gender = Data && Data.gender ? Data.gender : '';

            // Marital Status
            Html +=
                '<td> <div class="row"><div class="col-12"> <select class="form-select select2-ajax" id="party_family_marital_status_' +
                MemberCount + '" name="party_family_marital_status_' + MemberCount + '" required>';
            Html += '<option value="Married" ' + (maritalStatus === 'Married' ? 'selected' : '') + '>Married</option>';
            Html += '<option value="Unmarried" ' + (maritalStatus === 'Unmarried' ? 'selected' : '') +
                '>Unmarried</option>';
            Html += '</select></div>';
            // Gender
            Html += '<div class="col-12 mt-2"><select class="form-select select2-ajax" id="party_family_gender_' +
                MemberCount + '" name="party_family_gender_' + MemberCount + '" required>';
            Html += '<option value="Male" ' + (gender === 'Male' ? 'selected' : '') + '>Male</option>';
            Html += '<option value="Female" ' + (gender === 'Female' ? 'selected' : '') + '>Female</option>';
            Html += '<option value="Other" ' + (gender === 'Other' ? 'selected' : '') + '>Other</option>';
            Html += '</select></div></div></td>';

            // Birth Date
            Html +=
                '<td><div class=""> <input type="text" class="form-control datepicker" placeholder="dd-mm-yyyy" name="party_family_birth_date_' +
                MemberCount + '" id="party_family_birth_date_' + MemberCount +
                '" autocomplete="off" value="' + (Data ? formatDate(Data.birth_date) : '') +
                '"></div></td>';

            // Anniversary Date
            Html +=
                '<td><div class=""><input type="text" class="form-control datepicker" placeholder="dd-mm-yyyy" name="party_family_anniversary_date_' +
                MemberCount + '" id="party_family_anniversary_date_' + MemberCount +
                '" autocomplete="off" value="' + (Data ? formatDate(Data.anniversary_date) : '') +
                '"></div></td>';

            // Occupation
            Html += '<td><div class="row"><div class="col-12"><input type="text" name="party_family_occupation_' +
                MemberCount +
                '" id="party_family_occupation_' + MemberCount +
                '" class="form-control" placeholder="Member Occupation" value="' +
                (Data ? Data.occupation : '') + '"></div>';

            // Remark
            Html += '<div class="col-12 mt-2"><input type="text" name="party_family_remark_' + MemberCount +
                '" id="party_family_remark_' + MemberCount + '" class="form-control" placeholder="Member Remark" value="' +
                (Data ? Data.remark : '') + '"></div></div>';

            // Remove Icon & Hidden Input for ID
            Html +=
                '<td class="align-content-center"><i class="bx bxs-trash-alt text-danger remove-member font-size-18" onclick="removeFamilyMember(' +
                MemberCount + ')"></i><input type="hidden" id="party_family_member_id_' + MemberCount +
                '" name="party_family_member_id_' + MemberCount + '" value="' + (Data ? Data.id : 0) + '"></td>';

            Html += '</tr>';

            $('#cartTbody').append(Html);
            $('.datepicker').datepicker({
                format: 'dd-mm-yyyy',
                autoclose: true
            });

            $('#party_family_marital_status_' + MemberCount + ', #party_family_gender_' + MemberCount + '')
                .select2({
                    placeholder: 'Please select',
                });
        }

        // Function to format date from "YYYY-MM-DD HH:MM:SS" to "DD-MM-YYYY"
        function formatDate(dateString) {
            if (!dateString) return '';
            let date = new Date(dateString);
            let day = ('0' + date.getDate()).slice(-2);
            let month = ('0' + (date.getMonth() + 1)).slice(-2);
            let year = date.getFullYear();
            return `${day}-${month}-${year}`;
        }

        function removeFamilyMember(memberId) {
            $('#member_main_row_' + memberId).remove();
        }
        $("#party_account_group").select2({
            allowClear: true,ajax: {
                url: AjaxSearchPartyAccountGroup,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page,
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Please select',
        });

        $('#party_state_id').select2({
                allowClear: true,allowClear: true,
            ajax: {
                url: AjaxSelectState,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page,
                        "country_id": function () {
                            return $('#party_country_id').val();
                        }
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    var results = data.results.map(function (state) {
                        return {
                            id: state.id,
                            text: state.text
                        };
                    });

                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Please select',
        });
        $('#party_city_id').select2({
                allowClear: true,allowClear: true,
            ajax: {
                url: AjaxSelectCIty,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page,
                        "country_id": function () {
                            return $('#party_country_id').val();
                        },
                        "state_id": function () {
                            return $('#party_state_id').val();
                        }
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    var results = data.results.map(function (state) {
                        return {
                            id: state.id,
                            text: state.text
                        };
                    });

                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Please select',
        });

        $('#party_country_id').select2({
                allowClear: true,allowClear: true,
            ajax: {
                url: AjaxSelectCountry,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page,
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    var results = data.results.map(function (state) {
                        return {
                            id: state.id,
                            text: state.text
                        };
                    });

                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Please select',
        });

        $('#party_status').select2({
                allowClear: true,allowClear: true,
            ajax: {
                url: AjaxURLPartyStatusSearch,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page,
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    var results = data.results.map(function (state) {
                        return {
                            id: state.id,
                            text: state.text
                        };
                    });

                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Please select',
        });
        $('#party_country_id').on('select2:open', function () {
            $(this).next('.select2').addClass('focused');
        });
        $('#party_state_id').on('select2:open', function () {
            $(this).next('.select2').addClass('focused');
        });
        $('#party_city_id').on('select2:open', function () {
            $(this).next('.select2').addClass('focused');
        });
        $('#packages').on('select2:open', function () {
            $(this).next('.select2').addClass('focused');
        });
        $('#party_country_id').on('change', function () {
            $("#party_state_id").empty().trigger('change');
            $("#party_city_id").empty().trigger('change');
        });
        $('#party_state_id').on('change', function () {
            $("#party_city_id").empty().trigger('change');
        });

        $('#company_state_id').select2({    
                allowClear: true,allowClear: true,
            ajax: {
                url: AjaxSelectState,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page,
                        "country_id": function () {
                            return $('#company_country_id').val();
                        }
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    var results = data.results.map(function (state) {
                        return {
                            id: state.id,
                            text: state.text
                        };
                    });

                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Please select',
        });
        $('#company_city_id').select2({
                allowClear: true,allowClear: true,
            ajax: {
                url: AjaxSelectCIty,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page,
                        "country_id": function () {
                            return $('#company_country_id').val();
                        },
                        "state_id": function () {
                            return $('#company_state_id').val();
                        }
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    var results = data.results.map(function (state) {
                        return {
                            id: state.id,
                            text: state.text
                        };
                    });

                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Please select',
        });

        $('#company_country_id').select2({
                allowClear: true,allowClear: true,
            ajax: {
                url: AjaxSelectCountry,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page,
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;

                    var results = data.results.map(function (state) {
                        return {
                            id: state.id,
                            text: state.text
                        };
                    });

                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Please select',
        });

        $('#company_country_id').on('select2:open', function () {
            $(this).next('.select2').addClass('focused');
        });
        $('#company_state_id').on('select2:open', function () {
            $(this).next('.select2').addClass('focused');
        });
        $('#company_city_id').on('select2:open', function () {
            $(this).next('.select2').addClass('focused');
        });
        $('#packages').on('select2:open', function () {
            $(this).next('.select2').addClass('focused');
        });
        $('#company_country_id').on('change', function () {
            $("#company_state_id").empty().trigger('change');
            $("#company_city_id").empty().trigger('change');
        });
        $('#company_state_id').on('change', function () {
            $("#company_city_id").empty().trigger('change');
        });

        $('#opening_amount_type, #opening_gold_type, #opening_silver_type, #party_gst_type, #party_marital_status, #party_gender, #company_gst_type')
            .select2({
                placeholder: 'Please select',
            });

        $(document).on('click', '.upload-img-icon', function () {
            var id = $(this).data('id');
            $('#party_member_upload_img_' + id).click();
        });

        $(document).on('change', '.upload-img', function () {
            var id = $(this).data('id');
            var file = this.files[0];

            if (file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#party_member_upload_img_show_' + id)
                        .attr('src', e.target.result)
                        .removeClass('d-none');

                    $('.upload-img-icon[data-id="' + id + '"]').hide();
                };
                reader.readAsDataURL(file);
            }
        });

        $(document).on('click', '.uploaded-img', function () {
            var id = $(this).data('id');
            $('#party_member_upload_img_' + id).click();
        });

        function GetDetail(Id) {
            $.ajax({
                type: 'GET',
                url: getDetail + "?id=" + Id,
                success: function (resultData) {
                    if (resultData['status'] == 1) {
                        var Party = resultData['data']['party'];
                        var Other = resultData['data']['other'];
                        var Family = resultData['data']['family'];
                        var Company = resultData['data']['company'];

                        // Setting Party details
                        $('#party_id').val(Id);


                        $('#party_account_name').val(Party['account_name']);
                        $('#party_first_name').val(Party['first_name']);
                        $('#party_last_name').val(Party['last_name']);
                        $('#party_phone_number').val(Party['phone_number']);
                        $('#party_email').val(Party['email']);
                        $('#party_marital_status').val(Party['marital_status']).trigger('change');
                        $('#party_gender').val(Party['gender']).trigger('change');
                        $('#party_address_line_1').val(Party['address_line_1']);
                        $('#party_address_line_2').val(Party['address_line_2']);
                        $('#party_area').val(Party['area']);
                        $('#party_pincode').val(Party['pincode']);
                        $('#party_aadhar_no').val(Party['aadhar_no']);
                        $('#party_pancard_no').val(Party['pan_card_no']);

                        $('#company_name').val(Company['company_name']);
                        $('#company_phone_number').val(Company['phone_number']);
                        $('#company_email').val(Company['email']);
                        $('#company_address_line_1').val(Company['address_line_1']);
                        $('#company_address_line_2').val(Company['address_line_2']);
                        $('#company_area').val(Company['area']);
                        $('#company_website_link').val(Company['website_link']);
                        $('#company_pincode').val(Company['pincode']);
                        $('#company_pan_card_no').val(Company['pan_card_no']);
                        $('#company_gst_no').val(Company['gst_no']);
                        $('#company_gst_type').val(Company['gst_type']).trigger('change');
                        $('#company_remark').val(Company['remark']);

                        if (Party['birth_date']) {
                            $('#party_birth_date').val(new Date(Party['birth_date']).toISOString().split('T')[
                                0]);
                        }
                        if (Party['anniversary_date']) {
                            $('#party_anniversary_date').val(new Date(Party['anniversary_date']).toISOString()
                                .split('T')[0]);
                        }

                        $('#opening_amount').val(parseFloat(Party['opening_amount']).toFixed(2));
                        $('#opening_amount_type').val(Party['opening_amount_type']).trigger('change');
                        $('#opening_gold').val(parseFloat(Party['opening_gold_weight']).toFixed(2));
                        $('#opening_gold_type').val(Party['opening_gold_weight_type']).trigger('change');
                        $('#opening_silver').val(parseFloat(Party['opening_silver_weight']).toFixed(2));
                        $('#opening_silver_type').val(Party['opening_silver_weight_type']).trigger('change');

                        if (Party['account_group'] != null) {
                            var newOption = new Option(Party['account_group_name'], Party['account_group'],
                                false,
                                false);
                            $('#party_account_group').append(newOption).trigger('change');
                            $("#party_account_group").val("" + Party['account_group'] + "");
                            $('#party_account_group').trigger('change');
                        }
                        if (Party['status'] != null) {
                            var newOption = new Option(Party['status_name'], Party['status'], false, false);
                            $('#party_status').append(newOption).trigger('change');
                            $("#party_status").val("" + Party['status'] + "");
                            $('#party_status').trigger('change');
                        }
                        if (Party['country_id'] != null) {
                            var newOption = new Option(Party['country_name'], Party['country_id'], false,
                                false);
                            $('#party_country_id').append(newOption).trigger('change');
                            $("#party_country_id").val("" + Party['country_id'] + "");
                            $('#party_country_id').trigger('change');
                        }
                        if (Party['state_id'] != null) {
                            var newOption = new Option(Party['state_name'], Party['state_id'], false, false);
                            $('#party_state_id').append(newOption).trigger('change');
                            $("#party_state_id").val("" + Party['state_id'] + "");
                            $('#party_state_id').trigger('change');
                        }
                        if (Party['city_id'] != null) {
                            var newOption = new Option(Party['city_name'], Party['city_id'], false, false);
                            $('#party_city_id').append(newOption).trigger('change');
                            $("#party_city_id").val("" + Party['city_id'] + "");
                            $('#party_city_id').trigger('change');
                        }

                        if (Company['country_id'] != null) {
                            var newOption = new Option(Company['country_name'], Company['country_id'], false,
                                false);
                            $('#company_country_id').append(newOption).trigger('change');
                            $("#company_country_id").val("" + Company['country_id'] + "");
                            $('#company_country_id').trigger('change');
                        }
                        if (Company['state_id'] != null) {
                            var newOption = new Option(Company['state_name'], Company['state_id'], false,
                                false);
                            $('#company_state_id').append(newOption).trigger('change');
                            $("#company_state_id").val("" + Company['state_id'] + "");
                            $('#company_state_id').trigger('change');
                        }
                        if (Company['city_id'] != null) {
                            var newOption = new Option(Company['city_name'], Company['city_id'], false,
                                false);
                            $('#company_city_id').append(newOption).trigger('change');
                            $("#company_city_id").val("" + Company['city_id'] + "");
                            $('#company_city_id').trigger('change');
                        }
                        $('#other_upi_id').val(Other['upi_id']);
                        $('#other_passport').val(Other['passport']);
                        $('#other_bank_name').val(Other['bank_name']);
                        $('#other_branch_name').val(Other['branch_name']);
                        $('#other_account_no').val(Other['account_no']);
                        $('#other_ifsc_code').val(Other['ifsc_code']);
                        $('#other_remark').val(Other['remark']);

                        for (let index = 0; index < Family.length; index++) {
                            addFamilyMember(Family[index]);
                        }

                    } else {
                        toastr["error"](resultData['msg']);
                    }
                }
            });

        }
    </script>
@endsection