@extends('user.layouts.template')

@section('style')
<style>
    /* nav#_dm-customWizardSteps {
    overflow-x: scroll;
    width: 100%;
} */

    div#prevBtn {
        cursor: pointer !important;
    }

    .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;
    }

    button#openModalBtn {
        background: none;
    }

    i.demo-psi-gear.fs-1 {
        font-size: 20px !important;
    }

    /*----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: black !important;
        font-size: 15px;
    }

    .form-control {
        color: black !important;
        font-size: 15px;
    }

    .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: 10px 25px !important;
        margin: 0px 20px !important;
    }

    .tm--expanded-hd .content__header,
    .tm--tall-hd .content__header {


        background-size: cover;
        height: auto !important;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        background-image: linear-gradient(var(--nf-header-bg), transparent),
            url('/user/assets/img/Vector-bg.png') !important;

    }

    table.dataTable th,
    table.dataTable td {
        box-sizing: content-box;
        font-size: 15px;
    }

    /* .tm--expanded-hd .content__header,
      .tm--tall-hd .content__header::before {
         
        background-color: var(--nf-header-bg); 
      } */

    .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: var(--nf-header-bg) !important;
    }

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

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

    .stepform-header {
        position: sticky;
        top: 130px;
        z-index: 999;
        background: rgb(247, 247, 247) !important;
        width: 100%;
        padding: 0px;
        margin: 0px;
        border-radius: 5px;
    }

    #page-tit {
        position: sticky;
        top: 50px;
        z-index: 99999 !important;
        overflow: auto;

    }

    .page-title {
        color: white !important;
    }

    /* .form-content-wizard {
    width: 100%;
    z-index: -1!important;
} */

    .row-div input {
        width: 80%;
    }

    .row-div select {
        width: 80%;
    }

    .row-div textarea {
        width: 80%;
    }

    .form-content-wizard {
        width: 100%;
        padding: 0px 0px 30px 0px;
    }

    /*--Tenant List----*/


    .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(assets/img/Vector-bg.png) !important; */

        background-size: contain;
        background-repeat: no-repeat;
        height: auto;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        background-image: linear-gradient(var(--nf-header-bg), transparent),
            url('/user/assets/img/Vector-bg.png') !important;
    }

    .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: black !important;
        font-size: 15px !important;
    }

    .form-control {
        color: black !important;
        font-size: 15px !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;
    }



    /* .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 {
        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;
    }

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

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

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

    #submitBtn {
        position: relative;
        right: 320px;
    }

    .nav-fill .nav-item .nav-link,
    .nav-justified .nav-item .nav-link {
        width: 100%;
        text-align: justify !important;
    }
</style>

<style>
    #modalWindow {
        position: absolute;
        width: 400px;
        height: 300px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        resize: both;
        min-width: 200px;
        min-height: 150px;
        overflow: hidden;
        cursor: default;
    }

    #modalWindow.fullscreen {
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        margin: 0;
        border-radius: 0;
    }

    .headerone {
        background-color: var(--nf-header-bg);
        color: white;
        padding: 10px;
        display: flex;
        justify-content: end;
        align-items: center;
        cursor: move;
    }

    .controlBtn {
        background: transparent;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
    }

    #modalBody {
        padding: 20px;
        font-size: 14px;
        height: calc(100% - 40px);
        /* Subtract header height */
        overflow: auto;
    }

    /* Minimized style */
    .minimized {
        display: none;
    }

    .modal-content {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        color: #1a1d21b7 !important;
        pointer-events: auto;
        background-color: var(--bs-modal-bg);
        background-clip: padding-box;
        border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
        border-radius: var(--bs-modal-border-radius);
        box-shadow: var(--bs-modal-box-shadow);
        outline: 0;
    }

    .backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        /* black semi-transparent */
        display: none;
        /* hidden by default */
        z-index: 999;
        /* make sure it's behind modal */
    }

    #modalWindow {
        position: fixed;
        z-index: 1000;
        /* above backdrop */
    }

    .mn--min header .header__inner .brand-wrap .logo-sm {
        display: block;
    }

    .mn--max header .header__inner .brand-wrap .logo-sm {
        display: none;
    }

    .mn--max .header__brand {
        padding: 5px;
    }

    .modal-backdrop.fade.show {
        background: transparent !important;
        display: none !important;
    }

    /*---- Suite 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);


    }

    .tab-button {
        background: var(--nf-header-bg);
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
    }

    /* .tab-button.active {
        background: white !important;
        color: var(--nf-header-bg);
    } */

    .tab-button.btn.selected {
        box-shadow: 0 0 0px 4px #ff8d51 !important;
    }

    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;
    }

    table.dataTable {
        text-align: center;
    }
