@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">

            <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">
                        {{-- <a href="{{ route('estates.view', ['id' => $estate_details->id]) }}"> --}}
                        <a href="javascript:void(0);">
                            {{ $estate_details->name ?? '' }}
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Blocks & Units List</li>
                </ol>
            </nav>

            <div class="d-flex">
                <a href="{{ route('estates.add-units-blocks', ['id' => $estate_details->id ?? 0]) }}"
                    class="btn add-btn mx-3 {{ !empty($userType) && $userType == 1 ? '' : 'hide' }}" id="add_estate_btn">+
                    Add Blocks & Units</a>
            </div>
        </div>
    </div>

    <div class="page-main-content">
        <div class="m-0 estate-list-table p-1 {{ !empty($userType) && $userType == 1 ? '' : '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 Unit,Block" class="search mx-3 unitBlock">
                    </div>
                </div> --}}
                <div class="table-responsive">
                    <table class="table" id="unit-block-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%;">Block</th>
                                <th scope="col" class="align-middle" style="width:30%;">Unit</th>
                                <th scope="col" class="align-middle" style="width:3%;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (!empty($block_data) && count($block_data) > 0)
                                @foreach ($block_data as $block)
                                    <tr>
                                        <td class="align-middle">{{ str_pad($loop->index + 1, 3, '0', STR_PAD_LEFT) }}</td>
                                        <td class="align-middle">{{ $block->block_number ?? '-' }}</td>
                                        <td class="align-middle">
                                            @if (!empty($block->units) && count($block->units) > 0)
                                                @foreach ($block->units as $unit)
                                                    <span class="unit_number_td">{{ $unit->unit }} </span>,
                                                @endforeach
                                            @else
                                            @endif
                                        </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.edit-units-blocks', ['block_id' => $block->id, 'estate_id' => $estate_details->id]) }}"><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-units-blocks', ['id' => $block->id]) }}"
                                                        onclick="return deleteConfirmation(event);"><img
                                                            src="{{ asset('assets/images/icons/delete.svg') }}"
                                                            alt="">&nbsp;Delete</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @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 unitBlockTable = $("#unit-block-list-table").DataTable({
                    lengthChange: false,
                    searching: true,
                    info: false,
                    pagingType: "simple_numbers",
                    pageLength: 10,
                    columnDefs: [{
                        targets: [2, 3],
                        orderable: false,
                        searchable: false
                    }],
                    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 === "next") {
                                unitBlockTable.page("next").draw("page");
                            } else {
                                unitBlockTable.page(targetPage - 1).draw("page");
                            }
                        });
                    },
                });

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

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