@extends('user.layouts.template')

@section('style')
    <style>
        /*------New Css for User Dashboard-----*/

        .dataTables_wrapper {
            overflow: auto;
        }

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

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

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

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

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


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

        .sidebar-icons {
            width: 40px;
        }

        .mainnav__inner .mainnav__menu .nav-link {
            padding: 3px 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;
        }

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

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

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




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

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



        /*----End New Css for User DASHBOARD---*/
    </style>

    <style>
        #swal2-input{
            display: none !important;
        }
    </style>
@endsection

@section('content')
    @php
        $permission = session()->get('permissions');
    @endphp
    <!-- Content Start -->
    <div class="content__boxed">
        <div class="content__wrap">


            <div class="row">
                <div class="col-12">
                    <div class="page-title-box align-items-center">
                                        <div id="page-titl" style="margin-bottom: 0;">
                Property Management <i class="ri-arrow-right-s-line"></i> Property <i class="ri-arrow-right-s-line"></i> List Property
            </div>
            @if ($permission === 'Admin' || $permission['Property Management']['creat'])
            @if (!empty($can_create_property))
                                <div class="right-tit d-flex">
                                    <a class="btn btn-success mx-2 w-100" style="border:1px solid white;"
                                        href="{{ route('propertyCreate') }}"><i class="ri-add-circle-fill"></i>
                                        Add New Property
                                    </a>
                                </div>
                        @else
                            <div class="right-tit d-flex">
                                <button class="btn btn-success mx-2 w-100" style="border:1px solid white;"
                                    onclick="Swal.fire('You\'ve reached your property creation limit.')"><i
                                        class="ri-add-circle-fill"></i>
                                    Add New Property
                                </button>
                            </div>
                        @endif
                        @endif
                    </div>
                </div>
            </div>

            <div class="card p-2">
                <div class="errorresponse"></div>
                @php
                    function formatIfNumber($value)
                    {
                        if ($value === null || $value === '' || !isset($value)) {
                            return '0';
                        }
                        if (is_numeric($value)) {
                            return number_format(floor($value), 0, '.', ',');
                        }
                        return $value;
                    }
                @endphp

                <table id="property-list" class="display" style="width:100%">
                    <thead>
                        <tr>

                            <th>Property Name</th>
                            <th>City</th>
                            <th>State</th>
                            <th>Property Type</th>
                            <th>Total Floors </th>
                            <th>Total RSF</th>
                            <th>Occupancy %</th>
                            <th>Vacant SF</th>
                            <th>Expiration < 12 Months</th>
                            <th>Stacking Plan</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>

                        @foreach($properties as $property)
                            <tr>
                                <td>{{ $property->name }}</td>
                                <td>{{ $property->city }}</td>
                                <td>{{ $property->state }}</td>
                                <td>{{ $property->type }}</td>
                                <td>{{ $property->no_of_floors ?? '0' }}</td>
                                <td>{{ !empty($property->rentable_sf) ? formatIfNumber($property->rentable_sf) : '-' }}</td>
                                <td>{{ round($property->occupancy_rate) ?? '0' }}%</td>
                                <td>{{ !empty($property->vacant_sf) ? formatIfNumber($property->vacant_sf) : '-' }}</td>
                                <td>{{ !empty($property->lease_expirations) ? $property->lease_expirations : '-' }}</td>
                                <td><a href="{{ route('stackingPlan') }}?property_id={{ $property->id }}"
                                        data-bs-toggle="tooltip" title="View Stacking Plan" data-bs-placement="left"
                                        class="btn btn-success"><i class="ri-eye-fill"></i></a></td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <a href="{{ route('propertyView', ['property_id' => $property->id]) }}"
                                            class="btn btn-success mx-1" data-bs-toggle="tooltip" title="View"
                                            data-bs-placement="top">
                                            <i class="ri-eye-fill"></i>
                                        </a>
                                        @if ($permission === 'Admin' || $permission['Property Management']['edit'])
                                            <a href="{{ route('propertyCreate', ['property_id' => $property->id]) }}"
                                                class="btn btn-success mx-1" data-bs-toggle="tooltip" title="Edit"
                                                data-bs-placement="top">
                                                <i class="ri-pencil-fill"></i>
                                            </a>
                                        @endif
                                        @if ($permission === 'Admin' || $permission['Property Management']['delet'])
                                            <a href="#" class="btn btn-success mx-1 delete" data-bs-toggle="tooltip" title="Delete"
                                                data-bs-placement="top" data-id="{{ $property->id }}"> <i
                                                    class="ri-delete-bin-fill"></i>
                                            </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Content End -->
@endsection

<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>
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function () {

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

            var myTable = $('#property-list').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
                ]
            });

            var allPages = myTable.rows().nodes().to$();



            // $('.delete').on('click', function () {
            $(document).on('click', '.delete', function () {
                Swal.fire({
                    title: 'Warning',
                    text: 'Are you sure to delete?',
                    icon: 'warning',
                    input: 'text',
                    inputPlaceholder: 'Type here...',
                    showCancelButton: true,
                    customClass: {
                        confirmButton: 'btn btn-danger',
                        cancelButton: 'btn btn-secondary'
                    },
                    confirmButtonText: 'Yes'
                }).then((result) => {
                    if (result.isConfirmed) {
                        let id = $(this).data('id');
                        let inputValue = result.value;
                        let editUrl1 = '{{ route("properties.destroy", ["__id__", "__input__"]) }}';
                        let editUrl = editUrl1.replace("__id__", id).replace("__input__", "input=" + inputValue);

                        $.ajax({
                            url: editUrl,
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'Authorization': 'Bearer {{ session("authentication_token") }}',
                                //'Accept': 'application/json',
                            },
                            data: { 'reason': inputValue },
                            success: function (response) {
                                Swal.fire('Deleted Successfully');
                                location.reload();
                            },
                            error: function (xhr) {
                                $('.errorresponse').html('<p style="color:red;">Error: ' + xhr.responseText + '</p>')
                            }
                        });
                    }
                });
            });

            @php
                if (session()->has("property_limit_hit")) {
                    echo "Swal.fire('You\'ve reached your property creation limit.')";
                }
            @endphp
        });
    </script>
    <script>
    @if (session('error'))
        Swal.fire({
            title: 'Access Denied',
            text: '{{ session("error") }}',
            icon: 'error',
            customClass: {
                confirmButton: 'btn btn-danger'
            },
            confirmButtonText: 'OK'
        });
    @endif
    <style>
        .custom_notification {
            display: none;
        }
        </style>
@endsection