</style>

{{-- my own code --}}
<style>
    .my_select {
        text-align: center;
        width: 500px !important;
        background-color: var(--bs-primary);
        border: white 1px solid;
        color: white !important;
    }

    /* Make option text black */
    .my_select option {
        /* text-align: left; */
        color: black !important;
        background-color: white;
        /* Optional: white background for options */
    }

    .my_select:focus {
        background: var(--bs-primary);
        color: white;
        border: white 1px solid;
    }

    .toggle-btn {
        position: relative;
    }

    .toggle-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
    }

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



    .select-property {
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
        padding: 0px;
        background: var(--nf-mainnav-bg);
        color: var(--bs-heading-color) !important;
        border-radius: 5px;
        position: relative;

    }

    .select-property::before {
        content: "";
        position: absolute;
        top: 23px;
        left: 0;
        width: 5px;
        height: 40%;
        /* 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;
    }
</style>
@endSection

@section('content')
@php
    $permission = Session::get('permission');
@endphp
<div class="content__boxed">
    <div class="content__wrap">

                                        <div id="page-titl" >
                Property Management <i class="ri-arrow-right-s-line"></i> Tenant List
            </div>
        <div class="row">
            <div class="col-12">
                <div class="Select-box py-0 mb-3">
                    <div class="select-property">
                        <div class="page-title-box p-3">
                            <div class="le-tit">
                                <div class="tabs">
                                    <button class="tab-button btn btn-success mx-2 selected" data-tab="tab1">Tenant Wise</button>
                                    <button class="tab-button btn btn-success mx-2" data-tab="tab2">Floor Wise</button>
                                </div>

                            </div>

                            <div class="right-tit d-flex">

                                <!-- <a href="#!" class="btn btn-success mx-2 w-100" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample"><i class="ri-add-circle-fill"></i>
                            Add New Tenant</a> -->

                                @if($permission === 'Admin' || !empty($permission['Property Management']['creat']))
                                    <a href="{{ route('addTenant') }}" class="btn btn-success mx-2 w-100"
                                        style="border: 1px solid white;"><i class="ri-add-circle-fill"></i>
                                        Add New Tenant
                                    </a>
                                @endif
                                <!-- data-bs-toggle="offcanvas" href="#offcanvasExample"
                         role="button" aria-controls="offcanvasExample" -->

                                <!-- <select class="form-select my_select" id="property_select">
                            <option disabled selected>Select a property</option>
                            @if (!empty($property))
                            @foreach ($property as $prop)
                            <option value="{{ $prop->id }}" {{$prop->id == $property_id ? "selected" : ""}}>
                                {{ $prop->name }}
                            </option>
                            @endforeach
                            @endif
                        </select> -->

                                <select id="property_select" class="form-select" style="width:400px;padding:10px;">
                                    <option disabled selected>Select a Property</option>
                                    @if (!empty($property))
                                        @foreach ($property as $prop)
                                            <option value="{{ $prop->id }}" {{$prop->id == $property_id ? "selected" : ""}}>
                                                {{ $prop->name }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>

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

        <div class="card">
            <!-- Custom style form wizard -->
            <div class="align-content-stretch">
                <div class="card-body">
                    <div class="container-fluid">
                        <!-- Start here.... -->
                        <div class="row">
                            <div class="col-md-12 col-xl-12">
                                <div class="card" id="tab-content-pagination">
                                    <div class="card-body">
                                        <div class="row align-items-center justify-content-between">
                                            <div class="col-12">
                                                <div class="tab-content" id="tab1">
                                                    <table id="example" class="display" style="width:100%">
                                                        <thead>
                                                            <tr>
                                                                <th></th> <!-- Toggle column -->
                                                                <th>Tenant Name</th>
                                                                <th>No. of suites</th>
                                                                <th>Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="tenantTableBody">
                                                        </tbody>
                                                    </table>
                                                </div>

                                                <div class="tab-content" id="tab2" style="display:none;">
                                                    <table id="floor-wise" class="display" style="width:100%">
                                                        <thead>
                                                            <tr>
                                                                <th></th> <!-- Toggle column -->
                                                                <th>Floor No.</th>
                                                                <th>No. of Suites</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="floorTableBody">
                                                        </tbody>
                                                    </table>
                                                </div>

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

                                        </div>
                                        <!-- end row-->
                                    </div>
                                    <!-- end card body -->
                                </div>
                                <!-- end card -->
                            </div>
                            <!-- end col -->

                        </div>


                    </div>


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

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

<div class="offcanvas offcanvas-end" tabindex="-1" id="tenant_canvas" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">

        <div class="d-flex justify-content-between w-100 px-3">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Suite <span id="top_suite_no">101</span> - Floor
                <span id="top_floor_number">1</span>
            </h5>
            <h5 class="offcanvas-title" id="property_name">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 id="tenant_name">{{ $data['data']['tenant_name'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>Tenant ID</td>
                                <td id="tenant_id">{{ $data['data']['tenant_id'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>Tenant Address</td>
                                <td id="tenant_address">{{ $data['data']['tenant_address'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>Business Type</td>
                                <td id="business_type">{{ $data['data']['business_type__industry__naics_code'] ?? '-' }}
                                </td>
                            </tr>
                            <tr>
                                <td>Floor Number</td>
                                <td id="floor_number">{{ $data['data']['floor_number'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>Permitted use</td>
                                <td id="permitted_use">{{ $data['data']['permitted_use'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>Lease Start Date</td>
                                <td id="lease_start_date">{{ $data['data']['lease_start_date'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>Lease Expiration Date</td>
                                <td id="lease_exp_date">{{ $data['data']['lease_exp_date'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>Rent commencement date</td>
                                <td id="rent_commencement_date">{{ $data['data']['rent_commencement_date'] ?? '-' }}
                                </td>
                            </tr>
                            <tr>
                                <td>Total Lease Term</td>
                                <td id="total_lease_term">{{ $data['data']['total_Lease_term'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>Renewal Options</td>
                                <td id="renewal_option">{{ $data['data']['renewal_option'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>Renewal Date</td>
                                <td id="renewal_date">{{ $data['data']['renewal_date'] ?? '-' }}</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 id="lease_type">{{ $data['data']['lease_type'] ?? '-' }}</td>
                            </tr>
                            {{-- <tr>
                                <td>Load Factor</td>
                                <td id="load_factor">{{ $data['data']['load_factor_percentage'] ?? '-' }}%</td>
                            </tr> --}}
                            <tr>
                                <td>Listing Broker Company</td>
                                <td id="listing_broker">{{ $data['ListingBroker'][0]['name'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>Anchor Tenant</td>
                                <td id="anchor_tenant">{{ $data['data']['anchor_tenant'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>TI Allowance</td>
                                <td id="ti_allowance">{{ $data['data']['ti_allowance'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>TI Allowance Amount</td>
                                <td id="ti_allowance_amount">{{ $data['data']['ti_allowance_amount'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>Percentage Rent</td>
                                <td id="percentage_rent">{{ $data['data']['percentage_rent'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>Renewal Probability</td>
                                <td id="renewal_probability">{{ $data['data']['renewal_probability'] ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td>Tenant Risk</td>
                                <td id="tenant_risk">
                                    {{ $data['data']['tenant_risk'] ?? '-' }}
                                </td>
                            </tr>
                            <tr>
                                <td>Credit Profile</td>
                                <td id="credit_profile">
                                    {{ $data['data']['credit_profile'] ?? '-' }}
                                </td>
                            </tr>
                            <tr>
                                <td>Tenant Satisfaction Rating</td>
                                <td id="tenant_satisfaction_rating">
                                    {{ $data['data']['tenant_satisfaction_rating'] ?? '-' }}
                                </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
            ]
        });
    });
</script>

<!----Tab section-->
<script>
    $(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');
        });
    });
</script>

<script>
    $(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
            }
        });
    });
</script>

<script>
    const buttons = document.querySelectorAll('.tab-button');

    buttons.forEach(button => {
        button.addEventListener('click', () => {
            buttons.forEach(btn => btn.classList.remove('selected'));
            button.classList.add('selected');
        });
    });
</script>

<style>
    .custom-tooltip {
        position: absolute;
        bottom: 116%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #000000ff;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        white-space: nowrap;
    }

    .custom-tooltip::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0%;
        background-color: #000000ff;
        height: 6px;
        width: 6px;
        left: 50%;
        transform: rotate(45deg)translateX(-50%);
    }
</style>
{{-- my own script --}}
<script>
    function setToolTip() {
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));

        tooltipTriggerList.forEach(function (el) {
            el.addEventListener('mouseenter', function () {
                console.log('git hit')
                const message = el.getAttribute('title');
                if (!message) return;

                // Remove default browser tooltip
                el.setAttribute('data-original-title', message);
                el.removeAttribute('title');

                // Create tooltip
                const tooltip = document.createElement('div');
                tooltip.className = 'custom-tooltip';
                tooltip.innerText = message;

                el.appendChild(tooltip);
                el.classList.add('position-relative');
            });

            el.addEventListener('mouseleave', function () {
                const tooltip = document.querySelector('.custom-tooltip');
                if (tooltip) tooltip.remove();

                // Restore title attribute
                const originalTitle = el.getAttribute('data-original-title');
                if (originalTitle) {
                    el.setAttribute('title', originalTitle);
                    el.removeAttribute('data-original-title');
                }
            });
        });
    }

    function getSuiteData(id) {
        $.post("{{ route('getTenantData') }}", {
            suite_id: id,
            _token: "{{ csrf_token() }}"
        }, function (response) {
            console.log('iam hit !')
            console.log(response)

            if (response.success && response.data && response.data.length !== 0) {
                // Handle the success response
                $('#tenant_name').html(response.data.tenant_name ?? "-");
                $('#tenant_id').html(response.data.unique_id ?? "-");
                $('#tenant_address').html(response.data.tenant_address ?? "-");
                $('#business_type').html(response.data.industry__naics_name ?? "-");
                $('#floor_number').html(response.suite_details.floor_number ?? "-");

                $('#top_floor_number').html(response.suite_details.floor_number ?? "-");
                $('#top_suite_no').html(response.suite_details.suite_no ?? "-");
                $('#property_name').html(response.suite_details.prop_name ?? "-");

                $('#permitted_use').html(response.data.permitted_use ?? "-");
                $('#lease_start_date').html(formatDateString(response.data.lease_start_date ?? "-"));
                $('#lease_exp_date').html(formatDateString(response.data.lease_exp_date ?? "-"));
                $('#rent_commencement_date').html(formatDateString(response.data.rent_commencement_date ?? "-"));
                if (response.data.lease_start_date && response.data.lease_exp_date) {
                    let start_date = new Date(response.data.lease_start_date);
                    let end_date = new Date(response.data.lease_exp_date);

                    if (end_date > start_date) {
                        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);
                        $('#total_lease_term').html(`${diffYears} years ${Math.floor(months)} months`);
                    } else {
                        $('#total_lease_term').html('-');
                    }
                } else {
                    $('#total_lease_term').html('-');
                }
                $('#renewal_option').html(response.data.renewal_option ?? "-");
                $('#renewal_date').html(formatDateString(response.data.renewal_date ?? "-"));
                $('#lease_type').html(response.data.lease_type ?? "-");
                // $('#load_factor').html(response.data.load_factor_percentage);
                let listing_broker = "";
                if (response.data.ListingBroker && response.data.ListingBroker.length > 0) {
                    $('#listing_broker').html(response.data.ListingBroker[0].name ?? "");
                } else {
                    $('#listing_broker').html("");
                }

                $('#anchor_tenant').html(response.data.anchor_tenant ? response.data.anchor_tenant.charAt(0)
                    .toUpperCase() + response.data.anchor_tenant.slice(1) : "");
                $('#ti_allowance').html(response.data.ti_allowance ? response.data.ti_allowance.charAt(0)
                    .toUpperCase() + response.data.ti_allowance.slice(1) : "");
                // $('#ti_allowance').html(response.data.ti_allowance);
                $('#ti_allowance_amount').html(response.data.ti_allowance_amount);
                $('#percentage_rent').html(response.data.percentage_rent && response.data.percentage_rent != "" ?
                    response.data.percentage_rent : "-");
                $('#renewal_probability').html(response.data.renewal_probability ?? "-");
                // $('#tenant_risk_credit_profile').html(response.data.tenant_risk_credit_profile ?? "-");
                $('#tenant_risk').html(response.data.tenant_risk ?? "-");
                $('#credit_profile').html(response.data.credit_profile ?? "-");
                $('#tenant_satisfaction_rating').html(response.data.tenant_satisfaction_rating ?? "-");
                // Show the offcanvas
                var offcanvas = new bootstrap.Offcanvas(document.getElementById('tenant_canvas'));
                offcanvas.show();

            } else {
                Swal.fire("Can't find tenant, please add data to view");
                // Handle the error response
                console.error(response.message);
            }
        });
    }

    $('#example').DataTable();

    $('#property_select').on('change', function () {
        listTenantsAndFloors();
    });

    function toggle_arrow_and_content(event) {
        const button = event.target.closest('button');
        const target = button.getAttribute('data-target');
        const detailsRow = document.querySelector('.' + target);
        const arrow = button.querySelector('i');

        if (detailsRow) {
            if (detailsRow.style.display === 'none' || detailsRow.style.display === '') {
                detailsRow.style.display = 'table-row';
                arrow.className = 'ri-arrow-down-s-line';
            } else {
                detailsRow.style.display = 'none';
                arrow.className = 'ri-arrow-right-s-line';
            }
        }
    }

    // FRONTEND - Fixed JavaScript Code
    function toggleDetails(button) {
        const target = button.getAttribute('data-target');
        const detailsRow = document.querySelector('.' + target);
        const arrow = button.querySelector('i');

        if (detailsRow) {
            if (detailsRow.style.display === 'none' || detailsRow.style.display === '') {
                detailsRow.style.display = 'table-row';
                arrow.className = 'ri-arrow-down-s-line';
            } else {
                detailsRow.style.display = 'none';
                arrow.className = 'ri-arrow-right-s-line';
            }
        }
    }
    $.fn.dataTableExt.sErrMode = 'throw';

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

        $.ajax({
            url: "{{ route('getTenantList') }}",
            method: 'POST',
            data: {
                property_id: $('#property_select').val(),
            },
            headers: {
                'X-CSRF-TOKEN': content,
                'Authorization': 'Bearer {{ session("authentication_token") }}',
            },
            success: function (response) {
                console.log('Full API Response:', response);

                if (response.success && response.data) {
                    // Destroy existing DataTables safely
                    try {
                        if ($.fn.DataTable.isDataTable('#example')) {
                            $('#example').DataTable().clear().destroy();
                        }
                        if ($.fn.DataTable.isDataTable('#floor-wise')) {
                            $('#floor-wise').DataTable().clear().destroy();
                        }
                    } catch (e) {
                        console.log('DataTable destroy error (safe to ignore):', e);
                    }

                    // Handle tenant table
                    let tenantTableData =
                        "<tr><td colspan='4' class='text-center'>No Data Found for this property</td></tr>";

                    if (response.data.suite_table_row && response.data.suite_table_row.trim().length > 0) {
                        tenantTableData = response.data.suite_table_row;
                        console.log('Tenant data found, rows count:', response.data.suite_count || 'unknown');
                    } else {
                        console.log('No tenant data found');
                    }

                    $('#tenantTableBody').html(tenantTableData);

                    // Small delay to ensure DOM is ready
                    setTimeout(function () {
                        try {
                            $('#example').DataTable({
                                "paging": true,
                                "searching": true,
                                "info": true,
                                "order": [
                                    [1, 'asc']
                                ],
                                "columnDefs": [{
                                    "orderable": false,
                                    "targets": [0, 3]
                                } // Disable sorting for toggle and action columns
                                ]
                            });
                            console.log('Tenant DataTable initialized successfully');
                        } catch (e) {
                            console.error('Tenant DataTable initialization failed:', e);
                        }
                    }, 100);

                    // Handle floor table
                    let floorTableData =
                        "<tr><td colspan='3' class='text-center'>No Data Found for this property</td></tr>";

                    if (response.data.floor_table_row && response.data.floor_table_row.trim().length > 0) {
                        floorTableData = response.data.floor_table_row;
                        console.log('Floor data found, rows count:', response.data.floor_count || 'unknown');
                    } else {
                        console.log('No floor data found');
                    }

                    $('#floorTableBody').html(floorTableData);

                    // Small delay to ensure DOM is ready
                    setTimeout(function () {
                        try {
                            $('#floor-wise').DataTable({
                                "paging": true,
                                "searching": true,
                                "info": true,
                                "pageLength": 10,
                                "order": [
                                    [1, 'asc']
                                ],
                                "columnDefs": [{
                                    "orderable": false,
                                    "targets": [0]
                                } // Disable sorting for toggle column
                                ],
                                drawCallback: function (settings) {
                                    setToolTip();
                                }
                            });
                            console.log('Floor DataTable initialized successfully');
                        } catch (e) {
                            console.error('Floor DataTable initialization failed:', e);
                        }
                    }, 100);

                    // Hide all detail panels initially
                    $('.details_panel').hide();

                    // Re-initialize tooltips
                    if (typeof setToolTip === 'function') {
                        setToolTip();
                    }

                } else {
                    console.log('API call succeeded but no data found');
                    Swal.fire("No Tenant Found!");
                }
            },
            error: function (xhr, status, error) {
                console.error('API Error:', {
                    status: status,
                    error: error,
                    responseText: xhr.responseText
                });
                Swal.fire('Failed to load suite data.');
            }
        });
    }

    function toggle_arrow_and_content(event) {
        const tr = $(event.target).closest('tr'); // Get the row <tr>
        const row = $('#example').DataTable().row(tr); // DataTables row object

        const icon = $(event.target).closest('button').find('i');

        if (row.child.isShown()) {
            // Hide child row
            row.child.hide();
            tr.removeClass('shown');
            icon.removeClass('ri-arrow-down-s-line').addClass('ri-arrow-right-s-line');
        } else {
            // Get your suites HTML — fetch or hardcode for now
            const suitesHtml = event.target.dataset.suites; // <- you define this

            row.child(suitesHtml).show();
            tr.addClass('shown');
            icon.removeClass('ri-arrow-right-s-line').addClass('ri-arrow-down-s-line');
        }
    }

    function deleteSuiteData(suite_id) {
        Swal.fire({
            title: 'Warning',
            text: 'Are you sure to delete?',
            icon: 'warning',
            showCancelButton: true,
            customClass: {
                confirmButton: 'btn btn-danger',
                cancelButton: 'btn btn-secondary'
            },
            confirmButtonText: 'Yes'
        }).then((result) => {
            if (result.isConfirmed) {
                const metaDescription = document.querySelector('meta[name="csrf-token"]');
                const content = metaDescription ? metaDescription.getAttribute('content') : null;

                $.ajax({
                    url: "{{ route('deleteTenant') }}",
                    method: 'Delete',
                    data: {
                        suite_id: suite_id,
                    },
                    headers: {
                        'X-CSRF-TOKEN': content,
                        'Authorization': 'Bearer {{ session("authentication_token") }}',
                    },
                    success: function (response) {
                        console.log('Full API Response:', response);

                        if (response.message) {
                            console.log(response.message);
                            Swal.fire(response.message);
                        } else {
                            Swal.fire("Can't delete tenant data");
                        }
                        listTenantsAndFloors();
                    },
                    error: function (xhr, status, error) {
                        listTenantsAndFloors();
                        console.error('API Error:', {
                            status: status,
                            error: error,
                            responseText: xhr.responseText
                        });
                        Swal.fire('Failed to load suite data.');
                    }
                });
            }
        });
    }


</script>
<style>
    .custom_notification {
        display: none;
    }
</style>
@endSection