@extends('template.layouts.template-base')
@section('title', 'User management')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <style>
        .page-content {
            background-color: #F0F4F8 !important;
            padding: 80px 10px;
        }
    </style>
@endsection

@section('content')
    <div class="page-header product-main service-list">
        <div class="container-fluid p-0">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        <a href="{{ route('backend.dashboard') }}">User Management / <span class="breadcrumb-link">Roles &
                                Permissions</span></a>
                    </div>
                </div>
                <div class="col-auto cate-top-btns">
                    <div class="action-buttons d-none" id="bulkActions">
                        <button class="btn-delete-category" data-bs-toggle="modal" data-bs-target=".delete-roles-screen">
                            Delete <i class='bx bxs-trash fs-5'></i>
                        </button>
                    </div>
                    @can('read', App\Models\Role::class)
                        <button class="btn-export-category">
                            Export
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <path d="M12 16V3"></path>
                                <polyline points="7 8 12 3 17 8"></polyline>
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                            </svg>
                        </button>
                    @endcan

                    @can('edit', App\Models\Role::class)
                        <a class="btn-add-category" href="{{ route('backend.user-management.add') }}">
                            Create New Role
                        </a>
                    @endcan
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid product-table-sec user-management-page">
        <div class="content-wrapper">
            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif
            <div class="filter-section">
                <div class="search-box-category">
                    <input type="text" placeholder="Search" id="searchInput">
                    <i class="bx bx-search"></i>
                </div>
                <div class="position-relative">
                    <div class="col-md-3 custom-dropdown">
                        <select id="statusFilter" class="dropdown-btn">
                            <option value=""> Status</option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive table-card">
                    <table class="table align-middle mb-0 orders-table-container">
                        <thead class="custom-table-header">
                            <tr>
                                <th scope="col"><input type="checkbox" id="selectAll"></th>
                                <th scope="col">Roll Name</th>
                                <th scope="col">User Assigned</th>
                                <th scope="col">Created By</th>
                                <th scope="col">Created On</th>
                                <th scope="col">Status</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody id="categoryList">
                            @foreach ($roles as $role)
                                <tr data-status="{{ $role->status }}">
                                    <td><input type="checkbox" class="category-checkbox" value="{{ $role->id }}" /></td>
                                    <td>{{ $role->name }}</td>
                                    <td>{{ $role->users_count }}</td>
                                    <td>Admin</td>
                                    <td>{{ $role->created_at->format('d/m/Y') }}</td>
                                    <td>
                                        <span class="status-badge {{ $role->status == 1 ? 'bg-success' : 'bg-danger' }}">
                                            {{ $role->status == 1 ? 'Active' : 'Inactive' }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="action-btn-sec">
                                            <a href="{{ route('backend.user-management.view', $role->id) }}"
                                                class="action-icon">
                                                <i class="ri-eye-fill fs-5"></i>
                                            </a>
                                            @can('edit', $role)
                                                <a href="{{ route('backend.user-management.edit', $role->id) }}"
                                                    class="action-icon">
                                                    <i class="ri-edit-fill fs-5"></i>
                                                </a>
                                                <a href="{{ route('backend.user-management.duplicate', $role->id) }}"
                                                    class="action-icon" title="Duplicate">
                                                    <i class="ri-file-copy-line fs-5"></i>
                                                </a>
                                                <a href="javascript:void(0);" class="action-icon delete-role-btn"
                                                    data-id="{{ $role->id }}" data-bs-toggle="modal"
                                                    data-bs-target=".delete-roles-screen">
                                                    <i class="bx bxs-trash fs-5"></i>
                                                </a>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <form id="deleteRoleForm" method="POST" action="" style="display:none;">
        @csrf
        @method('DELETE')
    </form>


    <div class="modal fade delete-roles-screen forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">

                <div class="modal-header">
                    <div class="modal-icon-box">
                        <i class="bx bxs-trash"></i>
                    </div>
                    <h5>Delete Roles?</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body inquiry-preview-modal p-4">

                    <div class="row form-row edit-category">

                        <div class="col-lg-12 col-md-12">
                            <p>Are you sure you want to delete these roles? These role name will be permanently removed from
                                the roles list. This action cannot be undone. If any users are assigned to these roles, you
                                must reassign them before deleting.</p>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">

                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">
                            Cancel
                        </button>
                        <button type="button" class="btn delete-btn show-toast" data-toast-target="#deleteRolesToast">
                            Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="deleteRolesToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Deleted Successful</h6>
                    <p>These roles has been deleted successfully.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="deleteShopToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Deleted Successful</h6>
                    <p>The shop has been deleted successfully.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="deleteShopListToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Deleted Successful</h6>
                    <p>These shops has been deleted successfully.</p>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        // Switch tabs
        function switchTab(event, tabName) {
            const tabs = document.querySelectorAll(".tab");
            const contents = document.querySelectorAll(".tab-content");

            tabs.forEach((tab) => tab.classList.remove("active"));
            contents.forEach((content) => content.classList.remove("active"));

            event.target.classList.add("active");
            document.getElementById(tabName).classList.add("active");
        }

        // Initialize Flatpickr for date inputs
        flatpickr("#from-date", {
            dateFormat: "d M, Y",
            position: "below",
            defaultDate: new Date(),
            onChange: function(selectedDates, dateStr, instance) {
                console.log("From Date selected:", dateStr);
            },
        });

        flatpickr("#to-date", {
            dateFormat: "d M, Y",
            position: "auto",
            defaultDate: new Date(),
            onChange: function(selectedDates, dateStr, instance) {
                console.log("To Date selected:", dateStr);
            },
        });

        // Clear all filters
        function clearFilters() {
            const checkboxes = document.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach((cb) => (cb.checked = false));

            const radios = document.querySelectorAll('input[type="radio"]');
            radios.forEach((radio) => (radio.checked = false));

            document.getElementById("from-date").value = "";
            document.getElementById("to-date").value = "";

            console.log("Filters cleared");
        }

        // Submit filters
        function submitFilters() {
            const filters = {
                stockStatus: Array.from(
                    document.querySelectorAll("#stock-status input:checked"),
                ).map((cb) => cb.id),
                productStatus: Array.from(
                    document.querySelectorAll("#product-status input:checked"),
                ).map((cb) => cb.id),
                weight: Array.from(
                    document.querySelectorAll("#weight input:checked"),
                ).map((cb) => cb.id),
                price: document.querySelector('input[name="price"]:checked')?.id || null,
                soldStatus: Array.from(
                    document.querySelectorAll("#sold-status input:checked"),
                ).map((cb) => cb.id),
                fromDate: document.getElementById("from-date").value,
                toDate: document.getElementById("to-date").value,
            };

            console.log("Filters submitted:", filters);
            closeFilterModal();
        }
    </script>
    <script>
        document.addEventListener('click', function(e) {

            document.querySelectorAll('.description-full.show').forEach(el => {
                el.classList.remove('show');
            });

            const desc = e.target.closest('.description-text');
            if (desc) {
                const fullText = desc.querySelector('.description-full');
                fullText.classList.add('show');
            }
        });
    </script>


    <script>
        function switchTab(tabName) {
            const tabs = document.querySelectorAll('.tab');
            const contents = document.querySelectorAll('.tab-content');

            tabs.forEach(tab => tab.classList.remove('active'));
            contents.forEach(content => content.classList.remove('active'));

            event.target.classList.add('active');
            document.getElementById(tabName).classList.add('active');
        }
    </script>

    <script>
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.category-checkbox');
        const bulkActions = document.getElementById('bulkActions');

        // Toggle buttons visibility
        function toggleBulkActions() {
            const anyChecked = [...checkboxes].some(cb => cb.checked);
            bulkActions.classList.toggle('d-none', !anyChecked);
        }

        // Select All checkbox
        selectAll?.addEventListener('change', function() {
            checkboxes.forEach(cb => cb.checked = this.checked);
            toggleBulkActions();
        });

        // Individual checkbox change
        checkboxes.forEach(cb => {
            cb.addEventListener('change', () => {
                selectAll.checked = [...checkboxes].every(c => c.checked);
                toggleBulkActions();
            });
        });

        // Delete Role
        document.querySelectorAll('.delete-role-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const id = this.dataset.id;
                const form = document.getElementById('deleteRoleForm');
                form.action = "{{ route('backend.user-management.destroy', ':id') }}".replace(':id', id);
            });
        });

        document.querySelector('.delete-btn').addEventListener('click', function() {
            const form = document.getElementById('deleteRoleForm');
            if (form.action) {
                form.submit();
            }
        });

        // Search Filter
        document.getElementById('searchInput').addEventListener('input', function() {
            const val = this.value.toLowerCase();
            document.querySelectorAll('#categoryList tr').forEach(row => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(val) ? '' : 'none';
            });
        });

        // Status Filter
        document.getElementById('statusFilter').addEventListener('change', function() {
            const val = this.value;
            document.querySelectorAll('#categoryList tr').forEach(row => {
                const status = row.dataset.status;
                row.style.display = (val === '' || status === val) ? '' : 'none';
            });
        });
    </script>
@endsection