@extends('user.layouts.template')

@section('style')
    <style>
        div#prevBtn {
            cursor: pointer;
            background: #E35205;
            border-radius: 5px;
            color: white !important;
        }

        .modal {
            --bs-modal-margin: 1.75rem;
            --bs-modal-box-shadow: var(--bs-box-shadow);
            z-index: 9999999 !important;
        }

        .tm--expanded-hd .content__header,
        .tm--tall-hd .content__header {
            /* background-image: url(../img/topbg.png) !important; */
            background-size: contain;
            background-repeat: no-repeat;
            height: auto;
            display: flex;
            flex-direction: column;
            position: relative;
            width: 100%;
        }

        .sidebar-icons {
            width: 40px;
        }

        .mainnav__inner .mainnav__menu .nav-link {
            padding: 10px 0px !important;
        }

        .mn--max .header__brand {
            padding-inline-start: calc(.625rem + var(--nf-mainnav-link-padding-x));
            max-width: var(--nf-mainnav-max-width);
            width: var(--nf-mainnav-max-width);
            will-change: max-width;
            background-color: var(--nf-mainnav-bg);
        }

        .mn--min .header__brand {
            justify-content: center;
            max-width: var(--nf-mainnav-min-width);
            padding-inline-start: 0;
            transition: max-width var(--nf-mainnav-min-transition-duration) var(--nf-mainnav-min-transition-timing);
            width: 100%;
            background: white;
        }

        /*----Form Wizard-----*/



        .flex-fill {
            display: flex;
            align-items: top;
            gap: 20px;
        }

        .form-content-wizard {
            width: 100%
        }

        #_dm-customWizardSteps {
            width: 100%;
        }

        .nav-underline .nav-link {
            text-align: left;
        }

        #_dm-customWizardSteps a {
            display: grid;
            align-items: center;
            padding: 5px;
            text-align: center;

        }

        a.nav-link.menu-btn img {
            margin: 0 36%;
        }

        a.nav-link.menu-btn span {
            font-size: 11px;
        }


        #_dm-customWizardSteps {
            width: 100%;
            background: #dadce13a;
            padding: 10px;
            height: fit-content;
            justify-content: center !important;
        }

        #_dm-customWizardSteps a span {
            padding: 5px;
        }

        #_dm-customWizardSteps {
            width: 100%;
            background: #dadce13a;
            padding: 10px;

        }

        .add-item {
            display: flex;
            align-items: center;
        }


        .big-icon {
            font-size: 30px;
            /* Change this to your desired size */
            margin-left: 5px;
        }

        .form-select {
            color: #000000ff !important;
        }

        .form-select::placeholder {
            color: #b3bcc1 !important;
        }

        .form-control {
            color: #000000ff !important;
        }

        .form-control::placeholder {
            color: #b3bcc1 !important;
        }

        .header {

            position: sticky !important;
            top: 0 !important;
            z-index: 99999 !important;
        }

        .dropdown-toggle::after {
            display: none;
            margin-left: .255em;
            vertical-align: .255em;
            content: "";
            border-top: .3em solid;
            border-right: .3em solid transparent;
            border-bottom: 0;
            border-left: .3em solid transparent;
        }

        .mainnav__inner .mainnav__menu .nav-link {
            padding: 3px 0px !important;
        }

        .root:not(.mn--min) .mainnav__menu>.nav-item.has-sub>.mininav-content {
            border-inline-start: 1px dashed var(--nf-mainnav-submenu-dashed-color);
            margin-inline-start: var(--nf-mainnav-submenu-dashed-margin) !important;
            padding: 5px !important;
        }

        .tm--expanded-hd .content__header,
        .tm--tall-hd .content__header {
            /* background-image: url(assets/img/topbg.png) !important; */
            background-size: contain !important;
            height: auto !important;
            display: flex;
            flex-direction: column;
            position: relative;
            width: 100%
        }


        .menu-content {
            display: none;
        }

        .menu-content.active {
            display: block;
        }

        .nav-underline .nav-link.active,
        .nav-underline .show>.nav-link {
            font-weight: 700;
            color: var(--bs-nav-underline-link-active-color);
            border-bottom-color: #e35205 !important;
        }

        .card-body {
            padding: 10px !important;
        }

        .row-div {
            display: flex;
            display: -webkit-box;
        }

        /*-----Subscription List-----*/


        .sea-bar {
            position: relative;
            right: 20px;

        }

        .sea-bar:hover {
            color: black;
        }

        .input-group-text {
            background: white;
        }

        .ri-search-line {
            color: black;
        }

        .price-table th {
            font-weight: 700;
        }

        span.nav-text {
            font-size: 14px !important;
        }

        #startDate {
            width: 200px;
            margin-right: 10px;
        }

        .form-check {
            display: block;
            min-height: 1.3125rem;
            padding-left: 1.612em;
            margin-bottom: 0;
            margin: 0 0%;
        }

        /*---Data Tables----*/

        table.dataTable {
            position: relative;
            top: 10px;
            margin-bottom: 30px;
        }

        table.dataTable tbody th,
        table.dataTable tbody td {
            padding: 15px 10px;
        }


        /*---End Subscription List-----*/


        .page-title-box {
            padding-bottom: 1.25rem;
            background-color: transparent;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            gap: 0.625rem;
        }


        /*----Toggle btn----*/

        button.toggle-btn {
            background: transparent;
            border: none;
        }

        button.toggle-btn i {
            font-size: 18px;
        }


        /*----Select ----*/



        .apex-charts .apexcharts-title-text {
            fill: var(--bs-headings-color);
            display: none;
        }

        .icon-wizard .nav-item .nav-link {
            padding: 11px 14px !important;
            -webkit-box-shadow: none;
            box-shadow: none;
            display: -webkit-box;
            display: -ms-flexbox;
            display: block;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: start;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: left;
            gap: 3px;
            border-radius: var(--bs-border-radius) !important;
            text-align: left;
            float: left;
        }

        .nav-pills .nav-link.active .tab-img {
            filter: hue-rotate(45deg);
        }

        .tab-img {
            width: 30px;
            filter: brightness(0.5);
            padding: 2px;
        }

        .add-item {
            display: flex;
            align-items: center;
        }

        .ri-add-circle-line,
        .ri-indeterminate-circle-line {
            font-size: 20px;
            padding-left: 5px;
        }

        .nav-pills .nav-link.active,
        .nav-pills .show>.nav-link {
            color: #fff;
            background-color: #E35205;
            -webkit-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
            box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
        }



        .select-property {
            box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
            padding: 20px;
            background: white;
            border-radius: 5px;
            position: relative;

        }

        .select-property::before {
            content: "";
            position: absolute;
            top: 10px;
            left: 0;
            width: 5px;
            height: 80%;
            /* Full height of the parent */
            background-color: var(--nf-header-bg);
            border-radius: 10px;
            /* Applies to all corners */

        }

        .select-property form select {
            width: 700px !important;
        }

        /*----Off canvas----*/

        .offcanvas.hiding,
        .offcanvas.show,
        .offcanvas.showing {
            visibility: visible;
            z-index: 9999999 !important;
        }

        .offcanvas.offcanvas-end {
            width: 1200px !important;
        }

        .table-box {
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            padding: 20px;

        }

        .table-box tr {
            border: 1px solid rgba(128, 128, 128, 0.269);
            padding: 20px;
        }

        .table-box tr td {
            border: 1px solid rgba(128, 128, 128, 0.269);


        }


        .form-control {

            font-size: 14px !important;

        }

        .form-select {

            font-size: 14px !important;

        }

        .form-label {
            font-size: 15px !important;
        }

        .form-check-label {
            font-size: 14px !important;

        }


        /*----Star Ratings----*/

        .star-rating {
            font-size: 2rem;
            color: #ccc;
            cursor: pointer;
            user-select: none;
        }

        .star {
            display: inline-block;
            transition: color 0.2s;
        }

        .star.hover,
        .star.selected {
            color: gold;
        }

        #rating-value {
            margin-top: 10px;
            font-weight: bold;
        }


        /*---Table Alignment---*/

        table.dataTable {

            text-align: center;
        }

        table.dataTable>thead>tr>th,
        table.dataTable>thead>tr>td {
            padding: 10px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
            text-align: center;
        }
    </style>

    {{-- my own style --}}
    <style>
        .important {
            transition: all ease 0.5s !important;
            border-color: #1a1d211a !important;
            box-shadow: 0 0 0px 0 #ffc0c0;
        }

        .validation_failled {
            transition: all ease 0.5s !important;
            border-color: #ff0000 !important;
            box-shadow: 0 0 10px 0 #ffc0c0;
            background-color: #fffbfb;
        }

        .object-cover {
            object-fit: cover;
            height: auto;
            width: 100%;
        }

        .suite_images {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            width: 100%;
            height: 200px;
        }

        .suite_img_button {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 1;
        }

        /* this class is to prevent the hit on path inside the button */
        .suite_img_button::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            content: "";
            z-index: 100;
        }

        .swal2-container.swal2-center.swal2-backdrop-show {
            z-index: 9999999;
        }

        #submitBtn {
            right: unset !important;
        }
    </style>
@endsection

