@extends('layout.master')
@section('content')
    @php
        $userType = \App\Helpers\Helpers::getUserRole()->type_id ?? [];

        $userAccess = \App\Helpers\Helpers::getUserAccess() ?? [];
        $access = $userAccess['accesses'] ?? [];

        $current_url = Request::path();
        if ($current_url != '/') {
            $urlParts = explode('/', $current_url);
            $current_url = $urlParts[0];
        }

        $tab_names = [
            1 => 'Overview',
            2 => 'Estate Details',
            3 => 'Residents',
            4 => 'Visitors',
            5 => 'Staffs',
        ];
    @endphp
    @if (!empty($estate_details) && !empty($tab))
        <div class="page-heading-block py-4">
            <div class="page-title-block d-flex align-items-center justify-content-between">
                <input type="hidden" id="user_type" value="{{ $userType }}">
                {{-- <div class="d-flex align-items-center justify-content-between">
                    @if ($userType == 1 || $userType == 2)
                        <a href="{{ route('estates.get') }}" class="back-btn">
                            &#x276e; &nbsp;BACK
                        </a>
                    @endif

                    <h4 class="{{ $userType == 1 || $userType == 2 ? 'mx-5' : '' }} mb-0 font-weight-bold">
                        {{ $estate_details->name ?? '' }}</h4>
                </div> --}}
                <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        @if ($userType != 3 && $userType != 4)
                            <li class="breadcrumb-item"><a href="{{ route('estates.get') }}">Estates</a></li>
                        @endif
                        <li class="breadcrumb-item{{ empty($tab) ? 'active' : '' }}"
                            aria-current="{{ empty($tab) ? 'page' : '' }}">
                            <a href="{{ route('estates.view', ['id' => $estate_details->id]) }}">
                                {{ $estate_details->name ?? '' }}
                            </a>
                        </li>
                        @if (!empty($tab))
                            <li class="breadcrumb-item active" aria-current="page">{{ $tab_names[$tab] }}</li>
                        @endif
                    </ol>
                </nav>

                <div class="d-flex">
                    <a href="{{ route('residents.add', ['id' => $estate_details->id, 'menu' => 'estates']) }}"
                        class="btn add-btn mx-3 {{ !empty($userType) ? ($userType == 1 || $userType == 3 || ($userType == 2 && (!empty($access['estate.residences']) && in_array(1, $access['estate.residences']))) ? '' : 'hide') : 'hide' }}"
                        id="add_residence_btn">+ Add Resident</a>
                    <a href="{{ route('visitors.add', ['id' => $estate_details->id, 'menu' => 'estates']) }}"
                        class="btn add-btn mx-3 {{ !empty($userType) ? ($userType == 1 || $userType == 3 || $userType == 4 || ($userType == 2 && (!empty($access['estate.visitors']) && in_array(1, $access['estate.visitors']))) ? '' : 'hide') : 'hide' }}"
                        id="add_visitor_btn">+ Add Visitor</a>
                    <a href="{{ route('users.add', ['id' => $estate_details->id, 'menu' => 'estates']) }}"
                        class="btn add-btn mx-3 {{ !empty($userType) ? ($userType == 1 || ($userType == 2 && (!empty($access['estate.staffs']) && in_array(1, $access['estate.staffs']))) ? '' : 'hide') : 'hide' }}"
                        id="add_staff_btn">+ Add Staff</a>
                    {{-- <button class="btn more-btn mx-3 d-flex justify-content-center align-items-center" id="">More
                        &nbsp;
                        <svg xmlns="http://www.w3.org/2000/svg" width="10.86" height="5.72" viewBox="0 0 10.86 5.72">
                            <g id="arrow-down" transform="translate(-6.593 -15.569)">
                                <path id="Path_299" data-name="Path 299"
                                    d="M16.7,15.7l-4.677,4.559L7.346,15.7a.447.447,0,0,0-.625,0,.426.426,0,0,0,0,.608L11.7,21.156a.468.468,0,0,0,.653,0l4.975-4.85a.426.426,0,0,0,0-.61.447.447,0,0,0-.625,0Z"
                                    transform="translate(0 0)" fill="#6A7594" />
                            </g>
                        </svg>
                    </button> --}}
                </div>
            </div>
        </div>

        <div class="page-main-content">
            <div class="tab-links-section">
                <ul class="nav nav-tabs border-0 ">
                    <li class="nav-item">
                        <a href="{{ route('estates.view', ['id' => $estate_details->id, 'tab' => 1]) }}"
                            class="nav-link mx-2 py-2 px-4 rounded-top tab-links {{ !empty($tab) && $tab == 1 ? 'active' : '' }}">Overview</a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ route('estates.view', ['id' => $estate_details->id, 'tab' => 2]) }}"
                            class="nav-link mx-2 py-2 px-4 rounded-top tab-links {{ !empty($tab) && $tab == 2 ? 'active' : '' }} {{ !empty($userType) && ($userType == 2 && (empty($access['estate']) || !in_array(2, $access['estate']))) ? 'hide' : '' }}">Estate
                            Details</a>
                    </li>
                    {{-- @if (!empty($userType) && ($userType == 1 || $userType == 3 || ($userType == 2 && (!empty($access['estate.staffs']) && in_array(2, $access['estate.staffs']))))) --}}
                    <li class="nav-item">
                        <a href="{{ route('estates.view', ['id' => $estate_details->id, 'tab' => 3]) }}"
                            class="nav-link mx-2 py-2 px-4 rounded-top tab-links {{ !empty($tab) && $tab == 3 ? 'active' : '' }} {{ !empty($userType) && ($userType == 2 && (empty($access['estate.residences']) || !in_array(2, $access['estate.residences']))) ? 'hide' : '' }}">Residents</a>
                    </li>
                    {{-- @endif --}}
                    <li class="nav-item">
                        <a href="{{ route('estates.view', ['id' => $estate_details->id, 'tab' => 4]) }}"
                            class="nav-link mx-2 py-2 px-4 rounded-top tab-links {{ !empty($tab) && $tab == 4 ? 'active' : '' }} {{ !empty($userType) && ($userType == 2 && (empty($access['estate.visitors']) || !in_array(2, $access['estate.visitors']))) ? 'hide' : '' }}">Visitors</a>
                    </li>
                    @if (
                        !empty($userType) &&
                            ($userType == 1 ||
                                ($userType == 2 && (!empty($access['estate.staffs']) && in_array(2, $access['estate.staffs'])))))
                        <li class="nav-item">
                            <a href="{{ route('estates.view', ['id' => $estate_details->id, 'tab' => 5]) }}"
                                class="nav-link mx-2 py-2 px-4 rounded-top tab-links {{ !empty($tab) && $tab == 5 ? 'active' : '' }}">Staffs</a>
                        </li>
                    @endif

                </ul>
            </div>

            <input type="hidden" name="" id="estate_id" value="{{ $estate_details->id }}">
            @if (!empty($tab) && $tab == 1)
                <div class="overview-block tab-blocks" id="overview">
                    <div class="count-badges-section d-flex my-4 gap-sm-1 gap-md-2 gap-lg-3 gap-xl-4 w-100 ">
                        <div class="count-badge p-4 d-flex align-items-center justify-content-between ">
                            <span class="residents-badge-text w-50">Residents</span>
                            <span
                                class="residents-badge-count rounded-circle text-center">{{ $residents_count ?? 0 }}</span>
                        </div>
                        <div class="count-badge p-4 d-flex align-items-center justify-content-between ">
                            <span class="visitor-badge-text w-50">Visitors Today</span>
                            <span class="visitor-badge-count rounded-circle text-center">{{ $visitors_count ?? 0 }}</span>
                        </div>
                        <div class="count-badge p-4 d-flex align-items-center justify-content-between ">
                            <span class="alert-badge-text w-50">Alerts</span>
                            <span class="alert-badge-count rounded-circle text-center">{{ $alerts_count ?? 0 }}</span>
                        </div>
                    </div>

                    <div class="gate-operation-block d-flex gap-3 my-4">
                        {{-- <div class="entrance-gate-actions d-grid justify-content-center align-items-center">
                            <a>
                                <img src="{{ asset('assets/images/open-gate.jpg') }}" alt="" class="rounded"
                                    style="max-width:100%">
                            </a>
                        </div> --}}
                        <div class="entrance-gate-view p-2">
                            @if (!empty($vehicle_entry_image) && !empty($vehicle_entry_image->public_url))
                                <a href="{{ $vehicle_entry_image->public_url }}" class="popup-link">
                                    <img src="{{ $vehicle_entry_image->public_url }}" alt="plate image" width="400"
                                        height="200" style="max-width:100%">
                                </a>
                            @else
                                <img src="{{ asset('assets/images/video-placeholder.jpg') }}" alt="" width="400"
                                    height="200" style="max-width:100%">
                            @endif

                            <p class="text-center m-0 rounded-bottom p-3">Entrance</p>
                        </div>
                        <div class="exit-gate-view p-2">
                            @if (!empty($vehicle_exit_image) && !empty($vehicle_exit_image->public_url))
                                <a href="{{ $vehicle_exit_image->public_url }}" class="popup-link">
                                    <img src="{{ $vehicle_exit_image->public_url }}" alt="plate image" width="400"
                                        height="200" style="max-width:100%">
                                </a>
                            @else
                                <img src="{{ asset('assets/images/video-placeholder.jpg') }}" alt="" width="400"
                                    height="200" style="max-width:100%">
                            @endif
                            <p class="text-center m-0 rounded-bottom p-3">Exit</p>
                        </div>
                        {{-- <div class="exit-gate-actions d-grid justify-content-center align-items-center">
                            <a>
                                <img src="{{ asset('assets/images/open-gate.jpg') }}" alt="" class="rounded"
                                    style="max-width:100%">
                            </a>
                        </div> --}}
                    </div>

                    {{-- <div class="gate-operation-block d-flex flex-wrap justify-content-center gap-3 my-4">
                    <div class="entrance-gate-actions d-grid justify-content-center align-items-center py-4">
                        <a href="" class="mb-2">
                            <img src="{{ asset('assets/images/open-gate.jpg') }}" alt="" class="rounded">
                        </a>
                        <a href="">
                            <img src="{{ asset('assets/images/close-gate.jpg') }}" alt="" class="rounded">
                        </a>
                    </div>
                    <div class="entrance-gate-view p-2">
                        <img src="{{ asset('assets/images/video-placeholder.jpg') }}" alt="" width="100%" height="auto">
                        <p class="text-center m-0 rounded-bottom p-3">Entrance</p>
                    </div>
                    <div class="exit-gate-view p-2">
                        <img src="{{ asset('assets/images/video-placeholder.jpg') }}" alt="" width="100%" height="auto">
                        <p class="text-center m-0 rounded-bottom p-3">Exit</p>
                    </div>
                    <div class="exit-gate-actions d-grid justify-content-center align-items-center py-4">
                        <a href="" class="mb-2">
                            <img src="{{ asset('assets/images/open-gate.jpg') }}" alt="" class="rounded">
                        </a>
                        <a href="">
                            <img src="{{ asset('assets/images/close-gate.jpg') }}" alt="" class="rounded">
                        </a>
                    </div>
                </div> --}}

                    <div>
                        <div class="table-links-section">
                            <ul class="nav nav-tabs">
                                <li class="nav-item">
                                    <a class="nav-link mx-2 py-2 px-4 rounded-top table-links active"
                                        data-name="vehical-entry" aria-current="page" href="javascript:void(0)">Vehicle
                                        Entry</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link mx-2 py-2 px-4 rounded-top table-links " data-name="vehical-exit"
                                        href="javascript:void(0)">Vehicle Exit</a>
                                </li>
                            </ul>
                        </div>
                        <div class="vehicle-info-block vehical-entry-block p-3">
                            <div id="vehical-entry" class="vehical-table-block">
                                <div class="vehical-search-section d-flex justify-content-between align-items-center my-4">
                                    <h4>Vehicle Entry Information(Last 24 Hrs)</h4>
                                    <div class="d-flex">
                                        <input type="text" placeholder="Search Vehicle"
                                            class="search mx-3 vehicle_entry_search">
                                        {{-- <button class="btn filter_btn">
                                            <img src="{{ asset('assets/images/icons/filter.png') }}" alt="">
                                        </button> --}}
                                    </div>
                                </div>
                                <table class="table vehicle-info-table" id="vehicle-entry-table" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="p-3">Entry Date/Time</th>
                                            <th scope="col" class="p-3">Vehicle License</th>
                                            <th scope="col" class="p-3">Name</th>
                                            <th scope="col" class="p-3">Mobile</th>
                                            <th scope="col" class="p-3">Visiting Unit</th>
                                            <th scope="col" class="p-3">License Plate Image</th>
                                        </tr>
                                    </thead>
                                    <tbody>

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

                            <div id="vehical-exit" class="vehical-table-block hide">
                                <div class="vehical-search-section d-flex justify-content-between align-items-center my-4">
                                    <h4>Vehicle Exit Information (Last 24 Hrs)</h4>
                                    <div class="d-flex">
                                        <input type="text" placeholder="Search Vehicle"
                                            class="search mx-3 vehicle_exit_search">
                                    </div>
                                </div>
                                <div class=" table-responsive">
                                    <table class="table vehicle-info-table" id="vehicle-exit-table" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th scope="col" class="p-3">Exit Date/Time</th>
                                                <th scope="col" class="p-3">Vehicle License</th>
                                                <th scope="col" class="p-3">Name</th>
                                                <th scope="col" class="p-3">Mobile</th>
                                                <th scope="col" class="p-3">Visiting Unit</th>
                                                <th scope="col" class="p-3">License Plate Image
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @elseif (!empty($tab) && $tab == 2)
                <div class="estate-details-block tab-blocks d-flex justify-content-between  rounded p-4 my-4 d-flex gap-4"
                    id="estate_details">
                    <div class="d-flex gap-4">
                        <div class="estate-image-section">
                            <img src="{{ !empty($estate_details->public_url) ? $estate_details->public_url : asset('assets/images/icons/blank-image.svg') }}"
                                alt="" class="rounded" width="240" height="240">
                        </div>
                        <div class="estate-details-section p-2">
                            <h3 class="mb-3">{{ $estate_details->name ?? '-' }}</h3>
                            <p class="mb-3">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="19.157" height="25.411"
                                        viewBox="0 0 19.157 25.411">
                                        <g id="map-marker" transform="translate(-5.906)">
                                            <path id="Path_3202" data-name="Path 3202"
                                                d="M15.485,0A9.579,9.579,0,0,0,5.906,9.579a8.22,8.22,0,0,0,1.34,4.913l8.239,10.919,8.239-10.919a9.022,9.022,0,0,0,1.34-4.913A9.579,9.579,0,0,0,15.485,0Zm0,5.548a4.031,4.031,0,1,1-4.031,4.031A4.031,4.031,0,0,1,15.485,5.548Z"
                                                fill="#0d2e89" />
                                        </g>
                                    </svg>
                                </span>
                                {{ $estate_details->address_line_one ?? '' }}
                                {{ $estate_details->address_line_two ?? '' }}
                            </p>
                            <p class="mb-3">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="21.419" height="21.42"
                                        viewBox="0 0 21.419 21.42">
                                        <g id="call-sharp" transform="translate(-3 -3.001)">
                                            <path id="Path_3203" data-name="Path 3203"
                                                d="M24.369,19.168a16.573,16.573,0,0,0-2.751-2.092,32.275,32.275,0,0,0-3.18-1.856.183.183,0,0,0-.187.023c-.556.434-1.492,1.23-1.542,1.273-.324.278-.324.278-.59.191a10.109,10.109,0,0,1-3.18-2.189A10.556,10.556,0,0,1,10.714,11.3c-.087-.266-.087-.266.191-.59.043-.05.84-.986,1.274-1.542a.183.183,0,0,0,.023-.187A32.216,32.216,0,0,0,10.346,5.8a16.659,16.659,0,0,0-2.092-2.75.186.186,0,0,0-.186-.042A15.413,15.413,0,0,0,5.391,4.227,16.16,16.16,0,0,0,3.065,5.869.183.183,0,0,0,3,6.048a19.84,19.84,0,0,0,2.06,5.1,23.98,23.98,0,0,0,4.781,6.37,24.691,24.691,0,0,0,6.425,4.837,19.8,19.8,0,0,0,5.1,2.059.185.185,0,0,0,.179-.06,16.147,16.147,0,0,0,1.642-2.326,15.429,15.429,0,0,0,1.217-2.677.186.186,0,0,0-.041-.185Z"
                                                transform="translate(0)" fill="#0d2e89" />
                                        </g>
                                    </svg>
                                </span>
                                {{ $estate_details->contact_number ?? '-' }}
                            </p>
                            <p class="mb-3">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="21.419" height="16.065"
                                        viewBox="0 0 21.419 16.065">
                                        <g id="emailalt" transform="translate(-0.023)">
                                            <path id="Path_3204" data-name="Path 3204"
                                                d="M10.733,8.032.023,2.615V1.339a1.276,1.276,0,0,1,.4-.952A1.3,1.3,0,0,1,1.362,0H20.1a1.3,1.3,0,0,1,.941.387,1.276,1.276,0,0,1,.4.952V2.615Zm-.669,1.339H11.4l10.04-5.208V14.726A1.357,1.357,0,0,1,20.1,16.065H1.362a1.287,1.287,0,0,1-.941-.4,1.287,1.287,0,0,1-.4-.941V4.163Z"
                                                fill="#0d2e89" />
                                        </g>
                                    </svg>
                                </span>
                                {{ $estate_details->email ?? '-' }}
                            </p>
                        </div>
                    </div>
                    <div
                        class="{{ !empty($userType) ? ($userType == 1 || ($userType == 2 && (!empty($access['estate']) && in_array(3, $access['estate']))) ? '' : 'hide') : 'hide' }}">
                        <a href="{{ route('estates.edit', ['id' => $estate_details->id, 'menu' => 'estates']) }}"
                            class="btn small-btn">Edit</a>
                    </div>
                </div>
            @elseif (!empty($tab) && $tab == 3)
                <div class="residences-details-block tab-blocks rounded p-1 my-4" id="residences">

                    {{-- @php
                        $view = !empty($userType)
                            ? ($userType == 1 ||
                            ($userType == 2 &&
                                (!empty($access['estate.residences']) && in_array(2, $access['estate.residences'])))
                                ? ''
                                : 'hide')
                            : 'hide';
                        $edit = !empty($userType)
                            ? ($userType == 1 ||
                            ($userType == 2 &&
                                (!empty($access['estate.residences']) && in_array(3, $access['estate.residences'])))
                                ? ''
                                : 'hide')
                            : 'hide';
                        $delete = !empty($userType)
                            ? ($userType == 1 ||
                            ($userType == 2 &&
                                (!empty($access['estate.residences']) && in_array(4, $access['estate.residences'])))
                                ? ''
                                : 'hide')
                            : 'hide';
                    @endphp --}}


                    @php
                        $view = !empty($userType)
                            ? ($userType == 2 &&
                            (empty($access['estate.residences']) || !in_array(2, $access['estate.residences']))
                                ? 'hide'
                                : '')
                            : 'hide';
                        $edit = !empty($userType)
                            ? ($userType == 4 ||
                            ($userType == 2 &&
                                (empty($access['estate.residences']) || !in_array(3, $access['estate.residences'])))
                                ? 'hide'
                                : '')
                            : 'hide';
                        $delete = !empty($userType)
                            ? ($userType == 4 ||
                            ($userType == 2 &&
                                (empty($access['estate.residences']) || !in_array(4, $access['estate.residences'])))
                                ? 'hide'
                                : '')
                            : 'hide';
                    @endphp
                    @include('residences.table')
                </div>
            @elseif (!empty($tab) && $tab == 4)
                <div class="visitors-details-block tab-blocks rounded p-1 my-4" id="visitors">
                    {{-- @php
                    $view = !empty($userType)
                        ? ($userType == 1 ||
                        ($userType == 2 &&
                            (!empty($access['estate.visitors']) && in_array(2, $access['estate.visitors'])))
                            ? ''
                            : 'hide')
                        : 'hide';
                    $edit = !empty($userType)
                        ? ($userType == 1 ||
                        ($userType == 2 &&
                            (!empty($access['estate.visitors']) && in_array(3, $access['estate.visitors'])))
                            ? ''
                            : 'hide')
                        : 'hide';
                    $delete = !empty($userType)
                        ? ($userType == 1 ||
                        ($userType == 2 &&
                            (!empty($access['estate.visitors']) && in_array(4, $access['estate.visitors'])))
                            ? ''
                            : 'hide')
                        : 'hide';
                @endphp --}}

                    @php
                        $view = !empty($userType)
                            ? ($userType == 2 &&
                            (empty($access['estate.visitors']) || !in_array(2, $access['estate.visitors']))
                                ? 'hide'
                                : '')
                            : 'hide';
                        $edit = !empty($userType)
                            ? ($userType == 2 &&
                            (empty($access['estate.visitors']) || !in_array(3, $access['estate.visitors']))
                                ? 'hide'
                                : '')
                            : 'hide';
                        $delete = !empty($userType)
                            ? ($userType == 2 &&
                            (empty($access['estate.visitors']) || !in_array(4, $access['estate.visitors']))
                                ? 'hide'
                                : '')
                            : 'hide';
                    @endphp
                    @include('visitors.table')
                </div>
            @elseif (!empty($tab) && $tab == 5)
                <div class="staffs-details-block tab-blocks rounded p-1 my-4" id="staffs">
                    <div class="staffs-info-block p-3">
                        <div class="staffs-search-section d-flex justify-content-end align-items-center mb-4">
                            {{-- <div class="d-flex">
                                <button class="btn bulk-action-btn d-flex justify-content-center align-items-center"
                                    id="">Bulk Action
                                    &nbsp;
                                    <svg xmlns="http://www.w3.org/2000/svg" width="10.86" height="5.72"
                                        viewBox="0 0 10.86 5.72">
                                        <g id="arrow-down" transform="translate(-6.593 -15.569)">
                                            <path id="Path_299" data-name="Path 299"
                                                d="M16.7,15.7l-4.677,4.559L7.346,15.7a.447.447,0,0,0-.625,0,.426.426,0,0,0,0,.608L11.7,21.156a.468.468,0,0,0,.653,0l4.975-4.85a.426.426,0,0,0,0-.61.447.447,0,0,0-.625,0Z"
                                                transform="translate(0 0)" fill="#6A7594" />
                                        </g>
                                    </svg>
                                </button>
                                <button class="btn mx-3 apply-btn">
                                    Apply
                                </button>
                            </div> --}}
                            <div class="d-flex">
                                <input type="text" placeholder="Search Staff" class="search mx-3 search_staff">
                                {{-- <button class="btn filter_btn">
                                    <img src="{{ asset('assets/images/icons/filter.png') }}" alt="">
                                </button> --}}
                            </div>
                        </div>
                        <table class="table" id="staffs-info-table" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th scope="col" class="align-middle">
                                        Sl No.
                                    </th>
                                    <th scope="col" class="align-middle">Name</th>
                                    <th scope="col" class="align-middle">Role</th>
                                    <th scope="col" class="align-middle">Email</th>
                                    <th scope="col" class="align-middle">Phone</th>
                                    <th scope="col" class="align-middle">Status</th>
                                    <th scope="col" class="align-middle">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (!empty($staffs_list) && count($staffs_list) > 0)
                                    @foreach ($staffs_list as $staff)
                                        <tr>
                                            <td class="align-middle">{{ str_pad($loop->index + 1, 3, '0', STR_PAD_LEFT) }}
                                            </td>
                                            <td class="align-middle">{{ $staff->full_name }}</td>
                                            <td class="align-middle">
                                                {{ !empty($staff->user_role) ? $staff->user_role : (!empty($staff->user_type) ? $staff->user_type : '-') }}
                                            </td>
                                            <td class="align-middle">{{ $staff->email ?? '-' }}</td>
                                            <td class="align-middle">{{ $staff->contact_number ?? '-' }}</td>
                                            <td class="align-middle">{{ $staff->is_blocked == 1 ? 'Inactive' : 'Active' }}
                                            </td>
                                            <td class="align-middle">
                                                <div class="dropdown">
                                                    <button class="btn table-action-btn" onclick="toggleDropdown(this)">
                                                        <img src="{{ asset('assets/images/icons/menu_vertical.svg') }}"
                                                            alt="" width="25" height="25">
                                                    </button>
                                                    <div class="dropdown-menu" style="display: none;">
                                                        <a class="dropdown-item action-links {{ !empty($userType) ? ($userType == 1 || ($userType == 2 && (!empty($access['estate.staffs']) && in_array(3, $access['estate.staffs']))) ? '' : 'hide') : 'hide' }}"
                                                            href="{{ route('users.edit', ['id' => $staff->user_id, 'menu' => 'estates']) }}"><img
                                                                src="{{ asset('assets/images/icons/edit.svg') }}"
                                                                alt="">&nbsp;Edit</a>
                                                        <a class="dropdown-item action-links {{ !empty($userType) ? ($userType == 1 || ($userType == 2 && (!empty($access['estate.staffs']) && in_array(4, $access['estate.staffs']))) ? '' : 'hide') : 'hide' }}"
                                                            href="{{ route('users.delete', ['id' => $staff->user_id, 'menu' => 'estates']) }}"
                                                            onclick="return deleteConfirmation(event);">
                                                            <img src="{{ asset('assets/images/icons/delete.svg') }}"
                                                                alt="">&nbsp;Delete
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                    {{-- @else
                                    <tr>
                                        <td class="text-center" colspan="7">
                                            No records found
                                        </td>
                                    </tr> --}}
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>
    @else
        <div class=" d-flex justify-content-center align-items-center pt-5">
            <p>No records found</p>
        </div>
    @endif

    {{-- filter model for residence --}}
    <div class="modal fade" id="residencefilter" tabindex="-1" aria-labelledby="residencefilterLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="residencefilterLabel">Filter Residents</h5>
                    {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                </div>
                <div class="modal-body">
                    <label for="filter_resident" class="form-label">Name</label>
                    <select name="filter_resident" id="filter_resident" class="form-control form-select rounded">
                        <option value="">Select Resident</option>
                        @if (!empty($residents_name_list) && count($residents_name_list) > 0)
                            @foreach ($residents_name_list as $resident)
                                <option value="{{ $resident->value }}"
                                    {{ !empty($filter_resident_id) && $resident->value == $filter_resident_id ? 'selected' : '' }}>
                                    {{ $resident->label }}</option>
                            @endforeach
                        @endif
                    </select>

                    <label for="filter_model" class="form-label mt-2">Vehicle Make/Model</label>
                    <select name="filter_model" id="filter_model" class="form-control form-select rounded">
                        <option value="">Select Make/Model</option>
                        @if (!empty($residents_vehicle_model_list) && count($residents_vehicle_model_list) > 0)
                            @foreach ($residents_vehicle_model_list as $vehicle_model)
                                <option value="{{ $vehicle_model->model }}"
                                    {{ !empty($filter_model) && $vehicle_model->model == $filter_model ? 'selected' : '' }}>
                                    {{ $vehicle_model->model }}</option>
                            @endforeach
                        @endif
                    </select>
                    <div class="w-100 d-flex gap-2 mt-2">

                        <input type="hidden" name="" id="selected_resident_unit_no"
                            value="{{ $filter_resident_unit_id ?? '' }}">

                        <input type="hidden" name="" id="selected_resident_blk_no"
                            value="{{ $filter_resident_blk_id ?? '' }}">

                        <div class="w-50">
                            <label for="filter_resident_blk_no" class="form-label">Blk No.</label>
                            <select name="filter_resident_blk_no" id="filter_resident_blk_no"
                                class="form-control form-select rounded">
                                <option value="">Select Blk No</option>
                                {{-- @if (!empty($residents_blk_no_list) && count($residents_blk_no_list) > 0)
                                    @foreach ($residents_blk_no_list as $resident_blk_no)
                                        <option value="{{ $resident_blk_no->block_number }}"
                                            {{ !empty($filter_resident_blk_no) && $resident_blk_no->block_number == $filter_resident_blk_no ? 'selected' : '' }}>
                                            {{ $resident_blk_no->block_number }}</option>
                                    @endforeach
                                @endif --}}
                            </select>
                        </div>

                        <div class="w-50">
                            <label for="filter_resident_unit_no" class="form-label">Unit No.</label>
                            <select name="filter_resident_unit_no" id="filter_resident_unit_no"
                                class="form-control form-select rounded">
                                <option value="">Select Unit No</option>
                            </select>
                        </div>

                    </div>
                    <span class="hide text-danger text-center filter_error mt-3 d-flex justify-content-center ">Please fill
                        values to filter</span>
                </div>
                <div class="modal-footer">
                    {{-- <button type="button" class="btn btn-success residence_filter_clear">Clear</button> --}}
                    <button type="button" class="btn form-cancel-btn" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn form-submit-btn" id="resident-filter-submit">Filter</button>
                </div>
            </div>
        </div>
    </div>


    {{-- filter model for visitor --}}
    <div class="modal fade" id="visitorfilter" tabindex="-1" aria-labelledby="visitorfilterLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="visitorfilterLabel">Filter visitors</h5>
                    {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                </div>
                <div class="modal-body">
                    <label for="filter_visitor_resident" class="form-label">Resident Name</label>
                    <select name="filter_visitor_resident" id="filter_visitor_resident"
                        class="form-control form-select rounded">
                        <option value="">Select Resident</option>
                        @if (!empty($residents_name_list) && count($residents_name_list) > 0)
                            @foreach ($residents_name_list as $resident)
                                <option value="{{ $resident->value }}"
                                    {{ !empty($filter_resident_id) && $resident->value == $filter_resident_id ? 'selected' : '' }}>
                                    {{ $resident->label }}</option>
                            @endforeach
                        @endif
                    </select>


                    <label for="filter_visitor_license" class="form-label mt-2">Vehicle License</label>
                    <select name="filter_visitor_license" id="filter_visitor_license"
                        class="form-control form-select rounded">
                        <option value="">Select License</option>
                        @if (!empty($visitor_vehicle_list) && count($visitor_vehicle_list) > 0)
                            @foreach ($visitor_vehicle_list as $vehicle)
                                <option value="{{ $vehicle->plate_no }}"
                                    {{ !empty($filter_visitor_license) && $vehicle->plate_no == $filter_visitor_license ? 'selected' : '' }}>
                                    {{ $vehicle->plate_no }}</option>
                            @endforeach
                        @endif
                    </select>

                    <label for="filter_visitor_model" class="form-label mt-2">Vehicle Make/Model</label>
                    <select name="filter_visitor_model" id="filter_visitor_model"
                        class="form-control form-select rounded">
                        <option value="">Select Make/Model</option>
                        @if (!empty($visitor_vehicle_model_list) && count($visitor_vehicle_model_list) > 0)
                            @foreach ($visitor_vehicle_model_list as $vehicle_model)
                                <option value="{{ $vehicle_model->model }}"
                                    {{ !empty($filter_visitor_model) && $vehicle_model->model == $filter_visitor_model ? 'selected' : '' }}>
                                    {{ $vehicle_model->model }}</option>
                            @endforeach
                        @endif
                    </select>

                    <label for="filter-entry-date" class="form-label mt-2">Entry date</label>
                    <input type="date" name="filter-entry-date" id="filter-entry-date" class="form-control"
                        value="{{ $filtered_entry_date ?? '' }}">


                    <label for="filter-exit-date" class="form-label mt-2">Exit date</label>
                    <input type="date" name="filter-exit-date" id="filter-exit-date" class="form-control"
                        value="{{ $filtered_exit_date ?? '' }}">

                    <div class="w-100 d-flex gap-2 mt-2">

                        <input type="hidden" name="" id="selected_visitor_unit_no"
                            value="{{ $filter_visitor_unit_id ?? '' }}">

                        <input type="hidden" name="" id="selected_visitor_blk_no"
                            value="{{ $filter_visitor_blk_id ?? '' }}">

                        <div class="w-50">
                            <label for="filter_visitor_blk_no" class="form-label">Blk No.</label>
                            <select name="filter_visitor_blk_no" id="filter_visitor_blk_no"
                                class="form-control form-select rounded">
                                <option value="">Select Blk No</option>
                                {{-- @if (!empty($visitor_blk_no_list) && count($visitor_blk_no_list) > 0)
                                    @foreach ($visitor_blk_no_list as $visitor_blk_no)
                                        <option value="{{ $visitor_blk_no->block_number }}"
                                            {{ !empty($filter_visitor_blk_no) && $visitor_blk_no->block_number == $filter_visitor_blk_no ? 'selected' : '' }}>
                                            {{ $visitor_blk_no->block_number }}</option>
                                    @endforeach
                                @endif --}}
                            </select>
                        </div>

                        <div class="w-50">
                            <label for="filter_visitor_unit_no" class="form-label">Unit No.</label>
                            <select name="filter_visitor_unit_no" id="filter_visitor_unit_no"
                                class="form-control form-select rounded">
                                <option value="">Select Unit No</option>
                            </select>
                        </div>

                    </div>
                    <span class="hide text-danger text-center filter_error mt-3 d-flex justify-content-center ">Please
                        fill
                        values to filter</span>
                </div>
                <div class="modal-footer">
                    {{-- <button type="button" class="btn btn-success visitor_filter_clear">Clear</button> --}}
                    <button type="button" class="btn form-cancel-btn" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn form-submit-btn" id="visitor-filter-submit">Filter</button>
                </div>
            </div>
        </div>
    </div>
    @push('scripts')
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': `{{ csrf_token() }}`
                }
            });
        </script>

        <script src="{{ asset('js/estate-view-page.js') }}"></script>
    @endPush
@endsection