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

        $justify_style = 'justify-content-end';
        $show_filter = false;
        if (!empty($filter_estate_id) || !empty($filter_role_id) || !empty($filter_status)) {
            $justify_style = 'justify-content-between';
            $show_filter = true;
        }
        $role_name = $estate_name = $status_name = null;
        if (!empty($estate_name_list) && count($estate_name_list) > 0 && !empty($filter_estate_id)) {
            foreach ($estate_name_list as $estate) {
                if ($estate->value == $filter_estate_id) {
                    $estate_name = $estate->label;
                    break;
                }
            }
        }
        if (!empty($user_roles) && count($user_roles) > 0 && !empty($filter_role_id)) {
            foreach ($user_roles as $role) {
                if ($role->value == $filter_role_id) {
                    $role_name = $role->label;
                    break;
                }
            }
        }
        if (!empty($status_list) && count($status_list) > 0 && !empty($filter_status)) {
            foreach ($status_list as $status) {
                if ($status['id'] == $filter_status) {
                    $status_name = $status['name'];
                    break;
                }
            }
        }
    @endphp

    <div class="page-heading-block py-4">
        <div class="page-title-block d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center justify-content-between">
                {{-- <a href="{{ route('users.get') }}" class="back-btn">
                    &#x276e; &nbsp;BACK
                </a> --}}

                {{-- <h4 class="mx-2 mb-0 font-weight-bold">Users</h4> --}}
                <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('users.get') }}">Users</a></li>
                        <li class="breadcrumb-item active" aria-current="page">List</li>
                    </ol>
                </nav>
            </div>

            <div class="d-flex">
                <a href="{{ route('users.add') }}"
                    class="btn add-btn mx-3 {{ !empty($userType) ? ($userType == 1 || ($userType == 2 && (!empty($access['users']) && in_array(1, $access['users']))) ? '' : 'hide') : 'hide' }}"
                    id="add_visitor_btn">+ Add User</a>
            </div>
        </div>
    </div>

    <div class="page-main-content">
        <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_style }} 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> --}}

                    @if ($show_filter)
                        <div class="d-flex gap-2">
                            <span class="mx-2">Results filtered by</span>

                            @if (!empty($filter_estate_id))
                                <div class="filters-applied-list ml-2 my-auto  filter-type-list" style="">
                                    <div class="d-flex">
                                        <span class="my-auto">Estate:
                                            <span class="filter-type-list-show mx-1">{{ $estate_name ?? '-' }}</span>
                                        </span>
                                        <button type="button" class="filter_close clear-filter px-0 py-0 my-auto border-0"
                                            data-type="estate_id">
                                            <img src="{{ asset('/assets/images/icons/close-filled.svg') }}"
                                                alt="close modal" width="18">
                                        </button>
                                    </div>
                                </div>
                            @endif
                            @if (!empty($filter_role_id))
                                <div class="filters-applied-list ml-2 my-auto  filter-type-list" style="">
                                    <div class="d-flex">
                                        <span class="my-auto">Role:
                                            <span class="filter-type-list-show mx-1">{{ $role_name ?? '-' }}</span>
                                        </span>
                                        <button type="button" class="filter_close clear-filter px-0 py-0 my-auto border-0"
                                            data-type="role_id">
                                            <img src="{{ asset('/assets/images/icons/close-filled.svg') }}"
                                                alt="close modal" width="18">
                                        </button>
                                    </div>
                                </div>
                            @endif
                            @if (!empty($filter_status))
                                <div class="filters-applied-list ml-2 my-auto  filter-type-list" style="">
                                    <div class="d-flex">
                                        <span class="my-auto">Status:
                                            <span class="filter-type-list-show mx-1">{{ $status_name ?? '-' }}</span>
                                        </span>
                                        <button type="button" class="filter_close clear-filter px-0 py-0 my-auto border-0"
                                            data-type="status_id">
                                            <img src="{{ asset('/assets/images/icons/close-filled.svg') }}"
                                                alt="close modal" width="18">
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endif

                    <div class="d-flex">
                        <input type="text" placeholder="Search Staff" class="search mx-3 search_staff">
                        <button type="button" class="btn filter_btn residence_filter" data-bs-toggle="modal"
                            data-bs-target="#userfilter">
                            <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">Estate</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">User Name</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($users_list) && count($users_list) > 0)
                            @foreach ($users_list as $user)
                                <tr>
                                    <td class="align-middle">{{ str_pad($loop->index + 1, 3, '0', STR_PAD_LEFT) }}</td>
                                    </td>
                                    <td class="align-middle">
                                        {{ $user->type_id == 1 || $user->type_id == 2 ? 'Admin' : (!empty($user->estate_name) ? $user->estate_name : '-') }}
                                    </td>
                                    <td class="align-middle">{{ $user->full_name }}</td>
                                    <td class="align-middle">
                                        {{ !empty($user->user_role) ? $user->user_role : (!empty($user->user_type) ? $user->user_type : '-') }}
                                    </td>
                                    <td class="align-middle">{{ $user->email ?? '-' }}</td>
                                    {{-- <td class="align-middle">{{ $user->user_name ?? '-' }}</td> --}}
                                    <td class="align-middle">{{ $user->contact_number ?? '-' }}</td>
                                    <td class="align-middle">{{ $user->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['users']) && in_array(3, $access['users']))) ? '' : 'hide') : 'hide' }}"
                                                    href="{{ route('users.edit', ['id' => $user->user_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['users']) && in_array(4, $access['users']))) ? '' : 'hide') : 'hide' }}"
                                                    href="{{ route('users.delete', ['id' => $user->user_id]) }}"
                                                    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="8">
                                    No records found
                                </td>
                            </tr> --}}
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

        {{-- filter model for Users --}}
        <div class="modal fade" id="userfilter" tabindex="-1" aria-labelledby="userfilterLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="userfilterLabel">Filter Users</h5>
                        {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                    </div>
                    <div class="modal-body">
                        <label for="filter_estate_id" class="form-label">Estate</label>
                        <select name="filter_estate_id" id="filter_estate_id" class="form-control form-select rounded">
                            <option value="">Select Estate</option>
                            @if (!empty($estate_name_list) && count($estate_name_list) > 0)
                                @foreach ($estate_name_list as $estate)
                                    <option value="{{ $estate->value }}"
                                        {{ !empty($filter_estate_id) && $estate->value == $filter_estate_id ? 'selected' : '' }}>
                                        {{ $estate->label }}</option>
                                @endforeach
                            @endif
                        </select>

                        <p class="text-danger required-label mb-1 hide">Please select estate</p>

                        <label for="filter_role" class="form-label mt-2">Role</label>
                        <select name="filter_role" id="filter_role" class="form-control form-select rounded">
                            <option value="">Select Role</option>
                            @if (!empty($user_roles) && count($user_roles) > 0)
                                @foreach ($user_roles as $role)
                                    <option value="{{ $role->value }}"
                                        {{ !empty($filter_role_id) && $role->value == $filter_role_id ? 'selected' : '' }}>
                                        {{ $role->label }}</option>
                                @endforeach
                            @endif
                        </select>

                        <label for="filter_status" class="form-label mt-2">Status</label>
                        <select name="filter_status" id="filter_status" class="form-control form-select rounded">
                            <option value="">Select Status</option>
                            @if (!empty($status_list) && count($status_list) > 0)
                                @foreach ($status_list as $status)
                                    <option value="{{ $status['id'] }}"
                                        {{ !empty($filter_status) && $status['id'] == $filter_status ? 'selected' : '' }}>
                                        {{ $status['name'] }}</option>
                                @endforeach
                            @endif
                        </select>
                        <div class="w-100 d-flex gap-2 mt-2">

                            <input type="hidden" name="" id="selected_estate_id"
                                value="{{ $filter_estate_id ?? '' }}">

                            <input type="hidden" name="" id="selected_role_id"
                                value="{{ $filter_role_id ?? '' }}">

                            <input type="hidden" name="" id="selected_status"
                                value="{{ $filter_status ?? '' }}">
                        </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="users-filter-submit">Filter</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        @push('scripts')
            <script>
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': `{{ csrf_token() }}`
                    }
                });
            </script>

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