@php
    $userType = \App\Helpers\Helpers::getUserRole()->type_id ?? [];

    $userAccess = \App\Helpers\Helpers::getUserAccess() ?? [];
    $access = $userAccess['accesses'] ?? [];
@endphp
@extends('layout.master')
@section('content')
    <div class="page-heading-block py-4">
        <div class="page-title-block d-flex align-items-center justify-content-between">
            {{-- <h4 class="page-title mt-2">Estates</h4> --}}

            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('estates.get') }}">Estates</a></li>
                    <li class="breadcrumb-item active" aria-current="page">List</li>
                </ol>
            </nav>

            <div class="d-flex">
                {{-- <input type="text" placeholder="Search Estate"
                    class="search {{ !empty($userType) ? ($userType == 1 || ($userType == 2 && (!empty($access['estate']) && in_array(1, $access['estate']))) ? '' : 'mx-3') : 'mx-3' }}"> --}}
                <a href="{{ route('estates.add') }}"
                    class="btn add-btn mx-3 {{ !empty($userType) ? ($userType == 1 || ($userType == 2 && (!empty($access['estate']) && in_array(1, $access['estate']))) ? '' : 'hide') : 'hide' }}"
                    id="add_estate_btn">+ Add Estate</a>
                {{-- <button class="btn filter_btn"><img src="{{ asset('assets/images/icons/filter.png') }}"
                        alt=""></button> --}}
            </div>
        </div>
    </div>

    <div class="page-main-content">
        {{-- @if (!empty($estates) && count($estates) > 0) --}}
        {{-- <div class="m-0 estate-list-container {{ !empty($userType) ? ($userType == 1 || ($userType == 2 && (!empty($access['estate.list']) && in_array(2, $access['estate.list']))) ? '' : 'hide') : 'hide' }}"> --}}
        <div
            class="m-0 estate-list-table p-1 {{ !empty($userType) ? ($userType == 1 || ($userType == 2 && (!empty($access['estate']) && in_array(2, $access['estate']))) ? '' : 'hide') : 'hide' }}">
            <div class="p-3">
                <div class="residences-search-section d-flex justify-content-end align-items-center mb-4">
                    <div class="d-flex">
                        <input type="text" placeholder="Search" class="search mx-3 search_resident">
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table" id="estate-list-table" style="width: 100%;">
                        <thead>
                            <tr>
                                <th scope="col" class="align-middle" style="width:5%;">Sl No.</th>
                                <th scope="col" class="align-middle" style="width:10%;">Name</th>
                                <th scope="col" class="align-middle" style="width:20%;">Address</th>
                                <th scope="col" class="align-middle" style="width:8%;">Total Residents</th>
                                <th scope="col" class="align-middle" style="width:8%;">Visitors for Today</th>
                                <th scope="col" class="align-middle" style="width:8%;">Total Over Stayers</th>
                                {{-- <th scope="col" class="align-middle" style="width:8%;">Total Vehicle Logs</th> --}}
                                <th scope="col" class="align-middle" style="width:3%;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (!empty($estates) && count($estates) > 0)
                                @foreach ($estates as $estate)
                                    <tr>
                                        <td class="align-middle">{{ str_pad($loop->index + 1, 3, '0', STR_PAD_LEFT) }}</td>
                                        <td class="align-middle">{{ $estate->name ?? '-' }}</td>
                                        <td class="align-middle">
                                            {{ $estate->address_line_one ?? ('-' . $estate->address_line_two ?? '') }}</td>
                                        <td class="align-middle">
                                            {{ $estate->resident_count ?? 0 }}
                                        </td>
                                        <td class="align-middle">
                                            {{ $estate->visitor_count ?? 0 }}
                                        </td>
                                        <td class="align-middle">
                                            {{ $estate->over_stayers_count ?? 0 }}
                                        </td>
                                        {{-- <td class="align-middle">
                                            {{ $estate->logs_count ?? 0 }}
                                        </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 table-actions-dropdown" style="display: none;">
                                                    {{-- <a class="dropdown-item action-links {{ !empty($userType) && $userType == 1 ? '' : 'hide' }}"
                                                        href="{{ route('estates.list-units-blocks', ['id' => $estate->id ?? 0]) }}"><img
                                                            src="{{ asset('assets/images/icons/eye.svg') }}"
                                                            alt="">&nbsp;View Blocks & units</a> --}}
                                                    <a class="dropdown-item action-links {{ !empty($userType) ? ($userType == 1 || ($userType == 2 && (!empty($access['estate']) && in_array(2, $access['estate']))) ? '' : 'hide') : 'hide' }}"
                                                        href="{{ route('estates.view', ['id' => $estate->id ?? 0]) }}"><img
                                                            src="{{ asset('assets/images/icons/eye.svg') }}"
                                                            alt="">&nbsp;View</a>
                                                    <a class="dropdown-item action-links {{ !empty($userType) ? ($userType == 1 || ($userType == 2 && (!empty($access['estate']) && in_array(3, $access['estate']))) ? '' : 'hide') : 'hide' }}"
                                                        href="{{ route('estates.edit', ['id' => $estate->id ?? 0]) }}"><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']) && in_array(4, $access['estate']))) ? '' : 'hide') : 'hide' }}"
                                                        href="{{ route('estates.delete', ['id' => $estate->id ?? 0]) }}"
                                                        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>
        </div>

        @push('scripts')
            <script>
                $(document).on('click', function(event) {
                    const $target = $(event.target);

                    $('.dropdown').each(function() {
                        const $dropdown = $(this);
                        const $dropdownMenu = $dropdown.find('.dropdown-menu');
                        const $dropdownButton = $dropdown.find('.table-action-btn');

                        if (!$dropdown.is($target.closest('.dropdown')) && !$dropdownButton.is($target)) {
                            $dropdownMenu.hide();
                            $dropdownButton.find('img').removeClass('flip');
                        }
                    });
                });

                window.toggleDropdown = function(btn) {
                    const $btn = $(btn);
                    const $dropdownMenu = $btn.next('.dropdown-menu');

                    $('.dropdown-menu').not($dropdownMenu).hide();
                    $('.table-action-btn img').not($btn.find('img')).removeClass('flip');

                    $dropdownMenu.toggle();
                    $btn.find('img').toggleClass('flip');
                    event.stopPropagation();
                }

                function deleteConfirmation(event) {
                    event.preventDefault();
                    const deleteUrl = event.currentTarget.getAttribute("href");
                    Swal.fire({
                        title: "Are you sure?",
                        text: "You want to delete ?",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonText: "Yes, delete it!",
                        cancelButtonText: "No, cancel!",
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = deleteUrl;
                        } else {
                            event.preventDefault();
                            return false;
                        }
                    });
                }


                let estateTable = $("#estate-list-table").DataTable({
                    lengthChange: false,
                    searching: true,
                    info: false,
                    pagingType: "simple_numbers",
                    pageLength: 10,
                    columnDefs: [{
                        targets: [6],
                        orderable: false,
                        searchable: false
                    }, {
                        targets: [2],
                        orderable: false,
                        searchable: true
                    }],
                    language: {
                        emptyTable: 'No records found',
                        zeroRecords: 'No records found'
                    },
                    drawCallback: function() {
                        let paginationContainer = $(this.api().table().container()).find(
                            ".dataTables_paginate"
                        );
                        let paginationList = paginationContainer.find(".pagination");

                        paginationList.empty();

                        let currentPage = this.api().page.info().page + 1;
                        let totalPages = this.api().page.info().pages;

                        let paginationHtml = "";

                        if (totalPages > 1) {
                            paginationHtml += '<ul class="pagination">';
                            paginationHtml +=
                                '<li class="page-item ' +
                                (currentPage === 1 ? "disabled" : "") +
                                '">';
                            for (let i = 1; i <= totalPages; i++) {
                                paginationHtml +=
                                    '<li class="page-item ' +
                                    (currentPage === i ? "active" : "") +
                                    '"><a class="page-link" href="javascript:void(0)" data-page="' +
                                    i +
                                    '">' +
                                    i +
                                    "</a></li>";
                            }
                            paginationHtml +=
                                '<li class="page-item ' +
                                (currentPage === totalPages ? "disabled" : "") +
                                '"><a class="page-link" href="javascript:void(0)" data-page="next">Next</a></li>';
                            paginationHtml +=
                                '<li class="page-item ' +
                                (currentPage === totalPages ? "disabled" : "") +
                                '"><a class="page-link" href="javascript:void(0)" data-page="' +
                                totalPages +
                                '">Last</a></li>';
                            paginationHtml += "</ul>";
                        }

                        paginationContainer.html(paginationHtml);

                        paginationContainer.find(".page-link").click(function(e) {
                            e.preventDefault();
                            let targetPage = $(this).data("page");
                            // if (targetPage === 'prev') {
                            //     table.page('previous').draw('page');
                            // } else
                            if (targetPage === "next") {
                                estateTable.page("next").draw("page");
                            } else {
                                estateTable.page(targetPage - 1).draw("page");
                            }
                        });
                    },
                });

                $(".search_resident").on("keyup", function() {
                    estateTable.search(this.value).draw();
                    $(".table-check-box").parent().removeClass("sorting_asc");
                });

                $(".table-check-box").parent().removeClass("sorting_asc");
            </script>
        @endpush
    @endsection