@section('content')

    @php
        $permission = session()->get('permissions');
    @endphp

    <div class="content__boxed">
        <div class="content__wrap">

            <!-- END : Breadcrumb -->

            <div id="page-titl">
            </div>

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

                        <div class="Select-box py-0">
                            <div class="select-property">
                                <div class="d-flex w-100 justify-content-between align-items-center">
                                    <div class="select-prop d-flex align-items-center w-50">
                                        <label for="p-type" class="form-label" style="width:30%;">Select Property
                                        </label>
                                        <select class="form-select" id="property_select" aria-label="Default select example"
                                            style="width: 100%!important;">
                                            <option selected disabled>Select Property</option>
                                            @if(!empty($properties))
                                                @foreach ($properties as $prop)
                                                    <option value="{{ $prop['id'] }}" {{ $property_id == $prop['id'] ? "selected" : "" }}>{{ $prop['name'] }}</option>
                                                @endforeach
                                            @endif

                                        </select>

                                    </div>

                                    <button href="#" class="btn btn-success" id="listTenants">Select</button>

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


            <div class="card">

                <!-- Custom style form wizard -->
                <div class="align-content-stretch">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <table id="example" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Floor No.</th>
                                            <th>No. of Suites</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="listArea">
                                    </tbody>
                                </table>

                            </div>
                        </div>



                    </div>
                </div>
                <!-- END : Custom style form wizard -->
            </div>
        </div>
    </div>

    @if($permission === 'Admin' || !empty($permission['Property Management']['creat'] || !empty($permission['Property Management']['edit'])))
        <!--------Suite-Details Off Canvas----->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="suite-details" aria-labelledby="suite-details-Label">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="suite-details-Label"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">

                <form id="tenant-form">
                    <div class="row">
                        <div class="col-lg-3">
                            <ul class="nav nav-pills nav-justified flex-column icon-wizard form-wizard-header bg-light p-1"
                                role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a href="#tenant-info" data-bs-toggle="tab" data-toggle="tab"
                                        class="nav-link rounded-0 py-2 active" aria-selected="true" role="tab">
                                        Tenant Information
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a href="#lease-details" id="controllable-parameters-tab" data-bs-toggle="tab"
                                        data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" role="tab"
                                        tabindex="-1">
                                        Lease Terms
                                    </a>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <a href="#rent-financial" id="controllable-parameters-tab" data-bs-toggle="tab"
                                        data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" role="tab"
                                        tabindex="-1">
                                        Rent Terms
                                    </a>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <a href="#brokers-contacts" id="controllable-parameters-tab" data-bs-toggle="tab"
                                        data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" role="tab"
                                        tabindex="-1">
                                        Brokers & Key Contacts
                                    </a>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <a href="#tenant-consideration" id="controllable-parameters-tab" data-bs-toggle="tab"
                                        data-toggle="tab" class="nav-link rounded-0 py-2" aria-selected="false" role="tab"
                                        tabindex="-1">
                                        Tenant-Specific Considerations
                                    </a>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <a href="#images" id="controllable-parameters-tab" data-bs-toggle="tab" data-toggle="tab"
                                        class="nav-link rounded-0 py-2" aria-selected="false" role="tab" tabindex="-1">
                                        Images
                                    </a>
                                </li>

                            </ul>


                        </div>

                        <div class="col-lg-9">
                            <div class="tab-content mb-0">

                                <div class="tab-pane active show" id="tenant-info" role="tabpanel">
                                    <h4 class="fs-16 fw-semibold mb-1">Tenant Information</h4>

                                    <div class="row py-2">
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="propertyname" class="form-label">Tenant Name<span
                                                        style="color: red;">*</span>
                                                </label>
                                                <input id="tenant_name" name="tenant_name" type="text"
                                                    value="{{ old('tenant_name') }}" class="form-control important"
                                                    placeholder="Enter tenant Company or Individual name">
                                            </div>
                                        </div> <!-- end col -->

                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="propertyname" class="form-label">Tenant ID<span
                                                        style="color: red;">*</span>
                                                </label>
                                                <input id="unique_id" type="text" name="unique_id"
                                                    class="form-control important" placeholder="Enter tenant ID">
                                            </div>
                                        </div> <!-- end col -->

                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="Description" class="form-label">Tenant Address<span
                                                        style="color: red;">*</span>
                                                </label>
                                                <textarea class="form-control important address" name="tenant_address"
                                                    id="tenant_address" rows="1" placeholder="Enter tenant address"></textarea>
                                            </div>
                                        </div> <!-- end col -->

                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="Description" class="form-label">State<span
                                                        style="color: red;">*</span>
                                                </label>
                                                <select class="form-select important" aria-label="Default select example"
                                                    id="state" name="state">
                                                    <option selected disabled>Select state
                                                    </option>
                                                    @if (!empty($states))
                                                        @foreach ($states as $state)
                                                            <option value="{{ $state->state_name }}">{{ $state->state_name }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div> <!-- end col -->

                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="Description" class="form-label">City<span
                                                        style="color: red;">*</span></label>
                                                <select class="form-select important" aria-label="Default select example"
                                                    id="city" name="city">
                                                    <option selected disabled>Select city</option>
                                                </select>
                                            </div>
                                        </div> <!-- end col -->

                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="Description" class="form-label">Zip Code<span
                                                        style="color: red;">*</span>
                                                </label>
                                                <input class="form-control important zipcode" type="number" id="zip_code"
                                                    name="zip_code" placeholder="Enter zip code"></textarea>
                                            </div>
                                        </div> <!-- end col -->

                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="Description" class="form-label">DBA/AKA</label>
                                                <input class="form-control" rows="1" id="dba_aka" name="dba_aka"
                                                    placeholder="Enter Doing Business As, Also Known As">
                                            </div>
                                        </div> <!-- end col -->

                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="Description" class="form-label">Industry</label>
                                                <select class="form-select important" id="business_type__industry__naics_code"
                                                    name="business_type__industry__naics_code">
                                                    <option selected disabled>Select industry type</option>
                                                    @if (!empty($business_type_naics_code))
                                                        @foreach ($business_type_naics_code as $btnc)
                                                            <option value="{{ $btnc->number }}">{{ $btnc->industry }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div> <!-- end col -->
                                        <div class="col-lg-4">
                                            <div class="mb-3">
                                                <label for="Description" class="form-label">Primary Contact
                                                </label>
                                                <input type="text" class="form-control" id="primary_contact"
                                                    name="primary_contact" placeholder="Enter primary contact">
                                            </div>
                                        </div> <!-- end col -->

                                        <div class="col-lg-4">
                                            <div class="mb-3">
                                                <label for="Description" class="form-label">Email ID
                                                </label>
                                                <input type="text" class="form-control domainEmail" id="primary_email"
                                                    name="primary_email" placeholder="Enter contact person email Id">
                                            </div>
                                        </div> <!-- end col -->

                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label class="form-label" for="basicLname2">Phone Number</label>
                                                <div class="add-item">
                                                    <input type="number" name="primary_phone[]" class="form-control"
                                                        id="primary_phone" placeholder="Enter phone number">
                                                    <i class="ri-add-circle-line"></i>
                                                    {{-- <i class="ri-add-circle-line" onclick="add_primary_phone()"></i> --}}
                                                </div>
                                                <div id="primaryPhoneContainer">
                                                </div>
                                            </div>
                                        </div><!-- end col -->


                                        <div class="col-lg-4">
                                            <div class="mb-3">
                                                <label for="Description" class="form-label">Secondary Contact</label>
                                                <input id="secondary_contact" name="secondary_contact" type="text"
                                                    class="form-control" placeholder="Enter secondary contact">
                                            </div>
                                        </div> <!-- end col -->

                                        <div class="col-lg-4">
                                            <div class="mb-3">
                                                <label for="Description" class="form-label">Email Id
                                                </label>
                                                <input id="secondary_email" name="secondary_email" type="text"
                                                    class="form-control optional email"
                                                    placeholder="Enter contact person email Id">
                                            </div>
                                        </div> <!-- end col -->

                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label class="form-label" for="basicLname2">Phone Number</label>
                                                <div class="add-item">
                                                    <input type="number" name="secondary_phone[]" id="secondary_phone"
                                                        class="form-control optional" placeholder="Enter phone number">
                                                    <i class="ri-add-circle-line"></i>
                                                    {{-- <i class="ri-add-circle-line" onclick="add_secondary_phone()"></i> --}}
                                                </div>
                                                <div id="secondaryPhoneContainer">
                                                </div>
                                            </div>
                                        </div><!-- end col -->
                                    </div> <!-- end row -->
                                </div><!-- end tab-pane -->

                                <div class="tab-pane" id="lease-details" role="tabpanel">
                                    <h4 class="fs-16 fw-semibold mb-1">Lease Terms</h4>
                                    <div class="row py-2">
                                        <div class="col-12">

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="suite_unit_floor_number">Suite / UNIT
                                                            /
                                                            Floor Number<span style="color: red;">*</span>
                                                        </label>
                                                        <input type="text" id="suite_unit_floor_number"
                                                            name="suite_unit_floor_number" class="form-control important"
                                                            placeholder="Suite / UNIT / Floor Number">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="permitted_use" class="form-label">Permitted Use<span
                                                                style="color: red;">*</span>
                                                        </label>

                                                        <select class="form-select important"
                                                            aria-label="Default select example" id="permitted_use"
                                                            name="permitted_use">
                                                            <option selected disabled>Select permitted use</option>
                                                            <option value="office">Office</option>
                                                            <option value="retail">Retail</option>
                                                            <option value="storage">Storage</option>
                                                            <option value="industrial">Industrial</option>
                                                        </select>
                                                    </div>
                                                </div> <!-- end col -->



                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="lease_start_date">Lease Start<span
                                                                style="color: red;">*</span>
                                                        </label>
                                                        <input type="date" id="lease_start_date" name="lease_start_date"
                                                            class="form-control important" placeholder="Enter lease start date">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="lease_exp_date">Lease Expiry<span
                                                                style="color: red;">*</span>
                                                        </label>
                                                        <input type="date" id="lease_exp_date" name="lease_exp_date"
                                                            class="form-control important"
                                                            placeholder="Enter lease expiration date">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="rent_commencement_date">Rent
                                                            Start</label>
                                                        <input type="date" id="rent_commencement_date"
                                                            name="rent_commencement_date" class="form-control"
                                                            placeholder="Enter rent commencement date">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="basicLname2">Lease Term
                                                        </label>
                                                        <div class="row">
                                                            <div class="col-6">
                                                                <p class="mb-1">Year</p>
                                                                <input type="text" class="form-control" placeholder="Years"
                                                                id="exp_years" readonly value="1">
                                                            </div>
                                                            <div class="col-6">
                                                                <p class="mb-1">Month</p>
                                                                <input type="text" class="form-control" placeholder="Months"
                                                                    id="exp_months" readonly value="12">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-0">
                                                        <label class="form-label mx-2" for="basicLname2">Renewal Option<span
                                                                style="color: red;">*</span>
                                                        </label>
                                                        <div class="form-ch d-flex align-items-center">
                                                            <div class="form-check py-2">
                                                                <input class="form-check-input important" type="radio"
                                                                    name="renewal_option" value="Yes" id="flexCheckDefault">
                                                                <label class="form-check-label" for="renewal_option">
                                                                    yes
                                                                </label>
                                                            </div>

                                                            <div class="form-check py-2 mx-2">
                                                                <input class="form-check-input important" type="radio"
                                                                    name="renewal_option" value="No" id="flexCheckDefault">
                                                                <label class="form-check-label" for="renewal_option">
                                                                    No
                                                                </label>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4 renewal_container">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="basicLname2">Number of Renewals<span
                                                                style="color: red;">*</span>
                                                        </label>
                                                        <input type="text" id="no_of_renewals" name="no_of_renewals"
                                                            class="form-control important"
                                                            placeholder="Enter number of renewals">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-6 renewal_container">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="basicLname2">Renewal Terms<span
                                                                style="color: red;">*</span>
                                                        </label>
                                                        <input type="text" id="renewal_terms" name="renewal_terms"
                                                            class="form-control" placeholder="Enter renewal terms">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="basicLname2">Renewal Date<span
                                                                style="color: red;">*</span>
                                                        </label>
                                                        <input type="date" id="renewal_date" name="renewal_date"
                                                            class="form-control important" placeholder="Enter Renewal Terms">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="lease_type" class="form-label">Lease Type<span
                                                                style="color: red;">*</span>
                                                        </label>

                                                        <select class="form-select important" id="lease_type" name="lease_type"
                                                            aria-label="Default select example">
                                                            <option selected disabled>Select lease type</option>
                                                            <option value="Full Gross">Full Gross</option>
                                                            <option value="Modified Gross">Modified Gross</option>
                                                            <option value="Net">Net</option>
                                                            <option value="Triple Net">Triple Net</option>
                                                        </select>
                                                    </div>
                                                </div> <!-- end col -->

                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="basicLname2">Base Year</label>
                                                        <input type="number" id="base_year" name="base_year" class="form-control"
                                                            placeholder="Enter base year">
                                                    </div>
                                                </div><!-- end col -->
                                            </div><!-- end row -->
                                        </div> <!-- end col -->
                                    </div> <!-- end row -->
                                </div><!-- end tab-pane -->

                                <div class="tab-pane" id="rent-financial" role="tabpanel">
                                    <h4 class="fs-16 fw-semibold mb-1">Rent Terms</h4>
                                    <div class="row py-2">
                                        <div class="col-12">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="total_leased_sf">Total Leased SF <span
                                                                style="color: red;">*</span></label>
                                                        <input type="text" id="total_leased_sf" name="total_leased_sf"
                                                            class="form-control important" placeholder="Enter leased SF">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="total_rentable_sf">Total Rentable
                                                            SF</label>
                                                        <input type="text" id="total_rentable_sf" name="total_rentable_sf"
                                                            class="form-control" placeholder="Enter rentable SF">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="total_usable_sf">Total Usable SF</label>
                                                        <input type="text" id="total_usable_sf" name="total_usable_sf"
                                                            class="form-control" placeholder="Enter usable SF">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="rent_type">Rent Type</label>
                                                        <input type="text" id="rent_type" name="rent_type" class="form-control"
                                                            placeholder="Enter rent type">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="rate_per_sf">Rate (SF)</label>
                                                        <input type="text" id="rate_per_sf" name="rate_per_sf"
                                                            class="form-control" placeholder="Enter rate per SF">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="monthly_base_rent">Monthly Rent</label>
                                                        <input type="text" id="monthly_base_rent" name="monthly_base_rent"
                                                            class="form-control" placeholder="Enter monthly base rent">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="annual_base_rent">Annual Rent<span
                                                                style="color: red;">*</span>
                                                        </label>
                                                        <input type="text" id="annual_base_rent" name="annual_base_rent"
                                                            class="form-control important" placeholder="Enter annual base rent">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="asking_rent_in_sf">Asking Rent
                                                            (SF)</label>
                                                        <input type="text" id="asking_rent_in_sf" name="asking_rent_in_sf"
                                                            class="form-control" placeholder="Enter asking rent per SF">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="net_effective_rent_in_sf">NER
                                                            (SF)</label>
                                                        <input type="text" id="net_effective_rent_in_sf"
                                                            name="net_effective_rent_in_sf" class="form-control"
                                                            placeholder="Enter net effective rent in SF">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="market_rate_per_sqft">Market Rate
                                                            (SF)</label>
                                                        <input type="text" id="market_rate_per_sqft" name="market_rate_per_sqft"
                                                            class="form-control" placeholder="Enter market rate per SF">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="f-label">Percentage Rent</label>
                                                        <input type="text" id="percentage_rent" name="percentage_rent"
                                                            class="form-control" placeholder="Enter percentage rent">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="f-label">Prorate Share</label>
                                                        <input type="text" id="prorate_share_in_percentage"
                                                            name="prorate_share_in_percentage" class="form-control"
                                                            placeholder="Enter prorate share percentage">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="f-label">Concessions</label>
                                                        <input type="text" id="rent_concessions" name="rent_concessions"
                                                            class="form-control" placeholder="Enter rent concessions">
                                                    </div>
                                                </div><!-- end col -->



                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label for="Description" class="form-label">Escalation Terms</label>

                                                        <select class="form-select" id="rent_escalation_terms"
                                                            name="rent_escalation_terms" aria-label="Default select example">
                                                            <option selected disabled>Enter escalation terms</option>
                                                            <option value="annual_percentage">Annual %</option>
                                                            <option value="fixed_amount">Fixed Amount</option>
                                                            <option value="cpi_based">CPI based</option>
                                                            <option value="step_up_schedule">Step-up schedule</option>
                                                        </select>
                                                    </div>
                                                </div> <!-- end col -->

                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label for="Description" class="form-label">Arrears</label>

                                                        <select class="form-select" name="outstanding_payments_and_arrears"
                                                            id="outstanding_payments_and_arrears"
                                                            aria-label="Default select example">
                                                            <option selected disabled>Enter outstanding payments</option>
                                                            <option value="overdue">Overdue</option>
                                                            <option value="current">Current</option>
                                                            <option value="late">Late</option>
                                                        </select>
                                                    </div>
                                                </div> <!-- end col -->
                                            </div><!-- end row -->
                                        </div> <!-- end col -->
                                    </div> <!-- end row -->
                                </div><!-- end tab-pane -->

                                <div class="tab-pane" id="brokers-contacts" role="tabpanel">
                                    <h4 class="fs-16 fw-semibold mb-1">Broker Contacts</h4>

                                    <div class="row py-2">
                                        <div class="col-12">
                                            <div class="row pb-3 mb-2 border-bottom">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="owner[name][]">Owner Name</label>
                                                        <div class="add-item">
                                                            <input type="text" name="owner[name][]" class="form-control"
                                                                placeholder="Enter owner name">
                                                            <i class="ri-add-circle-line"
                                                                onclick="add_land_owner_name_container()"></i>
                                                        </div>
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-6">

                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="owner[contact_person][]">Contact
                                                            person</label>
                                                        <input type="text" name="owner[contact_person][]" class="form-control"
                                                            placeholder="Enter contact person name">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="owner[email][]">Email Id</label>
                                                        <input type="text" name="owner[email][]"
                                                            class="form-control optional email"
                                                            placeholder="Enter contact person email Id">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="owner[contact_no][]">Mobile</label>
                                                        <input type="text" name="owner[contact_no][]"
                                                            class="form-control optional phone"
                                                            placeholder="Enter contact person mobile ">
                                                        <input type="hidden" name="owner[id][]">
                                                    </div>
                                                </div><!-- end col -->

                                            </div>
                                            <div class="row" id="owner_list">

                                            </div>
                                            <div class="row mt-3 pb-3 mb-2 border-bottom">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="basicLname2">Tenant Broker<span style="color: red;">*</span></label>
                                                        <div class="add-item">
                                                            <input type="text" id="rep_broker_name" name="rep_broker[name][]"
                                                                class="form-control important"
                                                                placeholder="Enter tenant broker name ( Could be a company or Individual)">
                                                            <i class="ri-add-circle-line"
                                                                onclick="add_rep_broker_name_container()"></i>
                                                        </div>
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-6">

                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="rep_broker[contact_person][]">Contact Person Name<span style="color: red;">*</span>
                                                        </label>
                                                        <input type="text" id="rep_contact_person"
                                                            name="rep_broker[contact_person][]" class="form-control important"
                                                            placeholder="Enter contact person name">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="rep_broker[email][]">Email Id <span
                                                                style="color: red;">*</span></label>
                                                        <input type="text" id="rep_email" name="rep_broker[email][]"
                                                            class="form-control important email"
                                                            placeholder="Enter contact person email Id">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="rep_broker[contact_no][]">Mobile<span style="color: red;">*</span></label>
                                                        <input type="text" name="rep_broker[contact_no][]"
                                                            class="form-control important phone"
                                                            placeholder="Enter contact person mobile">
                                                        <input type="hidden" name="rep_broker[id][]">
                                                    </div>
                                                </div><!-- end col -->
                                            </div>

                                            <div id="rep_broker_list">

                                            </div>

                                            <div class="row mt-3 pb-3 mb-2 border-bottom">

                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="basicLname2">Listing Broker<span
                                                                style="color: red;">*</span></label>
                                                        <div class="add-item">
                                                            <input type="text" name="listing_broker[name][]"
                                                                class="form-control important"
                                                                placeholder="Enter listing broker name (Could be a company or Individual)">
                                                            <i class="ri-add-circle-line"
                                                                onclick="add_listing_broker_name_container()"></i>
                                                        </div>
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-6">

                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="listing_broker[contact_person][]">Contact Person Name<span style="color: red;">*</span></label>
                                                        <input type="text" name="listing_broker[contact_person][]"
                                                            class="form-control important"
                                                            placeholder="Enter contact person name">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="listing_broker[email][]">Email Id<span
                                                                style="color: red;">*</span></label>
                                                        <input type="text" name="listing_broker[email][]"
                                                            class="form-control important email"
                                                            placeholder="Enter contact person email Id">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="listing_broker[contact_no][]">Mobile<span style="color: red;">*</span></label>
                                                        <input type="text" name="listing_broker[contact_no][]"
                                                            class="form-control important phone"
                                                            placeholder="Enter contact person mobile ">
                                                        <input type="hidden" name="listing_broker[id][]">
                                                    </div>
                                                </div><!-- end col -->
                                            </div><!-- end row -->
                                            <div id="listing_broker_list">

                                            </div>
                                        </div> <!-- end col -->
                                    </div> <!-- end row -->
                                </div><!-- end tab-pane -->

                                <div class="tab-pane" id="tenant-consideration" role="tabpanel">
                                    <h4 class="fs-16 fw-semibold mb-1">Tenant-Specific Considerations</h4>
                                    <div class="row py-2">
                                        <div class="col-12">
                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label for="Description" class="form-label">Anchor Tenant
                                                            (Yes/No)</label>

                                                        <div class="d-flex">

                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio"
                                                                    name="anchor_tenant" value="yes">
                                                                <label class="form-check-label" for="anchor_tenant">Yes</label>
                                                            </div>

                                                            <div class="form-check form-check-inline mx-3">
                                                                <input class="form-check-input" type="radio"
                                                                    name="anchor_tenant" value="no">
                                                                <label class="form-check-label" for="anchor_tenant">No</label>
                                                            </div>

                                                        </div>


                                                    </div>
                                                </div> <!-- end col -->


                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label for="Description" class="form-label">Select TI Allowance
                                                            (Yes/No)</label>

                                                        <div class="d-flex">

                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio" name="ti_allowance"
                                                                    value="yes">
                                                                <label class="form-check-label" for="ti_allowance">Yes</label>
                                                            </div>

                                                            <div class="form-check form-check-inline mx-3">
                                                                <input class="form-check-input" type="radio" name="ti_allowance"
                                                                    value="no">
                                                                <label class="form-check-label" for="ti_allowance">No</label>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div> <!-- end col -->

                                                <div class="col-md-4 it_allowance">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="f-label">TI Allowance Amount ($)</label>
                                                        <input type="text" id="ti_allowance_amount" name="ti_allowance_amount"
                                                            class="form-control" placeholder="Enter TI allowance amount">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="f-label">Percentage Rent</label>
                                                        <input type="text" id="tenant_specific_rent_percentage"
                                                            name="tenant_specific_rent_percentage" class="form-control"
                                                            placeholder="Enter percentage rent">
                                                    </div>
                                                </div><!-- end col -->

                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label for="Description" class="form-label">Renewal Probability</label>

                                                        <select class="form-select" id="renewal_probability"
                                                            name="renewal_probability" aria-label="Default select example">
                                                            <option selected>Select renewal probability</option>
                                                            <option value="Low">Low</option>
                                                            <option value="Medium">Medium</option>
                                                            <option value="High">High</option>
                                                        </select>
                                                    </div>
                                                </div> <!-- end col -->

                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="Description" class="form-label">Tenant Risk</label>
                                                        <select class="form-select" aria-label="Default select example"
                                                            id="tenant_risk" name="tenant_risk">
                                                            <option selected disabled>Select tenant risk profile</option>
                                                            <option value="Low">Low</option>
                                                            <option value="Medium">Medium</option>
                                                            <option value="High">High</option>
                                                        </select>
                                                    </div>
                                                </div> <!-- end col -->
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="Description" class="form-label">Credit Profile</label>
                                                        <select class="form-select" aria-label="Default select example"
                                                            id="credit_profile" name="credit_profile">
                                                            <option selected disabled>Select tenant credit profile</option>
                                                            <option value="Low">Low</option>
                                                            <option value="Medium">Medium</option>
                                                            <option value="High">High</option>
                                                        </select>
                                                    </div>
                                                </div> <!-- end col -->

                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="Description" class="form-label">Tenant Satisfaction
                                                            Rating</label>

                                                        <div class="star-rating">
                                                            <span class="star" data-value="1"><i
                                                                    class="ri-star-fill"></i></span>
                                                            <span class="star" data-value="2"><i
                                                                    class="ri-star-fill"></i></span>
                                                            <span class="star" data-value="3"><i
                                                                    class="ri-star-fill"></i></span>
                                                            <span class="star" data-value="4"><i
                                                                    class="ri-star-fill"></i></span>
                                                            <span class="star" data-value="5"><i
                                                                    class="ri-star-fill"></i></span>
                                                        </div>
                                                        <input type="hidden" name="tenant_satisfaction_rating"
                                                            id="tenant_satisfaction_rating">
                                                    </div>
                                                </div> <!-- end col -->


                                            </div><!-- end row -->
                                        </div> <!-- end col -->
                                    </div> <!-- end row -->
                                </div><!-- end tab-pane -->

                                <div class="tab-pane" id="images" role="tabpanel">
                                    <h4 class="fs-16 fw-semibold mb-1">Images</h4>
                                    <div class="row py-2">
                                        <div class="col-12">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="f-label">Upload images here</label>
                                                        <div class="d-flex align-items-center">
                                                            <input type="file" id="uploadImages" name="images[]" multiple
                                                                accept="image/jpeg, image/jpg, image/png" class="form-control"
                                                                placeholder="Upload images here">
                                                        </div>
                                                    </div>
                                                </div><!-- end col -->
                                                <div class="col-12" id="image_inputs">

                                                </div>
                                                <div class="col-12">
                                                    <div class="row" id="image_list">

                                                    </div>
                                                </div>
                                            </div><!-- end row -->
                                        </div> <!-- end col -->
                                    </div> <!-- end row -->
                                </div><!-- end tab-pane -->

                                <div class="d-flex flex-wrap align-items-center wizard justify-content-between gap-3 mt-3">
                                    <div class="first">

                                    </div>
                                    <div class="d-flex gap-2">
                                        <div class="previous" id="prevBtn">
                                            <a href="javascript:void(0);" class="btn btn-primary">
                                                <i class="ri-arrow-left-line me-2"></i>
                                                Previous Step
                                            </a>
                                        </div>
                                        <div class="next" id="nextBtn">
                                            <a href="javascript:void(0);" class="btn btn-primary">
                                                Next Step<i class="ri-arrow-right-line ms-2"></i>
                                            </a>
                                        </div>
                                        <button type="submit" class="btn btn-success" id="submitBtn">
                                            Submit <i class="ri-check-line ms-2"></i>
                                        </button>
                                    </div>
                                    <div class="last">
                                        <input type="hidden" name="tenant_id" id="tenant_id">
                                        <input type="hidden" name="suite_id" id="suite_id">
                                    </div>

                                </div>

                            </div> <!-- tab-content -->
                        </div>
                    </div> <!-- end #horizontalwizard-->
                </form>
            </div>
        </div>
    @endif

    <!---View Suite-->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="view-suite" aria-labelledby="suite-detailsLabel">
        <div class="offcanvas-header">

            <div class="d-flex justify-content-between w-100 px-3">
                <h5 class="offcanvas-title" id="suite-detailsLabel">Suite 101 - Floor 1</h5>
                <h5 class="offcanvas-title" id="suite-detailsLabel">Property ABC</h5>
            </div>

            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">

            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-lg-6 col-12">
                        <table class="table table-box">

                            <tbody>
                                <tr>
                                    <td>Tenant Name</td>
                                    <td>Microsoft</td>
                                </tr>
                                <tr>
                                    <td>Tenant ID</td>
                                    <td>A101DF658</td>
                                </tr>
                                <tr>
                                    <td>Tenant Address</td>
                                    <td>916, 56 & 7th, NY Manhattan</td>
                                </tr>
                                <tr>
                                    <td>Business Type</td>
                                    <td>IT</td>
                                </tr>
                                <tr>
                                    <td>Floor Number</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>Permitted use</td>
                                    <td>Office</td>
                                </tr>
                                <tr>
                                    <td>Lease Start Date</td>
                                    <td>2025/05/31</td>
                                </tr>
                                <tr>
                                    <td>Lease Expiration Date</td>
                                    <td>2026/05/31</td>
                                </tr>
                                <tr>
                                    <td>Rent commencement date</td>
                                    <td>2025/05/31</td>
                                </tr>
                                <tr>
                                    <td>Total Lease Term</td>
                                    <td>1 year</td>
                                </tr>
                                <tr>
                                    <td>Renewal Options </td>
                                    <td>Yes</td>
                                </tr>
                                <tr>
                                    <td>Renewal Date</td>
                                    <td>2026/05/31</td>
                                </tr>
                            </tbody>

                        </table>
                    </div>
                    <div class="col-md-6 col-lg-6 col-12">
                        <table class="table table-box">

                            <tbody>
                                <tr>
                                    <td>Lease Type</td>
                                    <td>Full Gross</td>
                                </tr>
                                <tr>
                                    <td>Load Factor</td>
                                    <td>12,345 T</td>
                                </tr>
                                <tr>
                                    <td>Listing Broker Company</td>
                                    <td>ABC Group</td>
                                </tr>
                                <tr>
                                    <td>Anchor Tenant </td>
                                    <td>Microsoft</td>
                                </tr>
                                <tr>
                                    <td>TI Allowance</td>
                                    <td>$2,300</td>
                                </tr>
                                <tr>
                                    <td>TI Allowance Amount</td>
                                    <td>$45,352</td>
                                </tr>
                                <tr>
                                    <td>Percentage Rent </td>
                                    <td>$6545</td>
                                </tr>
                                <tr>
                                    <td>Renewal Probability</td>
                                    <td>54%</td>
                                </tr>
                                <tr>
                                    <td>Tenant Risk & Credit Profile</td>
                                    <td>Medium</td>
                                </tr>
                                <tr>
                                    <td>Tenant Satisfaction Rating</td>
                                    <td></td>
                                </tr>

                            </tbody>

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



        </div>
    </div>

@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function () {
            $('#subscribe-list-table').DataTable({
                "paging": true,             // Enable pagination
                "searching": true,          // Enable search box
                "ordering": true,           // Enable sorting
                "info": true,               // Show table info
                "lengthMenu": [8, 10, 25],  // Page size options
                "pageLength": 8,            // Default page size

                "columnDefs": [
                    { "type": "date-dd-mmm-yyyy", "targets": 5 } // Apply date sorting on column index 2
                ]
            });
        });

        $(document).ready(function () {
            $('.tab-button').click(function () {
                var tabID = $(this).data('tab');

                $('.tab-content').hide(); // Hide all tab contents
                $('#' + tabID).show();    // Show selected tab content

                $('.tab-button').removeClass('active');
                $(this).addClass('active');
            });
        });


        document.addEventListener("DOMContentLoaded", function () {
            const nextBtn = document.getElementById("nextBtn");
            const prevBtn = document.getElementById("prevBtn");
            const submitBtn = document.getElementById("submitBtn");

            const tabs = document.querySelectorAll('.nav-link');
            const totalTabs = tabs.length;

            tabs.forEach(tab => {
                tab.addEventListener('click', function () {
                    handleTabChange(this.getAttribute('href'));
                });
            });

            function handleTabChange(activeTabId) {
                const tabsArr = Array.from(tabs);
                const activeTab = tabsArr.find(tab => tab.getAttribute('href') === activeTabId);
                const currentIndex = tabsArr.indexOf(activeTab);

                // Toggle Next/Submit buttons
                if (activeTabId === '#images') {
                    nextBtn.classList.add('d-none');
                    // submitBtn.classList.remove('d-none');
                } else {
                    nextBtn.classList.remove('d-none');
                    // submitBtn.classList.add('d-none');
                }

                // Toggle Previous button
                if (currentIndex === 0) {
                    prevBtn.classList.add('d-none');
                } else {
                    prevBtn.classList.remove('d-none');
                }
            }

            // Click event for "Next" button
            nextBtn.addEventListener('click', function () {
                const currentTab = document.querySelector('.nav-link.active');
                const tabsArr = Array.from(tabs);
                const currentIndex = tabsArr.indexOf(currentTab);

                if (currentIndex < totalTabs - 1) {
                    const nextTab = tabsArr[currentIndex + 1];
                    nextTab.click();
                }
            });

            // Click event for "Previous" button
            prevBtn.addEventListener('click', function () {
                const currentTab = document.querySelector('.nav-link.active');
                const tabsArr = Array.from(tabs);
                const currentIndex = tabsArr.indexOf(currentTab);

                if (currentIndex > 0) {
                    const prevTab = tabsArr[currentIndex - 1];
                    prevTab.click();
                }
            });

            // Trigger once to set initial button visibility
            const initialTab = document.querySelector('.nav-link.active');
            if (initialTab) {
                handleTabChange(initialTab.getAttribute('href'));
            }
        });

        $(document).ready(function () {
            // Identify the last tab dynamically
            $('.propertwizard').each(function () {
                if ($(this).hasClass('last')) {
                    $('.next').remove(); // Removes the 'Next Step' button only in the last tab
                }
            });
        });


        $(document).ready(function () {
            let selectedRating = 0;

            $('.star').on('mouseenter', function () {
                const value = $(this).data('value');
                highlightStars(value);
            });

            $('.star-rating').on('mouseleave', function () {
                highlightStars(selectedRating);
            });

            $('.star').on('click', function () {
                selectedRating = $(this).data('value');
                console.log('element', $(this))
                console.log('value', selectedRating)
                highlightStars(selectedRating);
                $('#rating-value').text(`You rated: ${selectedRating} star${selectedRating > 1 ? 's' : ''}`);
            });

            function highlightStars(rating) {
                $('.star').each(function () {
                    const starValue = $(this).data('value');
                    $(this).toggleClass('selected', starValue <= rating);
                    $('#tenant_satisfaction_rating').val(rating);
                });
            }
        });
    </script>

    {{-- my custom script --}}
    <script>
        $(document).ready(function () {
            var data_table = $('#example').DataTable({
                paging: true,
                searching: true,
                ordering: true,
                info: true,
                columns: [
                    { title: "Floor No." },
                    { title: "No. of Suites" },
                    { title: "Actions" }
                ]
            });


            function listTenants() {
                let prop_id = $('#property_select').val();
                if(!prop_id || prop_id == "") {
                    Swal.fire("Please Select a Property");
                    return false;
                }
                const metaDescription = document.querySelector('meta[name="csrf-token"]');
                const content = metaDescription ? metaDescription.getAttribute('content') : null;
                $.ajax({
                    url: "{{ route('tenantAddList') }}",
                    method: 'POST',
                    data: {
                        property_id: $('#property_select').val(),
                    },
                    headers: {
                        'X-CSRF-TOKEN': content,
                        'Authorization': 'Bearer {{ session("authentication_token") }}',
                    },
                    success: function (response) {
                        // console.log(response)
                        if (response.data && Array.isArray(response.data)) {
                            // Map the API data into DataTable row format
                            // console.log(response)
                            const tableData = response.data.map(item => ([
                                item.name || '-',
                                item.suites.length || '0',
                                `<div class="plan-btn justify-content-center d-flex p-0">${!item.suites.length ? "-" : item.suites.map(suite => {
                                    return `<a class="btn btn-success mx-2" type="button" onClick="getTenantData('${suite.id}')">Suite ${suite.name}</a>`
                                }).join(' ')}</div>`,
                            ]));

                            data_table.clear();
                            data_table.rows.add(tableData);
                            data_table.draw();
                        } else {
                            Swal.fire("No Data Found !");
                            console.error('Invalid data format:', response);
                        }
                    },
                    error: function (xhr) {
                        Swal.fire('Failed to load suite data.');
                        if (xhr.responseJSON && typeof xhr.responseJSON.message === 'object') {
                            const errorMessage = Object.values(xhr.responseJSON.message).join(' ');
                            Swal.fire(errorMessage);
                        } else {
                            console.error(xhr.responseText);
                        }
                    }
                });
            }

            @if($permission === 'Admin' || !empty($permission['Property Management']['creat'] || !empty($permission['Property Management']['edit'])))
                $('#uploadImages').on('change', function () {
                    let files = document.getElementById('uploadImages').files;
                    let suiteId = document.getElementById('suite_id').value;
                    let tenantId = document.getElementById('tenant_id').value;
                    const metaDescription = document.querySelector('meta[name="csrf-token"]');
                    const content = metaDescription ? metaDescription.getAttribute('content') : null;

                    if (!suiteId) {
                        Swal.fire("Tenant ID is required");
                        return;
                    }

                    if (files.length === 0) {
                        Swal.fire("Please select at least one image.");
                        return;
                    }

                    let formData = new FormData();
                    for (let i = 0; i < files.length; i++) {
                        formData.append("images[]", files[i]);
                    }

                    formData.append("suite_id", suiteId);
                    formData.append("tenant_id", tenantId);

                    $.ajax({
                        url: "{{ route('uploadTenantImages') }}",
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': content,
                            'Authorization': 'Bearer {{ session("authentication_token") }}',
                        },
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function (response) {
                            if (response.success) {
                                response.paths.forEach(img => {
                                    let template = `
                                                                                                <div class="col-md-6">
                                                                                                        <div class="suite_images overflow-hidden mt-5 mb-2">
                                                                                                            <button class="btn btn-danger suite_img_button" type="button" onclick="deleteImage('${img.img_id}',event)"><i class="ri-delete-bin-line"></i></button>
                                                                                                            <img src="storage/tenants/${img.img_url}" alt="${img.img_url}" class="object-cover uploaded_image_preview" />
                                                                                                        </div>
                                                                                                </div>`;
                                    $('#image_list').append(template);
                                    $('#uploadImages').val('');
                                });
                                document.getElementById('images').value = "";
                            } else {
                                Swal.fire("Upload failed.");
                            }
                        },
                        error: function (err) {
                            if (err.responseJSON && err.responseJSON.message) {
                                Swal.fire(err.responseJSON.message);
                            }
                            console.error(err);
                        }
                    });
                });
            @endif

            $('#listTenants').on('click', function () {
                listTenants();
            })

            @if($permission === 'Admin' || !empty($permission['Property Management']['creat'] || !empty($permission['Property Management']['edit'])))
                $('#tenant-form').on('submit', function (e) {
                    e.preventDefault();

                    if (!validateAllPages()) {
                        return false;
                    }

                    let error_found = false;
                    if (!($('.uploaded_image_preview').length > 0)) {
                        if ($('#uploadImages').val().length === 0) {
                            error_found = true;
                        }
                    }
                    if (error_found) {
                        Swal.fire('Select image to upload !');
                        isReactivating = true;
                        $('#suite-details a[href="#images"]').tab('show');
                        isReactivating = false;
                        document.querySelector("#nextBtn").classList.add('d-none');
                        document.querySelector("#prevBtn").classList.remove('d-none');
                        return "";
                    }

                    var formData = new FormData(this);
                    // formData.append('section', currentTab);
                    $.ajax({
                        type: 'POST',
                        url: '{{ route("tenantsStore") }}',
                        data: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Authorization': 'Bearer {{ session("authentication_token") }}',
                        },
                        processData: false, // Important!
                        contentType: false, // Important!
                        success: function (data) {
                            // Hide the offcanvas
                            var offcanvas = document.getElementById('suite-details');
                            offcanvas.classList.remove('show');
                            $('.offcanvas-backdrop').removeClass('show');
                            console.log('api hit !');
                            console.log(data);
                            Swal.fire('Tenant updated successfully');
                            listTenants();

                        }, error: function (xhr, status, error) {
                            // console.log(xhr.responseText);
                            console.log(error);
                            let errMsg = '';
                            if (xhr.responseJSON.error) {
                                if (typeof xhr.responseJSON.error === 'string') {
                                    errMsg = xhr.responseJSON.error;
                                } else {
                                    Object.keys(xhr.responseJSON.error).forEach(key => {
                                        errMsg += xhr.responseJSON.error[key] + '\n';
                                    });
                                }
                                Swal.fire(errMsg);
                            } else {
                                Swal.fire("Something went wrong! can't ")
                            }
                            // console.log(xhr);
                        }
                    });

                });
            @endif

            @if (!empty($suite))
                listTenants();
                getTenantData({{ $suite }});
            @endif

                                        });

        @if($permission === 'Admin' || !empty($permission['Property Management']['creat'] || !empty($permission['Property Management']['edit'])))
            function getTenantData(id) {
                $.ajax({
                    url: "{{ route('getTenantData') }}",
                    method: 'POST',
                    data: {
                        suite_id: id,
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Authorization': 'Bearer {{ session("authentication_token") }}',
                        'Accept': 'application/json',
                    },
                    success: function (response) {
                        $('#suite-details .form-control,#suite-details .form-select, .form-check-input').removeClass('validation_failled');
                        console.log('suite_id', id);
                        $("[name='primary_phone[]']").not(':first').closest('.add-item').remove();
                        $("[name='secondary_phone[]']").not(':first').closest('.add-item').remove();

                        $("#owner_list").html('');
                        $("#rep_broker_list").html('');
                        $("#listing_broker_list").html('');

                        $('#image_list').html('');

                        $('#suite-details-Label').html(`Suite ${response.suite_details.suite_no} - Floor ${response.suite_details.floor_no}`);

                        $('#image_inputs .duplicate-item').remove();

                        if (response.data) {
                            fillTenantData(response);
                        } else {
                            // clear all form data
                            $('form')[0].reset();
                            $(':input', 'form').not(':button, :submit, :reset, :hidden, .form-check-input').val('').removeAttr('selected');
                            $('.form-check-input', 'form').prop('checked', false);
                        }
                        $('#suite_id').val(id);
                        $('#tenant_id').val(response.data?.id ?? "");
                        // Show the offcanvas
                        var offcanvas = new bootstrap.Offcanvas(document.getElementById('suite-details'));
                        // isReactivating = true; // mark as internal to skip validation
                        // setTimeout(() => {
                        //     isReactivating = true;
                        //     $('#suite-details a[href="#tenant-info"]').tab('show');
                        // }, 0);
                        offcanvas.show();
                        document.querySelector("#nextBtn").classList.remove('d-none');
                        document.querySelector("#prevBtn").classList.add('d-none');
                        // document.querySelector("#submitBtn").classList.add('d-none');
                        isReactivating = true;
                        $('#suite-details a[href="#tenant-info"]').tab('show');
                        isReactivating = false;
                    },
                    error: function (xhr) {
                        $('#tenant_id').val('');
                        $('.form-control').removeClass('validation_failled');
                        Swal.fire('Failed to load tenant data.');
                        console.error('Error fetching suite data:', xhr.responseText);
                    }
                });
            }

            function fillTenantData(response) {
                console.log(response)
                let data = response.data;

                $('.it_allowance').show();
                if (response.data.ti_allowance == 'no') {
                    $('.it_allowance').hide();
                }

                $('.renewal_container').show();
                $('.renewal_container .form-control').addClass('important');
                if (response.data.renewal_option == 'No') {
                    $('.renewal_container').hide();
                    $('.renewal_container .form-control.important').removeClass('important');
                }

                for (let key in data) {
                    if (data.hasOwnProperty(key)) {
                        let value = data[key];
                        if ($("[name='" + key + "']").length !== 0) {
                            if ($("[name='" + key + "']").length === 2) {
                                let radioButtons = $("[name='" + key + "']");
                                radioButtons.each(function () {
                                    if ($(this).val() === value) {
                                        $(this).prop('checked', true);
                                        console.log($(this));
                                    }
                                });
                            } else {
                                // console.log($("[name='" + key + "']"));
                                $("[name='" + key + "']").val(value);
                            }
                        } else if ($("[name='" + key + "[]']").length !== 0) {
                            // console.log($("[name='" + key + "[]']"));
                            if (key === 'primary_phone') {
                                let parsed_value = JSON.parse(value);
                                if (parsed_value && parsed_value.length > 0) {
                                    $("[name='" + key + "[]']").val(parsed_value[0]);
                                    parsed_value.slice(1).forEach(val => add_primary_phone(val));
                                }
                            } else if (key === 'secondary_phone') {
                                let parsed_value = JSON.parse(value);
                                if (parsed_value && parsed_value.length > 0) {
                                    $("[name='" + key + "[]']").val(parsed_value[0]);
                                    parsed_value.slice(1).forEach(val => add_secondary_phone(val));
                                }
                            } else {
                                if (key != 'images') {
                                    $("[name='" + key + "[]']").val(value);
                                }
                            }

                        } else {
                            // console.log(`Not found :: ${key} - ${value}`);
                        }
                    }
                }

                if (response.data.owners && response.data.owners.length > 0) {
                    let owner = response.data.owners;
                    $("[name='owner[name][]']").val(owner[0].name);
                    $("[name='owner[contact_person][]']").val(owner[0].contact_person);
                    $("[name='owner[email][]']").val(owner[0].email);
                    $("[name='owner[contact_no][]']").val(owner[0].contact_no);
                    $("[name='owner[id][]']").val(owner[0].id);
                    owner.slice(1).forEach(val => add_land_owner_name_container(val));
                }

                if (response.data.ListingBroker && response.data.ListingBroker.length > 0) {
                    let ListingBroker = response.data.ListingBroker;
                    $("[name='listing_broker[name][]']").val(ListingBroker[0].name);
                    $("[name='listing_broker[contact_person][]']").val(ListingBroker[0].contact_person);
                    $("[name='listing_broker[email][]']").val(ListingBroker[0].email);
                    $("[name='listing_broker[contact_no][]']").val(ListingBroker[0].contact_no);
                    $("[name='listing_broker[id][]']").val(ListingBroker[0].id);
                    ListingBroker.slice(1).forEach(val => add_listing_broker_name_container(val));
                }

                if (response.data.RepBroker && response.data.RepBroker.length > 0) {
                    let RepBroker = response.data.RepBroker;
                    $("[name='rep_broker[name][]']").val(RepBroker[0].name);
                    $("[name='rep_broker[contact_person][]']").val(RepBroker[0].contact_person);
                    $("[name='rep_broker[email][]']").val(RepBroker[0].email);
                    $("[name='rep_broker[contact_no][]']").val(RepBroker[0].contact_no);
                    $("[name='rep_broker[id][]']").val(RepBroker[0].id);
                    RepBroker.slice(1).forEach(val => add_rep_broker_name_container(val));
                }

                // exception like user star rating
                if ($("[name='tenant_satisfaction_rating']").length !== 0) {
                    let rating = parseInt(response.data.tenant_satisfaction_rating);
                    $('.star').each(function () {
                        const starValue = $(this).data('value');
                        $(this).toggleClass('selected', starValue <= rating);
                        $('#tenant_satisfaction_rating').val(response.data.tenant_satisfaction_rating);
                    });
                }

                $("[name='images[]']").val('');
                if (response.data.images) {
                    const images = response.data.images;
                    images.forEach(img => {
                        let template = `
                                                                                    <div class="col-md-6 duplicate-item">
                                                                                            <div class="suite_images overflow-hidden mt-5 mb-2">
                                                                                                <button class="btn btn-danger suite_img_button" type="button" onclick="deleteImage('${img.id}',event)">
                                                                                                    <i class="ri-delete-bin-line"></i>
                                                                                                </button>
                                                                                                <img src="storage/tenants/${img.img_url}" alt="${img.img_url}" class="object-cover uploaded_image_preview" />
                                                                                            </div>
                                                                                    </div>`;
                        $('#image_list').append(template);
                    });
                }

                if (response.data.state && response.data.city) {
                    getCities(response.data.city);
                }
                showleasePeriod();
            }

            let isReactivating = false; // flag to track forced re-show
            $('#suite-details a[data-bs-toggle="tab"]').on('show.bs.tab', function (e) {
                if (isReactivating) {
                    // Skip validation during programmatic tab reactivation
                    isReactivating = false;
                    return;
                }

                const nextTab = e.target.href.split('#')[1];
                const currentTab = e.relatedTarget.href.split('#')[1];
                // console.log('currentTab', currentTab);
                // console.log('Going from', currentTab, 'to', nextTab);

                if (!validatePageFilled(currentTab)) {
                    // Swal.fire('Please complete the current form section.');
                    // ? trigger tab switch back, but mark as internal
                    isReactivating = true;
                    setTimeout(() => {
                        $('#suite-details a[href="#' + currentTab + '"]').tab('show');
                        if (nextTab === 'images-info') {
                            document.querySelector("#nextBtn").classList.add('d-none');
                            document.querySelector("#prevBtn").classList.add('d-none');
                            // document.querySelector("#submitBtn").classList.remove('d-none');
                        } else {
                            document.querySelector("#nextBtn").classList.remove('d-none');
                            document.querySelector("#prevBtn").classList.remove('d-none');
                            // document.querySelector("#submitBtn").classList.add('d-none');
                        }
                    }, 0);
                } else {
                    const metaDescription = document.querySelector('meta[name="csrf-token"]');
                    const content = metaDescription ? metaDescription.getAttribute('content') : null;

                    // Gather section-specific data
                    const formData = new FormData(document.getElementById('tenant-form'));
                    formData.append('section', currentTab); // ?? Pass current section being validated

                    // Call the API to save this section
                    $.ajax({
                        url: "{{ route('tenantsStore')}}", // Change to your Laravel POST route
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': content,
                            'Authorization': 'Bearer {{ session("authentication_token") }}',
                        },
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            // Swal.fire("Uploaded successfully!");
                            console.log(currentTab, 'Uploaded successfully!');
                            // console.log(response);
                            $('#tenant_id').val(response.tenant_id ?? "");
                        },
                        error: function (xhr, status, error) {
                            // console.log("error",error);
                            // console.log("status",status);
                            errMsg = '';
                            if (xhr.responseJSON.errors || xhr.responseJSON.error) {
                                errors = xhr.responseJSON.errors || xhr.responseJSON.error;
                                if (typeof errors === 'string') {
                                    errMsg = errors;
                                } else {
                                    Object.keys(errors).forEach(key => {
                                        errMsg += errors[key] + '\n';
                                    });
                                }
                                Swal.fire(errMsg);
                            } else {
                                Swal.fire("Please complete the current form section ");
                            }

                            showTab = "";
                            if (xhr.responseJSON.section_id) {
                                isReactivating = true;
                                $('#suite-details a[href="#' + xhr.responseJSON.section_id + '"]').tab('show');
                                console.log(xhr.responseJSON.section_id, 'Upload failed!');
                                showTab = xhr.responseJSON.section_id;
                            } else {
                                isReactivating = true;
                                $('#suite-details a[href="#' + currentTab + '"]').tab('show');
                                console.log(currentTab, 'Upload failed!');
                                showTab = currentTab;
                            }

                            if (showTab === 'images-info') {
                                document.querySelector("#nextBtn").classList.add('d-none');
                                document.querySelector("#prevBtn").classList.add('d-none');
                                // document.querySelector("#submitBtn").classList.remove('d-none');
                            } else {
                                document.querySelector("#nextBtn").classList.remove('d-none');
                                document.querySelector("#prevBtn").classList.remove('d-none');
                                // document.querySelector("#submitBtn").classList.add('d-none');
                            }
                        }
                    });
                }
            });

            function validatePageFilled(tab) {
                // return true;
                let issue_found = false;
                let validation_types = ['address', 'phone', 'zipcode', 'email', 'domainEmail', 'form-check-input'];
                const phoneRegex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
                const domainEmailRegex = /^[a-zA-Z0-9._%+-]+@(?!gmail\.com$)(?!yahoo\.com$)(?!hotmail\.com$)(?!outlook\.com$)[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                // const zipCodeRegex = /^[0-9]{6}$/;

                // checking important input validation
                $('#' + tab + ' .important').each(function (e) {
                    let found = $(this).attr('class').split(' ').find(word => validation_types.includes(word));

                    $('#' + tab + ' .important').on('change input', (e) => {
                        e.target.classList.remove('validation_failled');
                    });

                    if (!$(this).val() || $(this).val() === '') {
                        issue_found = true;
                        $(this).addClass('validation_failled');
                    }

                    if (found) {
                        if (found === 'phone') {
                            if (!phoneRegex.test($(this).val())) {
                                issue_found = true;
                                $(this).addClass('validation_failled');
                            }
                        } else if (found === 'email') {
                            if (!emailRegex.test($(this).val())) {
                                issue_found = true;
                                $(this).addClass('validation_failled');
                            }
                        } else if (found === 'domainEmail') {
                            if (!domainEmailRegex.test($(this).val())) {
                                issue_found = true;
                                $(this).addClass('validation_failled');
                            }
                        }
                        //  else if (found === 'zipcode') {
                        //     if (!zipCodeRegex.test($(this).val())) {
                        //         issue_found = true;
                        //         $(this).addClass('validation_failled');
                        //     }
                        // }
                        else if (found === 'address') {
                            if ($(this).val().length < 10) {
                                issue_found = true;
                                $(this).addClass('validation_failled');
                            }
                        } else if (found === 'form-check-input') {
                            let is_checked = false;
                            $('#' + tab + ' .form-check-input').each(function (e) {
                                if ($(this).is(':checked')) {
                                    is_checked = true;
                                    $('#' + tab + ' .form-check-input').removeClass('validation_failled');
                                }
                            });
                            if (!is_checked) {
                                $('#' + tab + ' .form-check-input').addClass('validation_failled');
                            }
                        }
                    }
                });

                // checking optional input validation
                $('#' + tab + ' .optional').each(function (e) {
                    if ($(this).val() !== '' || $(this).val().length !== 0) {
                        $('#' + tab + ' .optional').on('change input', (e) => {
                            e.target.classList.remove('validation_failled');
                        });
                        let second_found = $(this).attr('class').split(' ').find(word => validation_types.includes(word));
                        if (second_found === 'phone') {
                            if (!phoneRegex.test($(this).val())) {
                                issue_found = true;
                                $(this).addClass('validation_failled');
                            }
                        } else if (second_found === 'email') {
                            if (!emailRegex.test($(this).val())) {
                                issue_found = true;
                                $(this).addClass('validation_failled');
                            }
                        }
                        // else if (second_found === 'zipcode') {
                        //     if (!zipCodeRegex.test($(this).val())) {
                        //         issue_found = true;
                        //         $(this).addClass('validation_failled');
                        //     }
                        // }
                        else if (second_found === 'address') {
                            if ($(this).val().length < 10) {
                                issue_found = true;
                                $(this).addClass('validation_failled');
                            }
                        }
                    }
                });
                return !issue_found;
            }

            // Additional fields generating functions
            function add_primary_phone(value = '') {
                let template = `
                                            <div class="add-item mt-2">
                                                <input type="number" name="primary_phone[]" class="form-control important" value="${value}" placeholder="Enter Phone Number">
                                                <i class="ri-indeterminate-circle-line" onclick="remove_added(event)"></i>
                                            </div>`;
                $('#primaryPhoneContainer').append(template);
            }

            function add_secondary_phone(value = '') {
                let template = `
                                            <div class="add-item mt-2">
                                                <input type="number" name="secondary_phone[]" class="form-control optional" value="${value}" placeholder="Enter Phone Number">
                                                <i class="ri-indeterminate-circle-line" onclick="remove_added(event)"></i>
                                            </div>`;
                $('#secondaryPhoneContainer').append(template)
            }

            function add_land_owner_name_container(value = '') {
                let template = `
                                        <div class="row owner-name-container duplicate-item border-bottom pb-1 mb-2 mt-2">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <div class="add-item">
                                                        <input type="text" name="owner[name][]" value="${value.name ?? ""}" class="form-control" placeholder="Enter owner name">
                                                        <i class="ri-indeterminate-circle-line" onclick="remove_duplicate(event)"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <input type="text" name="owner[contact_person][]" value="${value.contact_person ?? ""}" class="form-control" placeholder="Enter contact person name">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <input type="text" name="owner[email][]" value="${value.email ?? ""}" class="form-control optional email" placeholder="Enter contact person email Id">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <input type="text" name="owner[contact_no][]" value="${value.contact_no ?? ""}" class="form-control optional phone" placeholder="Enter contact person mobile ">
                                                    <input type="hidden" name="owner[id][]" value="${value.id ?? ""}">
                                                </div>
                                            </div>
                                        </div>`;
                $('#owner_list').append(template);
            }

            function add_rep_broker_name_container(value = '') {
                let template = `<div class="row rep_broker_container duplicate-item border-bottom pb-1 mb-2 mt-2">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <div class="add-item">
                                                        <input type="text" id="rep_broker_name" name="rep_broker[name][]" value="${value.name ?? ""}" class="form-control important"
                                                        placeholder="Enter tenant broker name ( Could be a company or Individual)">
                                                        <i class="ri-indeterminate-circle-line" onclick="remove_duplicate(event)"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <input type="text" id="rep_contact_person" name="rep_broker[contact_person][]" value="${value.contact_person ?? ""}" class="form-control important" placeholder="Enter contact person name">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <input type="text" id="rep_email" name="rep_broker[email][]" value="${value.email ?? ""}" class="form-control important email" placeholder="Enter contact person email Id">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <input type="text" name="rep_broker[contact_no][]" value="${value.contact_no ?? ""}" class="form-control important phone" placeholder="Enter contact person mobile">
                                                    <input type="hidden" name="rep_broker[id][]" value="${value.id ?? ""}">
                                                </div>
                                            </div>
                                        </div>`;
                $('#rep_broker_list').append(template);
            }

            function add_listing_broker_name_container(value = '') {
                let template = `
                                        <div class="row rep_broker_container duplicate-item border-bottom pb-1 mb-2 mt-2">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <div class="add-item">
                                                    <input type="text" name="listing_broker[name][]" class="form-control important" value="${value.name ?? ""}" placeholder="Enter listing broker name (Could be a company or Individual)">
                                                    <i class="ri-indeterminate-circle-line" onclick="remove_duplicate(event)"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <input type="text" name="listing_broker[contact_person][]" value="${value.contact_person ?? ""}" class="form-control important" placeholder="Enter contact person name">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <input type="text" name="listing_broker[email][]" value="${value.email ?? ""}" class="form-control important email" placeholder="Enter contact person email Id">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <input type="text" name="listing_broker[contact_no][]" value="${value.contact_no ?? ""}" class="form-control important phone" placeholder="Enter contact person mobile">
                                                <input type="hidden" name="listing_broker[id][]" value="${value.id ?? ""}">
                                            </div>
                                        </div>`;
                $('#listing_broker_list').append(template)
            }

            function remove_added(e) {
                console.log($(e.target).closest('.add-item').remove());
            }

            function remove_duplicate(e) {
                console.log($(e.target).closest('.duplicate-item').remove());
            }

            const imageList = document.getElementById('image_list');

            function deleteImage(imageId, event) {
                const metaDescription = document.querySelector('meta[name="csrf-token"]');
                const content = metaDescription ? metaDescription.getAttribute('content') : null;

                $.ajax({
                    type: 'POST',
                    url: "{{ route('deleteTenantImage') }}",
                    headers: {
                        'X-CSRF-TOKEN': content,
                        'Authorization': 'Bearer {{ session("authentication_token") }}',
                    },
                    data: {
                        image_id: imageId
                    },
                    success: function (response) {
                        // console.log(response);
                        // console.log(event.target);
                        $(event.target).closest('.duplicate-item').remove();
                        event.target.parentElement.parentElement.remove();
                    },
                    error: function (xhr, status, error) {
                        console.log(xhr.responseText);
                    }
                });
            }

            document.querySelectorAll('input[name="renewal_option"]').forEach((elem) => {
                elem.addEventListener("change", function () {
                    if (this.value === "Yes") {
                        $('.renewal_container').show();
                        $('.renewal_container .form-control').addClass('important');
                    } else {
                        $('.renewal_container').hide()
                        $('.renewal_container .form-control.important').removeClass('important');
                    }
                });
            });

            document.querySelectorAll('input[name="ti_allowance"]').forEach((elem) => {
                elem.addEventListener("change", function () {
                    if (this.value === "yes") {
                        $('.it_allowance').show()
                        $('.renewal_container .form-control').addClass('important');
                    } else {
                        $('.it_allowance').hide()
                        $('.renewal_container .form-control.important').removeClass('important');
                    }
                });
            });

            function addDuplicateImage() {
                let template = `<div class="d-flex align-items-center duplicate-item">
                                                <input type="file" name="images[]" class="form-control" accept="image/jpeg, image/jpg, image/png" placeholder="Upload images here">
                                                <button class="btn" type="button" onclick="remove_duplicate(event)">
                                                <i class="ri-indeterminate-circle-line"></i>
                                                </button>
                                            </div>`;
                $('#image_inputs').append(template);
            }

            function getCities(setValue = null) {
                console.log('getCities hit !', setValue)
                const state_id = $('#state').val();
                $('#city').empty().append('<option value="">Select City</option>');

                if (state_id != '') {
                    $.ajax({
                        url: `{{ route('getCities') }}`,
                        type: 'GET',
                        data: { name: state_id },
                        success: function (response) {
                            const message = response.message;
                            const data = response.data;
                            $.each(data, function (index, value) {
                                // let id = value['id'];
                                // let name = value['name'];
                                $('#city').append('<option value="' + value.city + '" data-zipcode="' + value.zip + '">' + value.city + '</option>');
                            });
                            if (setValue !== null) {
                                setTimeout(() => {
                                    $('#city').val(setValue);
                                }, 0);
                            }
                        },
                        error: function (xhr) {
                            const errors = xhr.responseJSON.errors;
                            console.log(errors);
                        }
                    });
                }
            }

            function showleasePeriod() {
                let lease_start_date = $('#lease_start_date').val();
                let lease_exp_date = $('#lease_exp_date').val();
                if (lease_start_date && lease_exp_date) {
                    let start_date = new Date(lease_start_date);
                    let end_date = new Date(lease_exp_date);
                    if (end_date < start_date) {
                        Swal.fire('Lease Expiration Date should be after Lease Start Date');
                        $('#lease_exp_date').val('');
                        return;
                    }
                    let diffTime = Math.abs(end_date - start_date);
                    let diffYears = Math.floor(diffTime / (1000 * 60 * 60 * 24 * 365.25));
                    let months = (diffTime % (1000 * 60 * 60 * 24 * 365.25)) / (1000 * 60 * 60 * 24 * 30);
                    $('#exp_years').val(diffYears);
                    $('#exp_months').val(Math.floor(months));
                }
            }

            $('#state').on('change', function () {
                getCities();
            });

            $('#city').on('change', function () {
                const value = $(this).val();
                const selectedOption = $(this).find('option:selected');
                const zipcode = selectedOption.data('zipcode');
                $('#zip_code').val(zipcode);
            });

            $('#lease_start_date, #lease_exp_date').on('change', function () {
                showleasePeriod();
            });

            function validateAllPages() {
                let isValid = true;
                $('#suite-details a[data-bs-toggle="tab"]').each(function () {
                    let tab_name = $(this).attr('href').replace('#', '');
                    if (!validatePageFilled(tab_name)) {
                        setTimeout(() => {
                            $('#suite-details a[href="#' + tab_name + '"]').tab('show');
                            if (tab_name === 'finished') {
                                document.querySelector("#nextBtn").classList.add('d-none');
                                document.querySelector("#prevBtn").classList.add('d-none');
                                // document.querySelector("#submitBtn").classList.remove('d-none');
                            } else {
                                document.querySelector("#nextBtn").classList.remove('d-none');
                                document.querySelector("#prevBtn").classList.remove('d-none');
                                // document.querySelector("#submitBtn").classList.add('d-none');
                            }
                        }, 0);
                        isValid = false;
                        return false;
                    }
                });

                return isValid;
            }

            function fillCustomdata() {
                let tenant_id = $('#tenant_id').val();
                let suite_id = $('#suite_id').val();
                fillTenantData({
                    "success": true,
                    "message": "data fetched successfully",
                    "data": {
                        "suite_no": 1,
                        "floor_no": "1",
                        "floor_id": 24,
                        "unique_id": "IST_1405",
                        "tenant_name": "springbord",
                        "tenant_address": "test address",
                        "city": "Arley",
                        "state": "Alabama",
                        "zip_code": 35541,
                        "dba_aka": "test",
                        "business_type__industry__naics_code": "69",
                        "primary_contact": "testcontact",
                        "primary_email": "test@gmdail.com",
                        "primary_phone": "[\"1452125474\"]",
                        "secondary_contact": "testconn",
                        "secondary_email": "test@gmail1.com",
                        "secondary_phone": "[\"2124587856\"]",
                        "user_id": null,
                        "created_at": "2025-06-28T05:15:38.000000Z",
                        "updated_at": "2025-06-28T06:00:36.000000Z",
                        "suite_unit_floor_number": "helloflor",
                        "permitted_use": "office",
                        "lease_start_date": "2025-04-05",
                        "lease_exp_date": "2027-07-15",
                        "rent_commencement_date": "2025-06-29",
                        "total_Lease_term": "2025-08",
                        "renewal_option": "Yes",
                        "no_of_renewals": 150,
                        "renewal_terms": "chumma erunthu ponga",
                        "renewal_date": "2025-06-29",
                        "lease_type": "Modified Gross",
                        "base_year": "2025",
                        "total_leased_sf": "",
                        "total_rentable_sf": "",
                        "total_usable_sf": "",
                        "rent_type": "",
                        "rate_per_sf": "",
                        "monthly_base_rent": "",
                        "annual_base_rent": "150",
                        "asking_rent_in_sf": "",
                        "net_effective_rent_in_sf": "",
                        "market_rate_per_sqft": "",
                        "percentage_rent": "",
                        "prorate_share_in_percentage": "",
                        "rent_concessions": "",
                        "rent_escalation_terms": "",
                        "outstanding_payments_and_arrears": "",
                        "anchor_tenant": "no",
                        "load_factor_percentage": "15",
                        "ti_allowance": "no",
                        "ti_allowance_amount": "",
                        "renewal_probability": "Low",
                        // "tenant_risk_credit_profile": "Low",
                        "tenant_risk": "Low",
                        "credit_profile": "Low",
                        "tenant_satisfaction_rating": "0",
                        "owners": [
                            {
                                "name": "owner 1",
                                "contact_person": "owner person",
                                "email": null,
                                "contact_no": null,
                                "user_id": null
                            }
                        ],
                        "ListingBroker": [
                            {
                                "name": "list brok 1",
                                "contact_person": "list brok person",
                                "email": "list@mail.com",
                                "contact_no": "5421326547"
                            }
                        ],
                        "RepBroker": [
                            {
                                "name": "rep brok 1",
                                "contact_person": "rep brok person",
                                "email": "rep@mail.com",
                                "contact_no": "5421326547"
                            }
                        ]
                    }
                });
                $('#tenant_id').val(tenant_id);
                $('#suite_id').val(suite_id);
            }
        @endif
    </script>
@endsection