@extends('layouts.app')
@section('content')
<!-- Begin page -->
<div id="layout-wrapper">
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->

                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0">Listjs</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Tables</a></li>
                                    <li class="breadcrumb-item active">Listjs</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end page title -->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card" id="leadsList">
                            <div class="card-header border-0">

                                <div class="row g-4 align-items-center">
                                    <div class="col-sm-3">
                                        <form action="{{ route('users.index') }}" method="GET">
                                            <input type="hidden" name="role" value="{{ request('role') }}">
                                            <input type="hidden" name="date_from" value="{{ request('date_from') }}">
                                            <input type="hidden" name="date_to" value="{{ request('date_to') }}">
                                            <div class="search-box">
                                                <input type="text" name="q" value="{{ request('q') }}" class="form-control" placeholder="Search name, email, phone...">
                                                <i class="ri-search-line search-icon"></i>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="col-sm-auto ms-auto">
                                        <div class="hstack gap-2">
                                            <button class="btn btn-soft-danger" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button>
                                            <button type="button" class="btn btn-info" data-bs-toggle="offcanvas" href="#offcanvasExample"><i class="ri-filter-3-line align-bottom me-1"></i> Fliters</button>
                                            @can('user-create')
                                            <button type="button"
                                                class="btn btn-success add-btn user-modal-trigger"
                                                id="create-btn"
                                                data-bs-toggle="modal"
                                                data-bs-target="#userModal"
                                                data-mode="create"
                                                data-store-url="{{ route('users.store') }}">
                                                <i class="ri-add-line align-bottom me-1"></i> Add User
                                            </button>
                                            @endcan
                                            <span class="dropdown">
                                                <button class="btn btn-soft-info btn-icon fs-14" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="ri-settings-4-line"></i>
                                                </button>
                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                    <li><a class="dropdown-item" href="#">Copy</a></li>
                                                    <li><a class="dropdown-item" href="#">Move to pipline</a></li>
                                                    <li><a class="dropdown-item" href="#">Add to exceptions</a></li>
                                                    <li><a class="dropdown-item" href="#">Switch to common form view</a></li>
                                                    <li><a class="dropdown-item" href="#">Reset form view to default</a></li>
                                                </ul>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div>
                                    <div class="table-responsive table-card">
                                        <table class="table align-middle" id="customerTable">
                                            <thead class="table-light">
                                                <tr>
                                                    <th scope="col" style="width: 50px;">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="checkAll" value="option">
                                                        </div>
                                                    </th>

                                                    <th class="sort" data-sort="name">Name</th>
                                                    <th class="sort" data-sort="company_name">Email</th>
                                                    <th class="sort" data-sort="phone">Phone</th>
                                                    <th class="sort" data-sort="location">Location</th>
                                                    <th class="sort" data-sort="tags">Role</th>
                                                    <th class="sort" data-sort="date">Create Date</th>
                                                    <th class="sort" data-sort="action">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody class="list form-check-all">
                                                @forelse ($users as $user)

                                                <tr>
                                                    <th scope="row">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" name="chk_child" value="option1">
                                                        </div>
                                                    </th>
                                                    <td class="id" style="display:none;"><a href="javascript:void(0);" class="fw-medium link-primary">#VZ2101</a></td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="{{ $user->image ? asset('storage/' . $user->image) : asset('assets/images/users/avatar-10.jpg') }}" alt="" class="avatar-xxs rounded-circle image_src object-fit-cover">
                                                            </div>
                                                            <div class="flex-grow-1 ms-2 name">{{ $user->name}}</div>
                                                        </div>
                                                    </td>
                                                    <td class="company_name">{{ $user->email}}</td>
                                                    <td class="phone">{{ $user->phone ?? '-' }}</td>
                                                    <td class="tags">
                                                        @forelse ($user->getRoleNames() as $role)
                                                        <span class="badge bg-primary-subtle text-primary">{{ $role }}</span>
                                                        @empty
                                                        @endforelse
                                                    </td>
                                                    <th scope="row">{{ $loop->iteration }}</th>

                                                    <td class="date">{{ $user->created_at->format('d M, Y') }}</td>
                                                    <td>
                                                        <ul class="list-inline hstack gap-2 mb-0">
                                                            <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Call">
                                                                <a href="javascript:void(0);" class="text-muted d-inline-block">
                                                                    <i class="ri-phone-line fs-16"></i>
                                                                </a>
                                                            </li>
                                                            <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Message">
                                                                <a href="javascript:void(0);" class="text-muted d-inline-block">
                                                                    <i class="ri-question-answer-line fs-16"></i>
                                                                </a>
                                                            </li>
                                                            <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="View">
                                                                <a href="javascript:void(0);"
                                                                    class="text-muted d-inline-block user-modal-trigger"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#userModal"
                                                                    data-mode="view"
                                                                    data-user-id="{{ $user->id }}"
                                                                    data-user-name="{{ $user->name }}"
                                                                    data-user-email="{{ $user->email }}"
                                                                    data-user-phone="{{ $user->phone }}"
                                                                    data-user-image-url="{{ $user->image ? asset('storage/' . $user->image) : asset('assets/images/users/avatar-10.jpg') }}"
                                                                    data-user-created-at="{{ $user->created_at->format('d M, Y') }}"
                                                                    data-user-roles='@json($user->getRoleNames()->values()->all())'
                                                                    data-update-url="{{ route('users.update', $user->id) }}">
                                                                    <i class="ri-eye-fill align-bottom text-muted"></i>
                                                                </a>
                                                            </li>

                                                            @can('user-edit')
                                                            <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
                                                                @if (!in_array('Super Admin', $user->getRoleNames()->toArray() ?? []) || Auth::user()->hasRole('Super Admin'))
                                                                <a href="javascript:void(0);"
                                                                    class="text-muted d-inline-block user-modal-trigger"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#userModal"
                                                                    data-mode="edit"
                                                                    data-user-id="{{ $user->id }}"
                                                                    data-user-name="{{ $user->name }}"
                                                                    data-user-email="{{ $user->email }}"
                                                                    data-user-phone="{{ $user->phone }}"
                                                                    data-user-image-url="{{ $user->image ? asset('storage/' . $user->image) : asset('assets/images/users/avatar-10.jpg') }}"
                                                                    data-user-created-at="{{ $user->created_at->format('d M, Y') }}"
                                                                    data-user-roles='@json($user->getRoleNames()->values()->all())'
                                                                    data-update-url="{{ route('users.update', $user->id) }}">
                                                                    <i class="ri-pencil-fill align-bottom text-muted"></i>
                                                                </a>
                                                                @endif
                                                            </li>
                                                            @endcan
                                                            <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Delete">
                                                                <a class="remove-item-btn" data-bs-toggle="modal" href="#deleteRecordModal">

                                                                    <form action="{{ route('users.destroy', $user->id) }}" method="post">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        @can('user-delete')
                                                                        @if (Auth::user()->id!=$user->id)
                                                                        <button type="submit" class="btn btn-sm btn-danger remove-item-btn" onclick="return confirm('Do you want to delete this user?');"><i class="ri-delete-bin-fill align-bottom text-muted"></i></button>
                                                                        @endif
                                                                        @endcan

                                                                    </form>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                                @empty
                                                <td colspan="5">
                                                    <span class="text-danger">
                                                        <strong>No User Found!</strong>
                                                    </span>
                                                </td>
                                                @endforelse
                                            </tbody>
                                        </table>

                                    </div>
                                    <div class="d-flex justify-content-end mt-3">
                                        {{ $users->links() }}
                                    </div>
                                </div>
                                <div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header bg-light p-3">
                                                <h5 class="modal-title" id="userModalLabel">User</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <form id="userModalForm" method="POST" autocomplete="off" enctype="multipart/form-data">
                                                @csrf
                                                <input type="hidden" id="user-modal-method" name="_method" value="PUT">
                                                <div class="modal-body">
                                                    <div class="row g-3">
                                                        <div class="col-lg-12">
                                                            <label for="modal-user-name" class="form-label">Name</label>
                                                            <input type="text" id="modal-user-name" name="name" class="form-control" required>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <label for="modal-user-email" class="form-label">Email</label>
                                                            <input type="email" id="modal-user-email" name="email" class="form-control" required>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <label for="modal-user-phone" class="form-label">Phone</label>
                                                            <input type="text" id="modal-user-phone" name="phone" class="form-control" placeholder="Enter phone number">
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <label for="modal-user-image" class="form-label">Image</label>
                                                            <input type="file" id="modal-user-image" name="image" class="form-control" accept="image/png,image/jpeg,image/jpg,image/webp">
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <img id="modal-user-image-preview" src="{{ asset('assets/images/users/avatar-10.jpg') }}" alt="User image preview" class="avatar-md rounded-circle object-fit-cover border">
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <label for="modal-user-roles" class="form-label">Roles</label>
                                                            <select id="modal-user-roles" class="form-control" name="roles[]" multiple required>
                                                                @foreach ($roles as $role)
                                                                @if ($role != 'Super Admin' || Auth::user()->hasRole('Super Admin'))
                                                                <option value="{{ $role }}">{{ $role }}</option>
                                                                @endif
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-lg-12 user-edit-only">
                                                            <label for="modal-user-password" class="form-label">Password</label>
                                                            <input type="password" id="modal-user-password" name="password" class="form-control" placeholder="Leave blank to keep current password">
                                                        </div>
                                                        <div class="col-lg-12 user-edit-only">
                                                            <label for="modal-user-password-confirmation" class="form-label">Confirm Password</label>
                                                            <input type="password" id="modal-user-password-confirmation" name="password_confirmation" class="form-control">
                                                        </div>
                                                        <div class="col-lg-12 existing-user-only">
                                                            <label class="form-label">Created At</label>
                                                            <input type="text" id="modal-user-created-at" class="form-control" readonly>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <div class="hstack gap-2 justify-content-end">
                                                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                                        <button type="submit" class="btn btn-success" id="userModalSubmitBtn">Update User</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <!--end modal-->

                                <!-- Modal -->
                                <div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-labelledby="deleteRecordLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close"></button>
                                            </div>
                                            <div class="modal-body p-5 text-center">
                                                <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px"></lord-icon>
                                                <div class="mt-4 text-center">
                                                    <h4 class="fs-semibold">You are about to delete a lead ?</h4>
                                                    <p class="text-muted fs-14 mb-4 pt-1">Deleting your lead will remove all of your information from our database.</p>
                                                    <div class="hstack gap-2 justify-content-center remove">
                                                        <button class="btn btn-link link-success fw-medium text-decoration-none shadow-none" id="deleteRecord-close" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
                                                        <button class="btn btn-danger" id="delete-record">Yes, Delete It!!</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--end modal -->


                                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
                                    <div class="offcanvas-header bg-light">
                                        <h5 class="offcanvas-title" id="offcanvasExampleLabel">User Filters</h5>
                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                    </div>
                                    <!--end offcanvas-header-->
                                    <form action="{{ route('users.index') }}" method="GET" class="d-flex flex-column justify-content-end h-100">
                                        <input type="hidden" name="q" value="{{ request('q') }}">
                                        <div class="offcanvas-body">
                                            <div class="mb-4">
                                                <label for="date_from" class="form-label text-muted text-uppercase fw-semibold mb-3">From Date</label>
                                                <input type="date" class="form-control" id="date_from" name="date_from" value="{{ request('date_from') }}">
                                            </div>
                                            <div class="mb-4">
                                                <label for="date_to" class="form-label text-muted text-uppercase fw-semibold mb-3">To Date</label>
                                                <input type="date" class="form-control" id="date_to" name="date_to" value="{{ request('date_to') }}">
                                            </div>
                                            <div class="mb-4">
                                                <label for="role" class="form-label text-muted text-uppercase fw-semibold mb-3">Role</label>
                                                <select class="form-control" name="role" id="role">
                                                    <option value="">All Roles</option>
                                                    @foreach ($roles as $role)
                                                    @if ($role != 'Super Admin' || Auth::user()->hasRole('Super Admin'))
                                                    <option value="{{ $role }}" {{ request('role') === $role ? 'selected' : '' }}>
                                                        {{ $role }}
                                                    </option>
                                                    @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <!--end offcanvas-body-->
                                        <div class="offcanvas-footer border-top p-3 text-center hstack gap-2">
                                            <a href="{{ route('users.index') }}" class="btn btn-light w-100">Clear</a>
                                            <button type="submit" class="btn btn-success w-100">Apply</button>
                                        </div>
                                        <!--end offcanvas-footer-->
                                    </form>
                                </div>
                                <!--end offcanvas-->

                            </div>
                        </div>

                    </div>
                    <!--end col-->
                </div>


            </div>
            <!-- container-fluid -->
        </div>
        <!-- End Page-content -->
        @include('layouts.footer')

    </div>
    <!-- end main content-->
