@extends('layouts.main')
@section('title', $data['title'])
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href=" {{ asset('assets/css/dataTables.bootstrap5.css') }}">
    <link href="{{ asset('assets/css/datetimepicker.min.css') }}" rel="stylesheet" type="text/css" />

    <style type="text/css">
        <style>.page-content {
            background: transparent !important;
            position: relative;
        }

        .page-content {
            padding: calc(74px + 24px) calc(24px / 2) 60px calc(24px / 2) !important;
        }

        h4.mb-sm-0.font-size-18 {
            position: absolute;
            top: 21px;
            text-transform: capitalize;
            color: #495057;
            font-size: 28px !important;
            font-weight: 600;
        }


        .col-12 .page-title-box {
            padding-bottom: 40px !important;
            /* z-index: 9999; */
            position: relative;
        }

        .col-sm-12.col-md-6 {
            display: block;
            width: 97%;
            /* padding-left: 20px; */
        }

        .col-sm-12 #datatable_filter input {
            width: 311px;
            height: 20px;
            font-size: 12px;
            margin: 0;
        }

        div#datatable_filter {
            top: 0px;
        }

        div#datatable_length {
            float: right;
            margin-top: 10px;
        }



        .table tr {
            border-color: inherit !important;
            border-style: solid;
            border-width: 0;
        }

        .client_total {
            position: absolute;
            top: 18px;
            left: 20px;
        }

        .tab-content>.active {
            display: block;
        }

        .lead-detail,
        .lead-list {
            box-shadow: 0px 3px 3px 0px rgb(0 0 0 / 23%);
        }

        div.dataTables_wrapper div.dataTables_length label {
            margin-bottom: 0;
        }

        div#datatable_wrapper .col-sm-12.col-md-6:first-child {
            margin-bottom: 20px;
            /* padding: 0 24px; */
        }

        button#addBtnClient {
            margin-right: 100px;
            margin-top: -37px;
        }

        .active_lead {
            background-color: #3751A1 !important;
            border-color: transparent;
            -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, .03);
            box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, .03);
        }

        .tab-content>.tab-pane {
            display: none;
        }

        .tab-content>.active {
            display: block;
        }

        .timeline-marker-web {
            top: 0;
            bottom: 0;
            left: 0;
            width: 15px;
            display: table-cell;
            position: relative;
            vertical-align: top;
        }

        .timeline-marker-web:before {
            border: 3px solid transparent;
            border-radius: 100%;
            content: "";
            display: block;
            height: 15px;
            position: absolute;
            top: 0px;
            left: 0;
            width: 15px;
            transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
            background-position: center;
        }

        .timeline-marker-web:after {
            content: "";
            width: 1px;
            background: #000000;
            display: block;
            position: absolute;
            top: 15px;
            bottom: 0;
            left: 7px;
        }

        .timeline-marker-android {
            top: 0;
            bottom: 0;
            left: 0;
            width: 15px;
            display: table-cell;
            position: relative;
            vertical-align: top;
        }

        .timeline-marker-android:before {
            background: #d3d3d3;
            border: 3px solid transparent;
            border-radius: 100%;
            content: "";
            display: block;
            height: 15px;
            position: absolute;
            top: 0px;
            left: 0;
            width: 15px;
            transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
            background-position: center;
            background-image: url(http://localhost/Whitelion-Erp/public/assets/images/timeline/android.svg);
        }

        .timeline-marker-android:after {
            content: "";
            width: 1px;
            background: #000000;
            display: block;
            position: absolute;
            top: 15px;
            bottom: 0;
            left: 7px;
        }

        .timeline-marker-iphone {
            top: 0;
            bottom: 0;
            left: 0;
            width: 15px;
            display: table-cell;
            position: relative;
            vertical-align: top;
        }

        .timeline-marker-iphone:before {
            background: #d3d3d3;
            border: 3px solid transparent;
            border-radius: 100%;
            content: "";
            display: block;
            height: 15px;
            position: absolute;
            top: 0px;
            left: 0;
            width: 15px;
            transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
            background-position: center;
            background-image: url(http://localhost/Whitelion-Erp/public/assets/images/timeline/ios.svg);
        }

        .timeline-marker-iphone:after {
            content: "";
            width: 1px;
            background: #000000;
            display: block;
            position: absolute;
            top: 15px;
            bottom: 0;
            left: 7px;
        }

        .modal-reduis {
            border-radius: 15px;
        }

        .bg-card-color {
            background-image: linear-gradient(to right, #6779af, #6779af);
            border-bottom-left-radius: 15px;
            border-top-left-radius: 15px;
        }

        span#contact_client_name {
            --bs-text-opacity: 1;
            color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
        }

        #formClient .form-label.img {
            position: unset;
            display: block;
            margin-left: 0;
            padding-left: 0;
        }

        #formClient .mb-3 {
            display: block !important;
        }

        #part_detail .form-label {
            font-size: 12px;
            width: 100%;
        }

        #part_detail button.waves-effect {
            background: #3751A1 !important;
            color: #fff;
            border-radius: .2rem;
            padding: 4px 6px;
        }

        #part_detail>.row {
            margin-bottom: 10px;
        }

        .nav-tabs .nav-link.active span.d-sm-block {
            color: #fff;
        }

        .nav-tabs .nav-item.show .nav-link,
        .nav-tabs .nav-link.active {
            background-color: #3751A1 !important;
        }

        ul.nav.nav-tabs .nav-item .nav-link {
            padding: 10px;
        }

        .lead-detail button i.bx.bxs-pencil {
            font-size: 18px;
        }

        table.dataTable thead th {
            padding: 5px;
            color: #74788d;
        }

        .dataTable thead th {
            border-top: 2px solid #d6deec;
            border-bottom: 2px solid #d6deec !important;
        }

        #purchase_datatable tbody td,
        #purchase_return_datatable tbody td,
        #sales_order_datatable tbody td,
        #sales_order_return_datatable tbody td,
        #quotation_datatable tbody td {
            vertical-align: middle;
            padding: 5px;
            color: #000 !important;
        }

        @media (min-width: 1200px) {
            .chat-leftsidebar {
                min-width: 330px !important;
            }
        }

        @media (max-width:1199px) {

            #datatable_wrapper .col-sm-12.col-md-6:first-child {
                width: 100%;
            }

            .form-control {
                font-size: 12px !important;
            }

            #joining_date .form-label {
                left: 0;
            }

        }

        @media (max-width:1205px) {
            .col-sm-12 #datatable_filter input {
                width: 260px;
                height: 20px;
                font-size: 12px;
                margin: 0;
            }

        }

        #datatable tbody td {
            font-size: 14px;
            text-align: left !important;
            /* background-color: #fff !important; */
            color: #000;
        }


        #purchase_return_datatable tbody .dataTables_empty,
        #quotation_datatable tbody .dataTables_empty,
        #sales_order_return_datatable tbody .dataTables_empty,
        #purchase_datatable tbody .dataTables_empty,
        #sales_order_datatable tbody .dataTables_empty {
            text-align-last: center !important;
        }

        .nav-tabs {
            border-bottom: 0px solid #ced4da !important;
        }

        #datatable_wrapper .dataTables_scrollBody {
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* Internet Explorer 10+ */
            overflow-y: scroll;
        }

        #datatable_wrapper .dataTables_scrollBody::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari, Opera */
        }

        .personal-image-box,
        .company-image-box {
            height: 180px;
            border: 1px dashed #ddd;
            border-radius: 12px;
            background-color: #f8f9fa;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: border-color 0.3s ease;
            cursor: pointer;
            position: relative;
            width: 100%;
            max-width: 200px;
            margin: 0 auto;
        }

        .personal-image-box:hover,
        .company-image-box:hover {
            border-color: #007bff;
            background-color: #e9f5ff;
        }

        .personal-upload-img-icon,
        .company-upload-img-icon {
            font-size: 32px;
            color: #6c757d;
            margin-bottom: 8px;
            transition: color 0.3s ease;
        }

        .personal-image-box:hover .personal-upload-img-icon,
        .company-image-box:hover .company-upload-img-icon {
            color: #007bff;
        }

        .personal-uploaded-img,
        .company-uploaded-img {
            border-radius: 8px;
            object-fit: cover;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }




        #modalparty .nav-pills .nav-item {
            flex: 1;
            /* Equal width */
            text-align: center;
            background-color: #5066ab17;
        }

        #modalparty .nav-pills .nav-link {
            width: 100%;
            /* Fill entire nav-item */
            border-radius: 0;
            /* Optional: square tabs */
        }

        #modalparty .nav-pills .nav-link {
            border-radius: 0;
            color: #666;
            font-weight: 600;
            padding: 10px 20px;
            position: relative;
            background-color: transparent;
        }

        #modalparty .nav-pills .nav-link.active {
            background-color: #3751A1;
            color: white;
        }

        #modalparty .nav-pills .nav-link.active::after {
            content: "";
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 12px solid #3751A1;
        }

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

        ul#pills-tab {
            padding-right: 0;
        }
        .card-body label {
    color: #888;
    font-size: .9rem;
    font-weight: 500;
}
    </style>
    <div class="main-content" style="margin:0;" data-select2-id="199">
        <div class="page-content">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-12">

                    </div>
                </div>
                <div class="row ms-1">
                    <div class="d-lg-flex" id="custom_height" style="">
                        <div class="chat-leftsidebar me-lg-3">
                            <div class="tab-content py-1">
                                <div class="tab-pane show active lead-list bg-white" id="chat">
                                    <div class="client_total"><i id="list_data_loader"
                                            class="bx bx-loader bx-spin font-size-16 align-middle me-2"
                                            style="display: none;"></i><b>Party (<span class="text-primary"
                                                style="font-weight: bold;" id="list_record_count"></span>)</b></div>
                                    <table id="datatable" class="table static_hover dt-responsive nowrap w-100 bg-white"
                                        style="">
                                        <thead class="d-none">
                                            <tr>
                                                <th>data</th>
                                            </tr>
                                        </thead>
                                        <tbody>

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


                        <div class="w-100 user-chat py-1">
                            <div class="" id="party_detail" style="">

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalparty" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
        aria-labelledby="modalpartyLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header mb-2">
                    <h5 class="modal-title" id="modalpartytitle">Add Party</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formParty" method="POST" class="needs-validation" action="{{ route('party.save') }}"
                        novalidate enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <input type="hidden" id="party_new_id" name="party_new_id" value="0">
                            <input type="hidden" id="party_history_id" name="party_history_id" value="0">
                            <input type="hidden" id="party_family_member_count" name="party_family_member_count"
                                value="0">

                            <!-- Left Section -->
                            <div class="col-lg-4 col-md-6" style="border-right: 1px solid #eff2f7">
                                <div class="card">
                                    <div class="card-body"
                                        style="background-color: #5066ab17;box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 1px -1px 2px rgba(0, 0, 0, .07), 0 -1px 2px rgba(0, 0, 0, .1);border-radius: 10px;">
                                        <!-- Profile Image Upload -->
                                        <div class="personal-image-box text-center mb-3">
                                            <label for="personal_details_upload_img" class="d-block fw-bold">Profile
                                                Image</label>
                                            <i class="bx bxs-cloud-upload font-size-24 personal-upload-img-icon"></i>
                                            <input type="file" class="d-none personal-upload-img"
                                                id="personal_details_upload_img" name="personal_details_upload_img">
                                            <img class="personal-uploaded-img d-none mt-2" src=""
                                                alt="Profile Image" id="personal_details_upload_img_show" width="100"
                                                height="100">
                                        </div>

                                        <div class="company-image-box text-center mb-3">
                                            <label for="company_details_upload_img" class="d-block fw-bold">Company
                                                Logo</label>
                                            <i class="bx bxs-cloud-upload font-size-24 company-upload-img-icon"></i>
                                            <input type="file" class="d-none company-upload-img"
                                                id="company_details_upload_img" name="company_details_upload_img">
                                            <img class="company-uploaded-img d-none mt-2" src=""
                                                alt="Company Logo" id="company_details_upload_img_show" width="100"
                                                height="100">
                                        </div>


                                        <div class="row g-2">
                                            <!-- Amount -->
                                            <div class="col-8">
                                                <label for="opening_amount" class="">Amount</label>
                                                <input type="number" name="opening_amount" id="opening_amount"
                                                    class="form-control" value="0" placeholder="Amount">
                                            </div>
                                            <!-- Amount Type -->
                                            <div class="col-4" id="opening_amount_type_div">
                                                <label for="opening_amount_type" class="">Type</label>
                                                <select class="form-select" id="opening_amount_type"
                                                    name="opening_amount_type">
                                                    <option value="Credit">Cr</option>
                                                    <option value="Debit">Dr</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row g-2 mt-3">
                                            <!-- Gold Weight -->
                                            <div class="col-8">
                                                <label for="opening_gold" class="">Gold Weight</label>
                                                <input type="number" name="opening_gold" id="opening_gold"
                                                    class="form-control" value="0" placeholder="Gold">
                                            </div>
                                            <!-- Gold Weight Type -->
                                            <div class="col-4" id="opening_gold_type_div">
                                                <label for="opening_gold_type" class="">Gold Type</label>
                                                <select class="form-select" id="opening_gold_type"
                                                    name="opening_gold_type">
                                                    <option value="Credit">Cr</option>
                                                    <option value="Debit">Dr</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row g-2 mt-3">
                                            <!-- Silver Weight -->
                                            <div class="col-8">
                                                <label for="opening_silver" class="">Silver Weight</label>
                                                <input type="number" name="opening_silver" id="opening_silver"
                                                    class="form-control" value="0" placeholder="Silver">
                                            </div>
                                            <!-- Silver Weight Type -->
                                            <div class="col-4" id="opening_silver_type_div">
                                                <label for="opening_silver_type" class="">Silver Type</label>
                                                <select class="form-select" id="opening_silver_type"
                                                    name="opening_silver_type">
                                                    <option value="Credit">Cr</option>
                                                    <option value="Debit">Dr</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-12 mb-3 mt-3">
                                            <label for="q_start_date" class="form-labels">Last Visit Date:</label>
                                            <div class="input-group" id="div_start_date">
                                                <input type="text" class="form-control" placeholder="dd-mm-yyyy"
                                                    style="border-radius: 7px;" data-date-format="dd-mm-yyyy"
                                                    data-date-container='#div_start_date' data-provide="datepicker"
                                                    data-date-autoclose="true" required name="q_start_date"
                                                    id="q_start_date" autocomplete="off" readonly>

                                                <i class="bx bx-calendar-alt" id="calendar-icon"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Right Section -->
                            <div class="col-lg-8 col-md-6" style="border-left: 1px solid #eff2f7">
                                <div class="row m-1 mt-1">
                                    <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>
                                    </ul>
                                    <div class="col-12" style="padding: 0px;">
                                        <div class="card">
                                            <div class="card-body" style="background-color: #5066ab17; box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 1px -1px 2px rgba(0, 0, 0, .07), 0 -1px 2px rgba(0, 0, 0, .1);border-radius: 10px;">
                                                <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-4 col-md-6 col-sm-6 mb-3">
                                                                <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 class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Account Group <code>*</code></label>
                                                                <select class="form-select select2-ajax"
                                                                    id="party_account_group" name="party_account_group"
                                                                    required>
                                                                    <!-- Options -->
                                                                </select>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <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 class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <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 class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Phone Number </label>
                                                                <input type="number" name="party_phone_number"
                                                                    id="party_phone_number" placeholder="Phone Number"
                                                                    class="form-control">
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Email</label>
                                                                <input type="email" name="party_email" id="party_email"
                                                                    placeholder="Email" class="form-control">
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <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 class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <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 class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <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 class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <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 class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Area</label>
                                                                <input type="text" name="party_area" id="party_area"
                                                                    placeholder="Area" class="form-control">
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Pincode <code>*</code></label>
                                                                <input type="number" name="party_pincode"
                                                                    id="party_pincode" placeholder="Pincode"
                                                                    class="form-control" required>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Country <code>*</code></label>
                                                                <select class="form-select select2-ajax"
                                                                    id="party_country_id" name="party_country_id"
                                                                    required>
                                                                </select>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>State <code>*</code></label>
                                                                <select class="form-select select2-ajax"
                                                                    id="party_state_id" name="party_state_id" required>
                                                                </select>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>City <code>*</code></label>
                                                                <select class="form-select select2-ajax"
                                                                    id="party_city_id" name="party_city_id" required>
                                                                </select>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label for="q_birth_date" class="form-labels">Birth
                                                                    Date</label>
                                                                <div class="input-group" id="div_birth_date">
                                                                    <input type="text" class="form-control"
                                                                        placeholder="dd-mm-yyyy"
                                                                        style="border-radius: 7px;"
                                                                        data-date-format="dd-mm-yyyy"
                                                                        data-date-container='#modalparty'
                                                                        data-provide="datepicker"
                                                                        data-date-autoclose="true" name="q_birth_date"
                                                                        id="q_birth_date" autocomplete="off">

                                                                    <i class="bx bx-calendar-alt" id="calendar-icon"></i>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3 d-none"
                                                                id="anniversary_date_main_div">
                                                                <label for="q_anniversary_date"
                                                                    class="form-labels">Anniversary Date</label>
                                                                <div class="input-group" id="div_anniversary_date">
                                                                    <input type="text" class="form-control"
                                                                        placeholder="dd-mm-yyyy"
                                                                        style="border-radius: 7px;"
                                                                        data-date-format="dd-mm-yyyy"
                                                                        data-date-container='#modalparty'
                                                                        data-provide="datepicker"
                                                                        data-date-autoclose="true"
                                                                        name="q_anniversary_date" id="q_anniversary_date"
                                                                        autocomplete="off">

                                                                    <i class="bx bx-calendar-alt" id="calendar-icon"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane fade" id="pills-company-detail" role="tabpanel"
                                                        aria-labelledby="pills-company-detail-tab">
                                                        <div class="row">
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Company Name <code>*</code></label>
                                                                <input type="text" name="company_name"
                                                                    id="company_name" placeholder="Company Name"
                                                                    class="form-control" required>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Phone Number</label>
                                                                <input type="number" name="company_phone_number"
                                                                    id="company_phone_number" placeholder="Phone Number"
                                                                    class="form-control">
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Email</label>
                                                                <input type="email" name="company_email"
                                                                    id="company_email" placeholder="Email"
                                                                    class="form-control">
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Website Link</label>
                                                                <input type="text" name="company_website_link"
                                                                    id="company_website_link" placeholder="Website Link"
                                                                    class="form-control">
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Office No / Street No <code>*</code></label>
                                                                <div class="address d-flex">
                                                                    <input type="text" name="company_address_line_1"
                                                                        id="company_address_line_1" placeholder="House No"
                                                                        class="form-control me-1" required
                                                                        style="flex: 1;">
                                                                    <a class="btn btn-primary" id="auto_filled_address"
                                                                        style="height: 36px;"><i class="bx bxs-map"
                                                                            title="same as personal detail address"></i></a>
                                                                </div>
                                                            </div>

                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <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 class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Area</label>
                                                                <input type="text" name="company_area"
                                                                    id="company_area" placeholder="Area"
                                                                    class="form-control">
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Pincode <code>*</code></label>
                                                                <input type="number" name="company_pincode"
                                                                    id="company_pincode" placeholder="Pincode"
                                                                    class="form-control" required>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>Country <code>*</code></label>
                                                                <select class="form-select select2-ajax"
                                                                    id="company_country_id" name="company_country_id"
                                                                    required>
                                                                </select>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>State <code>*</code></label>
                                                                <select class="form-select select2-ajax"
                                                                    id="company_state_id" name="company_state_id"
                                                                    required>
                                                                </select>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <label>City <code>*</code></label>
                                                                <select class="form-select select2-ajax"
                                                                    id="company_city_id" name="company_city_id" required>
                                                                </select>
                                                            </div>
                                                            <div class="col-lg-4 col-md-6 col-sm-6 mb-3">
                                                                <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-12 col-md-6 col-sm-6 mb-3">
                                                            <label>Remark</label>
                                                            <textarea name="company_remark" id="company_remark" class="form-control" placeholder="Remark"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane fade" id="pills-other-detail" role="tabpanel"
                                                        aria-labelledby="pills-other-detail-tab">
                                                        {{-- <div class="row"> --}}
                                                            <div class="row">
                                                                <div class="col-lg-4 col-md-6">
                                                                    <div class="p-3 rounded text-center h-100 pancard-image-box"
                                                                        style="padding: 15px; border-radius: 10px; border: 1px dashed #ddd;">
                                                                        <label for="pancard_details_upload_img"
                                                                            class="d-block fw-bold mb-2">Pancard
                                                                            Image</label>
                                                                        <i
                                                                            class="bx bxs-cloud-upload font-size-24 pancard-upload-img-icon"></i>
                                                                        <input type="file"
                                                                            class="d-none pancard-upload-img"
                                                                            id="pancard_details_upload_img"
                                                                            name="pancard_details_upload_img">
                                                                        <img class="pancard-uploaded-img d-none mt-2"
                                                                            src="" alt="pancard Logo"
                                                                            id="pancard_details_upload_img_show"
                                                                            width="100" height="100">
                                                                        <input type="text" name="pancard_detail_number"
                                                                            id="pancard_detail_number"
                                                                            placeholder="Pancard No"
                                                                            class="form-control mt-3">
                                                                    </div>
                                                                </div>

                                                                <div class="col-lg-4 col-md-6">
                                                                    <div class="p-3 rounded text-center h-100 aadharcard-image-box"
                                                                        style="padding: 15px; border-radius: 10px; border: 1px dashed #ddd;">
                                                                        <label for="aadharcard_details_upload_img"
                                                                            class="d-block fw-bold mb-2">Aadhar Card
                                                                            Image</label>
                                                                        <i
                                                                            class="bx bxs-cloud-upload font-size-24 aadharcard-upload-img-icon"></i>
                                                                        <input type="file"
                                                                            class="d-none aadharcard-upload-img"
                                                                            id="aadharcard_details_upload_img"
                                                                            name="aadharcard_details_upload_img">
                                                                        <img class="aadharcard-uploaded-img d-none mt-2"
                                                                            src="" alt="aadharcard Logo"
                                                                            id="aadharcard_details_upload_img_show"
                                                                            width="100" height="100">
                                                                        <input type="text"
                                                                            name="aadharcard_detail_number"
                                                                            id="aadharcard_detail_number"
                                                                            placeholder="Aadharcard No"
                                                                            class="form-control mt-3">
                                                                    </div>
                                                                </div>

                                                                <div class="col-lg-4 col-md-6">
                                                                    <div class="p-3 rounded text-center h-100 passport-image-box"
                                                                        style="padding: 15px; border-radius: 10px; border: 1px dashed #ddd;">
                                                                        <label for="passport_details_upload_img"
                                                                            class="d-block fw-bold mb-2">Passport
                                                                            Image</label>
                                                                        <i
                                                                            class="bx bxs-cloud-upload font-size-24 passport-upload-img-icon"></i>
                                                                        <input type="file"
                                                                            class="d-none passport-upload-img"
                                                                            id="passport_details_upload_img"
                                                                            name="passport_details_upload_img">
                                                                        <img class="passport-uploaded-img d-none mt-2"
                                                                            src="" alt="passport Logo"
                                                                            id="passport_details_upload_img_show"
                                                                            width="100" height="100">
                                                                        <input type="text"
                                                                            name="passport_detail_number"
                                                                            id="passport_detail_number"
                                                                            placeholder="Passport No"
                                                                            class="form-control mt-3">
                                                                    </div>
                                                                </div>
                                                            </div>


                                                            <div class="row ms-0 m-2 me-0"
                                                                style="border: 1px dashed #ddd;border-radius: 10px;">
                                                                <div class="col-lg-4 col-md-6 col-sm-6 mb-3 mt-3">
                                                                    <label>UPI Id</label>
                                                                    <input type="text" name="other_upi_id"
                                                                        id="other_upi_id" placeholder="UPI Id"
                                                                        class="form-control">
                                                                </div>
                                                                <div class="col-lg-4 col-md-6 col-sm-6 mb-3 mt-3">
                                                                    <label>Bank Name</label>
                                                                    <input type="text" name="other_bank_name"
                                                                        id="other_bank_name" placeholder="Bank Name"
                                                                        class="form-control">
                                                                </div>
                                                                <div class="col-lg-4 col-md-6 col-sm-6 mb-3 mt-3">
                                                                    <label>Branch Name</label>
                                                                    <input type="text" name="other_branch_name"
                                                                        id="other_branch_name" placeholder="Branch Name"
                                                                        class="form-control">
                                                                </div>
                                                                <div class="col-lg-4 col-md-6 col-sm-6 mb-3 mt-3">
                                                                    <label>Account No</label>
                                                                    <input type="text" name="other_account_no"
                                                                        id="other_account_no" placeholder="Account No"
                                                                        class="form-control">
                                                                </div>
                                                                <div class="col-lg-4 col-md-6 col-sm-6 mb-3 mt-3">
                                                                    <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-12 col-md-6 col-sm-6 mb-3">
                                                                <label>Remark</label>
                                                                <textarea name="other_remark" id="other_remark" class="form-control" placeholder="Remark"></textarea>
                                                            </div>

                                                        {{-- </div> --}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="modal-footer">

                    <button type="submit" class="btn btn-primary shortcut_key_save float-end" id="saveParty"> Save
                        <small>(Alt + S)</small>
                    </button>
                </div>
                </form>
            </div>
        </div>
    </div>
    <!-- End Page-content -->
@endsection('content')
@section('custom-scripts')

    <script src="{{ asset('assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/ckeditor5/build/ckeditor.js') }}"></script>
    <script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ asset('assets/js/flatpickr.js') }}"></script>
    <script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
    <script type="text/javascript">
        var order_id = 0;
        var ajaxURL = "{{ route('party.ajax') }}";
        var ajaxURLPurchase = "{{ route('party.purchase.ajax') }}";
        var ajaxViewPurchaseRetrun = "{{ route('party.purchase.return.ajax') }}";
        var ajaxURLSalesOrder = "{{ route('party.sales.order.ajax') }}";
        var ajaxURLSalesOrderReturn = "{{ route('party.sales.order.return.ajax') }}";
        var ajaxURLQuotation = "{{ route('party.quotation.ajax') }}";
        var ajaxURLIssue = "{{ route('party.issue.ajax') }}";
        var ajaxURLReturn = "{{ route('party.return.ajax') }}";
        var ajaxURLWorkOrder = "{{ route('party.work.order.ajax') }}";
        var ajaxURLDeleteParty = '{{ route('party.delete') }}';
        var reditectURL = "{{ route('party.add') }}";
        var ajaxURLDataDatail = "{{ route('party.detail.data') }}";
        var ajaxURLPartyShowItemDetail = '{{ route('party.quotation.item.detail') }}';
        var csrfToken = $("[name=_token").val();
        var usersPageLength = getCookie('usersPageLength') !== undefined ? getCookie('usersPageLength') : 10;
        var AjaxURLFamilyDetail = "{{ route('party.family.detail') }}";
        var viewLeadId = 0;
        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') }}";

        $(document).ready(function() {
            // First hide all tab panes except the active one
            $('#modalparty .tab-pane').not('.active').hide();

            // Listen to the tab click
            $('#modalparty a[data-bs-toggle="pill"]').on('shown.bs.tab', function(e) {
                var target = $(e.target).attr("href");

                // Remove active class and hide all tab panes
                $('#modalparty .tab-pane').removeClass('show active').hide();

                // Add active class to the target tab and show it
                $(target).addClass('show active').show();
            });
        });

        $(document).on('click', '#addFamily', function() {
            resetInputForm();
            $("#FamilyModal").modal('show');
        });
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
        var yyyy = today.getFullYear();
        var formattedDate = dd + '-' + mm + '-' + yyyy;

        // Set the date and disable the input
        $('#q_start_date').val(formattedDate).attr('disabled', true);
        $(document).ready(function() {
            var option = {
                beforeSubmit: showRequest,
                success: showResponse
            };
            $("#formParty").ajaxForm(option);
        });

        $(document).ready(function() {
            function toggleAnniversaryField() {
                const maritalStatus = $('#party_marital_status').val();
                if (maritalStatus === 'Married') {
                    $('#anniversary_date_main_div').removeClass('d-none');
                } else {
                    $('#anniversary_date_main_div').addClass('d-none');
                    $('#q_anniversary_date').val(''); // Clear the date if not married
                }
            }

            // Run on page load
            toggleAnniversaryField();

            // Run when selection changes
            $('#party_marital_status').on('change', toggleAnniversaryField);
        });


        $(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']);
                $('#modalparty').modal('hide');
                viewLeadId = responseText['party_id'];
                ResetPartyInput();
                reloadTable();
            } 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 resetInputForm() {
            // Remove validation styles
            $("#formFamily").removeClass('was-validated');

            // Reset text inputs
            $("#FamilyModalLabel").html("Add Family Member");
            $("#party_family_member_name").val("");
            $("#party_family_relation").val("");
            $("#party_family_number").val("");
            $("#party_family_email").val("");
            $("#party_family_occupation").val("");
            $("#party_family_remark").val("");

            // Reset hidden input
            $("#family_id").val(0);

            // Reset file input and preview
            $("#party_member_upload_img").val(""); // Clear file input
            $("#party_member_upload_img_show").attr("src", "").addClass("d-none"); // Hide preview image

            // Ensure file input resets properly
            $("#party_member_upload_img").replaceWith($("#party_member_upload_img").clone(true));

            // **Show upload icon again**
            $(".upload-img-icon").removeClass("d-none");
            $('.upload-img-icon').show();
            // Reset Select2 dropdowns
            $("#party_family_marital_status").val('').trigger("change");
            $("#party_family_gender").val('').trigger("change");

            // Reset datepickers (if using Bootstrap datepicker)
            $("#q_party_family_birth_date").val("").datepicker("update", "");
            $("#q_party_family_anniversary_date").val("").datepicker("update", "");

            // Clear any error messages if validation messages are shown
            $(".is-invalid").removeClass("is-invalid");
            $(".invalid-feedback").remove();
        }



        var table = $('#datatable').DataTable({
            "aoColumnDefs": [{
                "bSortable": true,
                "aTargets": [0]
            }],
            "pageLength": 10,
            "scrollX": false,
            "scrollY": 600,
            "order": [
                [0, 'desc']
            ],
            "processing": true,
            "serverSide": true,
            "bInfo": false,
            "ajax": {
                "url": ajaxURL,
                "type": "POST",
                "data": {
                    "_token": csrfToken,

                }
            },
            "aoColumns": [{
                "mData": "view"
            }, ],
            "pagingType": "simple_numbers",
            "language": {
                "search": "",
                "sLengthMenu": "_MENU_",
                "paginate": {
                    "previous": "<",
                    "next": ">",
                    "first": "|<",
                    "last": ">|"
                }
            },
            "initComplete": function() {

                $('.dataTables_wrapper .row .col-sm-12.col-md-5').removeClass('col-sm-12 col-md-5');
                $('.dataTables_wrapper .row .col-sm-12.col-md-7').removeClass('col-sm-12 col-md-7');


                $('.dataTables_wrapper .dataTables_paginate').css({
                    'display': 'flex',
                    'justify-content': 'center',
                    'align-items': 'center'
                });
            }
        });

        table.on('xhr', function() {
            var status = $('#hidden_status').val();
            var responseData = table.ajax.json();
            if (responseData['status'] == 0) {
                toastr['error'] = responseData['msg'];
            } else {
                $('.lead_status_filter_remove').removeClass("next-status-active-class");
                $('.lead_status_filter_' + status).addClass("next-status-active-class");

                if (viewLeadId == null || viewLeadId == "" || viewLeadId == undefined || viewLeadId == 0) {
                    viewLeadId = responseData['FirstPageLeadId'];
                    getDataDetail(responseData['FirstPageLeadId']);
                } else {
                    getDataDetail(viewLeadId);
                }
                $("#saveAdvanceFilter").html('<span>Save</span>');
                $('#list_data_loader').hide();
            }
            $('#list_record_count').html(responseData['recordsTotal']);
        });

        function ViewOrder(id) {
            let ajaxURLprintUrl = "{{ route('print.sales.order.template') }}";

            $.ajax({
                type: 'GET',
                url: ajaxURLprintUrl,
                data: {
                    id: id,
                },
                success: function(response) {
                    if (response.status === 1) {
                        $('#printModal').html(response.data);

                        $('#modalprint').modal('show');
                    } else {
                        alert('Failed to fetch data');
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error:", error);
                }
            });
        }

        $(document).keydown(function(event) {
            if (event.altKey && event.key.toLowerCase() === "n") {
                event.preventDefault();
                $("#PartyAdd")[0].click();
            }
        });

        function editdata(id) {
            window.location = reditectURL + '?id=' + id;
        }

        function reloadTable() {
            table.ajax.reload(null, false);
        }

        function getDataDetail(id) {

            client_point_id = id;
            viewLeadId = id;

            if (id != 0 && id != null && id != undefined) {

                $('#part_detail .lead-custom-scroll-2').prop('scrollTop');
                $("#client_user_" + id).parent().parent().addClass('active_lead');
                $(".p_text_white").removeClass('text-white'); // Remove from all p elements
                $(".h5_text_white").removeClass('text-white'); // Remove from all h5 elements
                isdetailload = 0;
                $('#list_data_loader').show();

                $.ajax({
                    type: 'GET',
                    url: ajaxURLDataDatail + "?id=" + id,
                    success: function(resultData) {
                        if (resultData['status'] == 1) {
                            $("#party_detail").html(resultData['view']);

                            var selectedParty = [];
                            selectedParty.push({
                                party_id: resultData['data']['party']['id'],
                                party_name: resultData['data']['party']['first_name'] + ' ' +
                                    resultData['data']['party']['middle_name'] + ' ' + resultData[
                                        'data']['party']['last_name'],
                            });
                            localStorage.removeItem("party_detail");
                            localStorage.setItem("party_detail", JSON.stringify(selectedParty));

                            Load_Tooltip_Action();
                            $(".client_li").parent().parent().removeClass('active_lead');
                            $("#client_user_" + id).parent().parent().addClass('active_lead');
                            adjustContainerHeight();

                            $("#p_text_white_" + id).addClass('text-white');
                            $("#h5_text_white_" + id).addClass('text-white');
                            $('#list_data_loader').hide();
                        }
                    }
                })
            }
        }

        function Load_Tooltip_Action() {
            $(".closing-badge").mouseover(function(e) {
                var $tip = $(this).next();
                var $arrow = $(this).next().find(".tip_arrow");

                $tip.css("display", "block");
                $tip.css("left", $(this).position().left - 9 + "px");
                $tip.css("top", $(this).position().top + this.offsetHeight + 14 + "px");
                $arrow.css("top", 0);
                $arrow.css("left", this.offsetWidth * 1 / 2 + 2 + "px");
                $arrow.css({
                    "border-bottom-color": "#bbbefcf0",
                    "margin-top": "-20px",
                    "border-top-color": "transparent"
                });
            });
            $(".closing-badge").mouseleave(function(e) {
                var $tip = $(this).next();
                $tip.css("display", "none");
            });
            $(".closing-badge1").mouseover(function(e) {
                var $tip = $(this).next();
                var $arrow = $(this).next().find(".tip_arrow1");
                $tip.css("display", "block");
                $tip.css("left", $(this).position().left - 9 + "px");
                $tip.css("top", $(this).position().top + this.offsetHeight + 14 + "px");
                $arrow.css("top", 0);
                $arrow.css("left", this.offsetWidth * 1 / 2 + 2 + "px");
                $arrow.css({
                    "border-bottom-color": "#bbbefcf0",
                    "margin-top": "-20px",
                    "border-top-color": "transparent"
                });
            });
            $(".closing-badge1").mouseleave(function(e) {
                var $tip = $(this).next();
                $tip.css("display", "none");
            });
        }

        window.smoothScroll = function(target) {
            var scrollContainer = target;


            do {
                scrollContainer = scrollContainer.parentNode.parentNode;
                if (!scrollContainer) return;
                scrollContainer.scrollTop += 1;
            } while (scrollContainer.scrollTop == 0);

            var targetY = 0;
            do {
                if (target == scrollContainer) break;
                targetY += target.offsetTop;
            } while (target = target.offsetParent);

            scroll = function(c, a, b, i) {
                i++;
                if (i > 30) return;
                c.scrollTop = a + (b - a) / 30 * i;
                setTimeout(function() {
                    scroll(c, a, b, i);
                }, 20);
            }

            targetY = targetY - 300
            scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
        }
        $(document).ready(function() {
            adjustContainerHeight();
            $(window).on('resize', adjustContainerHeight);
        });

        function adjustContainerHeight() {
            var windowWidth = $(window).width();
            if (windowWidth <= 1440) {
                $('body').addClass('vertical-collpsed');
            }
            var windowHeight = $(window).height() - 240;
            max_height = windowHeight - 100;
            $('#datatable').parent().css('max-height', max_height + 'px');
            $('#datatable').parent().css('height', max_height + 'px');
            $('#custom_height').css('height', windowHeight + 'px');
            $('.scrollable-tab').css('height', max_height + 'px');
            $('.scrollable-tab').css('max-height', max_height + 'px');
        }

        $(document).on('click', '.upload-img-icon', function() {
            $('#party_member_upload_img').click();
        });

        $(document).on('change', '#party_member_upload_img', function() {
            var file = this.files[0];

            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#party_member_upload_img_show')
                        .attr('src', e.target.result)
                        .removeClass('d-none')
                        .addClass('img-thumbnail'); // Optional: Adds styling

                    $('.upload-img-icon').hide();
                };
                reader.readAsDataURL(file);
            }
        });

        // Allow users to change the image by clicking on the previewed image
        $(document).on('click', '#party_member_upload_img_show', function() {
            $('#party_member_upload_img').click();
        });

        // Reset image on modal close
        $(document).ready(function() {
            $('.datepicker').datepicker({
                format: 'dd-mm-yyyy',
                autoclose: true,
                todayHighlight: true
            });

            // Clear fields when FamilyModal is closed
            $('#FamilyModal').on('hidden.bs.modal', function() {
                $('#party_family_birth_date, #party_family_anniversary_date').val(''); // Clear date inputs
                $('#party_member_upload_img').val(''); // Clear file input
                $('#party_member_upload_img_show').attr('src', '').addClass('d-none'); // Hide preview
                $('.upload-img-icon').show(); // Show upload icon again
            });

        });

        function EditFamily(Id) {
            $.ajax({
                type: 'GET',
                url: AjaxURLFamilyDetail,
                data: {
                    id: Id,
                },
                success: function(response) {
                    if (response.status === 1) {
                        let data = response.data;
                        $("#FamilyModalLabel").html("Edit Family Member");

                        viewLeadId = data.party_id;
                        // Set values in modal fields
                        $('#family_id').val(data.id);
                        $('#party_id').val(data.party_id);
                        $('#party_family_member_name').val(data.member_name);
                        $('#party_family_relation').val(data.relation);
                        $('#party_family_number').val(data.mobile_no);
                        $('#party_family_email').val(data.email);
                        $('#party_family_occupation').val(data.occupation);
                        $('#party_family_remark').val(data.remark);
                        $('.upload-img-icon').hide();

                        // Set image preview
                        if (data.image) {
                            $('#party_member_upload_img_show').attr('src', data.image).removeClass('d-none');
                        } else {
                            $('#party_member_upload_img_show').addClass('d-none');
                        }

                        // Show the modal
                        $('#FamilyModal').modal('show');
                    } else {
                        alert('Failed to fetch data');
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error:", error);
                }
            });
        }

        // 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 = String(date.getDate()).padStart(2, '0');
            let month = String(date.getMonth() + 1).padStart(2, '0');
            let year = date.getFullYear();
            return `${day}-${month}-${year}`;
        }

        $('#PartyAdd').click(function() {
            ResetPartyInput();
            $('#modalpartytitle').html('Add Party')
            $('#modalparty').modal('show')
        })

        function ResetPartyInput() {
            $("#formParty").removeClass('was-validated');
            $(".is-invalid").removeClass("is-invalid");
            $(".invalid-feedback").remove();
            $('#party_new_id').val(0);
            $('#party_history_id').val(0);
            $('#party_account_name').val('');
            $('#party_first_name').val('');
            $('#party_last_name').val('');
            $('#party_phone_number').val('');
            $('#party_email').val('');
            $('#party_marital_status').val('').trigger('change');
            $('#party_gender').val('').trigger('change');
            $('#party_address_line_1').val('');
            $('#party_address_line_2').val('');
            $('#party_area').val('');
            $('#party_pincode').val('');
            $('#party_aadhar_no').val('');
            $('#party_pancard_no').val('');
            $('#company_name').val('');
            $('#company_phone_number').val('');
            $('#company_email').val('');
            $('#company_address_line_1').val('');
            $('#company_address_line_2').val('');
            $('#company_area').val('');
            $('#company_website_link').val('');
            $('#company_pincode').val('');
            $('#company_pan_card_no').val('');
            $('#company_gst_no').val('');
            $('#company_gst_type').val('').trigger('change');
            $('#company_remark').val('');
            $('#party_birth_date').val('');
            $('#party_anniversary_date').val('');
            $('#opening_amount').val('');
            $('#opening_amount_type').val('Credit').trigger('change');
            $('#opening_gold').val('');
            $('#opening_gold_type').val('Credit').trigger('change');
            $('#opening_silver').val('');
            $('#opening_silver_type').val('Credit').trigger('change');
            $("#party_account_group").val('').trigger('change');
            $("#party_status").val('').trigger('change');
            $("#party_country_id").val('').trigger('change');
            $("#party_state_id").val('').trigger('change');
            $("#party_city_id").val('').trigger('change');
            $("#company_country_id").val('').trigger('change');
            $("#company_state_id").val('').trigger('change');
            $("#company_city_id").val('').trigger('change');
            $('#other_upi_id').val('');
            $('#other_passport').val('');
            $('#other_bank_name').val('');
            $('#other_branch_name').val('');
            $('#other_account_no').val('');
            $('#other_ifsc_code').val('');
            $('#other_remark').val('');
            $('#pancard_detail_number').val('');
            $('#aadharcard_detail_number').val('');
            $('#passport_detail_number').val('');
            $('#modalparty a[data-bs-toggle="pill"]').removeClass('active');
            $('#modalparty .tab-pane').removeClass('show active').hide();
            $('#q_birth_date').val('');
            $('#q_anniversary_date').val('');

            $('#pills-personal-detail-tab').addClass('active');
            $('#pills-personal-detail').addClass('show active').slideDown(300);

            $('#company_details_upload_img_show').attr('src', '').hide();
            $('.company-upload-img-icon').show();
            $('#pancard_details_upload_img_show').attr('src', '').hide();
            $('.pancard-upload-img-icon').show();
            $('#personal_details_upload_img_show').attr('src', '').hide();
            $('.personal-upload-img-icon').show();
            $('#aadharcard_details_upload_img_show').attr('src', '').hide();
            $('.aadharcard-upload-img-icon').show();
            $('#passport_details_upload_img_show').attr('src', '').hide();
            $('.passport-upload-img-icon').show();

            $('#opening_amount').prop('readonly', false);
            $('#opening_amount_type_div').removeClass('pe-none');
            $('#opening_gold').prop('readonly', false);
            $('#opening_gold_type_div').removeClass('pe-none');
            $('#opening_silver').prop('readonly', false);
            $('#opening_silver_type_div').removeClass('pe-none');
        }
        $('#opening_amount_type, #opening_gold_type, #opening_silver_type, #party_gst_type, #party_marital_status, #party_gender, #company_gst_type')
            .select2({
                placeholder: 'Please select',
                dropdownParent: $("#modalparty"),
            });

        $("#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',
            dropdownParent: $("#modalparty"),
        });

        $('#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',
            dropdownParent: $("#modalparty"),
        });
        $('#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',
            dropdownParent: $("#modalparty"),
        });

        $('#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',
            dropdownParent: $("#modalparty"),
        });

        $('#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',
            dropdownParent: $("#modalparty"),
        });
        $('#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',
            dropdownParent: $("#modalparty"),
        });
        $('#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',
            dropdownParent: $("#modalparty"),
        });

        $('#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',
            dropdownParent: $("#modalparty"),
        });

        $('#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');
        });

        // Company Logo Click
        $(document).on('click', '.company-upload-img-icon', function() {
            $('#company_details_upload_img').click();
        });

        // Profile Image Click
        $(document).on('click', '.personal-upload-img-icon', function() {
            $('#personal_details_upload_img').click();
        });
        $(document).on('click', '.pancard-upload-img-icon', function() {
            $('#pancard_details_upload_img').click();
        });
        $(document).on('click', '.aadharcard-upload-img-icon', function() {
            $('#aadharcard_details_upload_img').click();
        });
        $(document).on('click', '.passport-upload-img-icon', function() {
            $('#passport_details_upload_img').click();
        });

        // Company Logo Upload
        $(document).on('change', '.company-upload-img', function() {
            var file = this.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#company_details_upload_img_show')
                        .attr('src', e.target.result)
                        .removeClass('d-none').show();
                    $('.company-upload-img-icon').hide();
                };
                reader.readAsDataURL(file);
            }
        });

        // Profile Image Upload
        $(document).on('change', '.pancard-upload-img', function() {
            var file = this.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#pancard_details_upload_img_show')
                        .attr('src', e.target.result)
                        .removeClass('d-none').show();
                    $('.pancard-upload-img-icon').hide();
                };
                reader.readAsDataURL(file);
            }
        });
        $(document).on('change', '.aadharcard-upload-img', function() {
            var file = this.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#aadharcard_details_upload_img_show')
                        .attr('src', e.target.result)
                        .removeClass('d-none').show();
                    $('.aadharcard-upload-img-icon').hide();
                };
                reader.readAsDataURL(file);
            }
        });
        $(document).on('change', '.passport-upload-img', function() {
            var file = this.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#passport_details_upload_img_show')
                        .attr('src', e.target.result)
                        .removeClass('d-none').show();
                    $('.passport-upload-img-icon').hide();
                };
                reader.readAsDataURL(file);
            }
        });
        $(document).on('change', '.personal-upload-img', function() {
            var file = this.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#personal_details_upload_img_show')
                        .attr('src', e.target.result)
                        .removeClass('d-none').show();
                    $('.personal-upload-img-icon').hide();
                };
                reader.readAsDataURL(file);
            }
        });

        // Re-upload on Image Click (Company)
        $(document).on('click', '.company-uploaded-img', function() {
            $('#company_details_upload_img').click();
        });

        // Re-upload on Image Click (Profile)
        $(document).on('click', '.personal-uploaded-img', function() {
            $('#personal_details_upload_img').click();
        });
        $(document).on('click', '.pancard-uploaded-img', function() {
            $('#pancard_details_upload_img').click();
        });
        $(document).on('click', '.aadharcard-uploaded-img', function() {
            $('#aadharcard_details_upload_img').click();
        });
        $(document).on('click', '.passport-uploaded-img', function() {
            $('#passport_details_upload_img').click();
        });
        $(document).ready(function() {
            // On tab shown event
            $('a[data-bs-toggle="pill"]').on('shown.bs.tab', function(e) {
                var target = $(e.target).attr('href'); // Get the ID of the tab content

                if (target === '#pills-personal-detail') {
                    $('.personal-image-box').show();
                    $('.company-image-box').hide();
                } else if (target === '#pills-company-detail') {
                    $('.company-image-box').show();
                    $('.personal-image-box').hide();
                } else {
                    // Hide both if on "Other Detail" tab or any other
                    $('.personal-image-box').show();
                    $('.company-image-box').hide();
                }
            });

            // Trigger once on page load to set correct visibility
            var activeTab = $('.nav-link.active').attr('href');
            if (activeTab === '#pills-personal-detail') {
                $('.personal-image-box').show();
                $('.company-image-box').hide();
            } else if (activeTab === '#pills-company-detail') {
                $('.company-image-box').show();
                $('.personal-image-box').hide();
            } else {
                $('.personal-image-box').show();
                $('.company-image-box').hide();
            }
        });

        function extractYMD(dateTimeStr) {
            if (!dateTimeStr) return '';
            return dateTimeStr.split(' ')[0]; // Gets only the 'yyyy-mm-dd' part
        }

        function GetDetail(Id) {
            ResetPartyInput();
            $.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'];
                        var History = resultData['data']['history'];

                        $('#party_new_id').val(Party['id']);
                        if (History != [] && History != '') {
                            $('#party_history_id').val(History['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']);

                        $('#q_birth_date').val(extractYMD(Party['birth_date']));
                        $('#q_anniversary_date').val(extractYMD(Party['anniversary_date']));

                        $('#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]);
                        }

                        // Amount
                        let openingAmount = parseFloat(Party['opening_amount']).toFixed(2);
                        $('#opening_amount').val(openingAmount);
                        $('#opening_amount_type').val(Party['opening_amount_type']).trigger('change');

                        if (parseFloat(openingAmount) !== 0) {
                            $('#opening_amount').prop('readonly', true);
                            $('#opening_amount_type_div').addClass('pe-none');
                        } else {
                            $('#opening_amount').prop('readonly', false);
                            $('#opening_amount_type_div').removeClass('pe-none');
                        }

                        // Gold
                        let openingGold = parseFloat(Party['opening_gold_weight']).toFixed(2);
                        $('#opening_gold').val(openingGold);
                        $('#opening_gold_type').val(Party['opening_gold_weight_type']).trigger('change');

                        if (parseFloat(openingGold) !== 0) {
                            $('#opening_gold').prop('readonly', true);
                            $('#opening_gold_type_div').addClass('pe-none');
                        } else {
                            $('#opening_gold').prop('readonly', false);
                            $('#opening_gold_type_div').removeClass('pe-none');
                        }

                        // Silver
                        let openingSilver = parseFloat(Party['opening_silver_weight']).toFixed(2);
                        $('#opening_silver').val(openingSilver);
                        $('#opening_silver_type').val(Party['opening_silver_weight_type']).trigger('change');

                        if (parseFloat(openingSilver) !== 0) {
                            $('#opening_silver').prop('readonly', true);
                            $('#opening_silver_type_div').addClass('pe-none');
                        } else {
                            $('#opening_silver').prop('readonly', false);
                            $('#opening_silver_type_div').removeClass('pe-none');
                        }


                        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']);
                        $('#pancard_detail_number').val(Other['pan_card_no']);
                        $('#aadharcard_detail_number').val(Other['aadhar_card_no']);
                        $('#passport_detail_number').val(Other['passport_no']);

                        if (Other['pan_card_image'] != null && Other['pan_card_image'] != '') {
                            $('#pancard_details_upload_img_show').attr('src', Other['pan_card_image']).show()
                                .removeClass('d-none');
                            $('.pancard-upload-img-icon').hide();
                        }
                        if (Other['aadhar_card_image'] != null && Other['aadhar_card_image'] != '') {
                            $('#aadharcard_details_upload_img_show').attr('src', Other['aadhar_card_image'])
                                .show().removeClass('d-none');
                            $('.aadharcard-upload-img-icon').hide();
                        }
                        if (Other['passport_image'] != null && Other['passport_image'] != '') {
                            $('#passport_details_upload_img_show').attr('src', Other['passport_image']).show()
                                .removeClass('d-none');
                            $('.passport-upload-img-icon').hide();
                        }
                        if (Company['company_logo'] != null && Company['company_logo'] != '') {
                            $('#company_details_upload_img_show').attr('src', Company['company_logo']).show()
                                .removeClass('d-none');
                            $('.company-upload-img-icon').hide();
                        }
                        if (Party['image'] != null && Party['image'] != '') {
                            $('#personal_details_upload_img_show').attr('src', Party['image']).show()
                                .removeClass('d-none');
                            $('.personal-upload-img-icon').hide();
                        }

                        $('#modalparty').modal('show');

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

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

        }
    </script>
@endsection