</div>
<!-- END layout-wrapper -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const userModalTriggers = document.querySelectorAll('.user-modal-trigger');
        const modalForm = document.getElementById('userModalForm');
        const modalTitle = document.getElementById('userModalLabel');
        const modalSubmitButton = document.getElementById('userModalSubmitBtn');
        const modalMethodField = document.getElementById('user-modal-method');
        const nameField = document.getElementById('modal-user-name');
        const emailField = document.getElementById('modal-user-email');
        const rolesField = document.getElementById('modal-user-roles');
        const passwordField = document.getElementById('modal-user-password');
        const passwordConfirmationField = document.getElementById('modal-user-password-confirmation');
        const phoneField = document.getElementById('modal-user-phone');
        const imageField = document.getElementById('modal-user-image');
        const imagePreview = document.getElementById('modal-user-image-preview');
        const createdAtField = document.getElementById('modal-user-created-at');
        const editOnlyFields = document.querySelectorAll('.user-edit-only');
        const existingUserOnlyFields = document.querySelectorAll('.existing-user-only');
        const defaultUserImage = "{{ asset('assets/images/users/avatar-10.jpg') }}";

        userModalTriggers.forEach(function(trigger) {
            trigger.addEventListener('click', function() {
                const mode = this.dataset.mode || 'view';
                const selectedRoles = JSON.parse(this.dataset.userRoles || '[]');

                const isCreateMode = mode === 'create';
                const isViewMode = mode === 'view';

                modalForm.action = isCreateMode ? this.dataset.storeUrl : this.dataset.updateUrl;
                modalMethodField.disabled = isCreateMode;
                modalMethodField.value = isCreateMode ? 'POST' : 'PUT';

                nameField.value = isCreateMode ? '' : (this.dataset.userName || '');
                emailField.value = isCreateMode ? '' : (this.dataset.userEmail || '');
                phoneField.value = isCreateMode ? '' : (this.dataset.userPhone || '');
                createdAtField.value = isCreateMode ? '' : (this.dataset.userCreatedAt || '');
                imagePreview.src = isCreateMode ? defaultUserImage : (this.dataset.userImageUrl || defaultUserImage);
                imageField.value = '';
                passwordField.value = '';
                passwordConfirmationField.value = '';

                Array.from(rolesField.options).forEach(function(option) {
                    option.selected = isCreateMode ? false : selectedRoles.includes(option.value);
                });

                modalTitle.textContent = isCreateMode ? 'Add User' : (isViewMode ? 'View User' : 'Edit User');
                modalSubmitButton.textContent = isCreateMode ? 'Create User' : 'Update User';
                modalSubmitButton.classList.toggle('d-none', isViewMode);
                nameField.readOnly = isViewMode && !isCreateMode;
                emailField.readOnly = isViewMode && !isCreateMode;
                phoneField.readOnly = isViewMode && !isCreateMode;
                rolesField.disabled = isViewMode;
                imageField.disabled = isViewMode;
                passwordField.required = isCreateMode;
                passwordConfirmationField.required = isCreateMode;

                editOnlyFields.forEach(function(element) {
                    element.classList.toggle('d-none', isViewMode);
                });

                existingUserOnlyFields.forEach(function(element) {
                    element.classList.toggle('d-none', isCreateMode);
                });
            });
        });

        imageField.addEventListener('change', function() {
            const [file] = this.files;
            if (file) {
                imagePreview.src = URL.createObjectURL(file);
            }
        });
    });
</script>
@endsection