@extends('layouts.app')
@section('title', 'Bangladesh Unbound - Users Management')
@section('page-title', 'Users Management')
@section('breadcrumb')
    <!-- Breadcrumb Navigation -->
    <nav class="breadcrumb-container" aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ route('admin.dashboard') }}">
                    <img src="{{ asset('backend/img/ico/ico-dashboard.svg') }}" alt="Dashboard" class="breadcrumb-icon">
                    Dashboard
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <img src="{{ asset('backend/img/ico/ico-users.svg') }}" alt="Users" class="breadcrumb-icon">
                Users Management
            </li>
        </ol>
    </nav>
@endsection
@section('content')
    <!-- Users Management Header -->
    <div class="users-header">
        <div class="d-flex align-items-center justify-content-between">
            <h3 class="mb-0 section-title">
                <img src="{{ asset('backend/img/ico/ico-users.svg') }}" alt="Users" class="section-icon">
                Users Management
            </h3>
            @can('user-create')
            <button class="btn btn-add-user" data-bs-toggle="modal" data-bs-target="#addUserModal">
                <img src="{{ asset('backend/img/ico/ico-profile.svg') }}" alt="Add"> Add New User
            </button>
            @endcan
        </div>
    </div>

    <!-- Users Tabs -->
    <div class="users-tabs-container">
        <ul class="nav nav-tabs users-tabs" id="usersTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="admins-tab" data-bs-toggle="tab" data-bs-target="#admins" type="button"
                    role="tab">
                    <img src="{{ asset('backend/img/ico/ico-dashboard.svg') }}" alt="Admin" class="tab-icon">
                    Administrators <span class="tab-count">
                        {{ $admins->count() }}
                    </span>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="guides-tab" data-bs-toggle="tab" data-bs-target="#guides" type="button"
                    role="tab">
                    <img src="{{ asset('backend/img/ico/ico-ongoing.svg') }}" alt="Guides" class="tab-icon">
                    Team Leaders & Guides <span class="tab-count">{{ $guides->count() }}</span>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="customers-tab" data-bs-toggle="tab" data-bs-target="#customers" type="button"
                    role="tab">
                    <img src="{{ asset('backend/img/ico/ico-profile.svg') }}" alt="Customers" class="tab-icon">
                    Customers <span class="tab-count">{{ $customers->count() }}</span>
                </button>
            </li>
        </ul>
    </div>

    <!-- Tab Content -->
    <div class="tab-content users-tab-content" id="usersTabContent">

        <!-- Administrators Tab -->
        @include('admin.user.partials.administration-tab-content')

        <!-- Team Leaders & Guides Tab -->
        @include('admin.user.partials.guide-tab-content')

        <!-- Customers Tab -->
        @include('admin.user.partials.customer-tab-content')
    </div>

    @include('admin.user.partials.user-create-modal')
    @include('admin.user.partials.user-edit-modal')
    @include('admin.user.partials.user-view-modal')
    @include('admin.user.partials.customer-edit-modal')
    @include('admin.user.partials.customer-view-modal')
@endsection
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('addUserForm');
            const submitBtn = document.getElementById('saveUserBtn');


            // Clear previous errors
            function clearErrors() {
                form.querySelectorAll('.error-message').forEach(el => el.remove());
            }

            function showError(input, message) {
                if (!input) return; // Skip errors for fields not present in the form
                let errorEl = input.parentElement.querySelector('.error-message');
                if (!errorEl) {
                    errorEl = document.createElement('div');
                    errorEl.classList.add('error-message', 'text-danger', 'mt-1');
                    input.parentElement.appendChild(errorEl);
                }
                errorEl.textContent = message;
            }

            // Handle Add User
            submitBtn.addEventListener('click', function() {
                clearErrors();
                const originalText = submitBtn.innerHTML;
                submitBtn.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span> Adding...';
                submitBtn.disabled = true;

                const formData = new FormData(form);

                axios.post("{{ route('admin.users.store') }}", formData)
                    .then(response => {
                        const data = response.data;
                        if (data.success) {
                            swal.fire({
                                icon: 'success',
                                title: 'User Added',
                                text: data.message || 'User has been added successfully.'
                            }).then(() => {
                                bootstrap.Modal.getInstance(document.getElementById(
                                    'addUserModal')).hide();
                                form.reset();
                                teamNameRow.style.display = 'none';
                                location.reload();
                            });
                        } else {
                            // Show validation errors
                            if (data.errors) {
                                Object.keys(data.errors).forEach(field => {
                                    const input = form.querySelector(`[name="${field}"]`);
                                    showError(input, data.errors[field][0]);
                                });
                            } else {
                                swal.fire({
                                    icon: 'error',
                                    title: 'Failed',
                                    text: data.message || 'Something went wrong!'
                                });
                            }
                        }
                    })
                    .catch(error => {
                        if (error.response?.data?.errors) {
                            const errors = error.response.data.errors;
                            Object.keys(errors).forEach(field => {
                                const input = form.querySelector(`[name="${field}"]`);
                                showError(input, errors[field][0]);
                            });
                        } else {
                            swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: error.message
                            });
                        }
                    })
                    .finally(() => {
                        submitBtn.innerHTML = originalText;
                        submitBtn.disabled = false;
                    });
            });

            // Reset modal on close
            document.getElementById('addUserModal').addEventListener('hidden.bs.modal', function() {
                form.reset();
                teamGuideTypeSelect.removeAttribute('required');
                teamNameRow.style.display = 'none';
                teamNameInput.removeAttribute('required');
                clearErrors();
            });
        });
    </script>

    {{-- Edit User Modal --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const editUserModal = document.getElementById("editUserModal");
            const editUserForm = document.getElementById("editUserForm");
            const saveBtn = document.getElementById("editSaveUserBtn");

            // Open Edit Modal + Prefill User Data
            document.querySelectorAll(".btn-edit-user-table").forEach(btn => {
                btn.addEventListener("click", function(e) {
                    e.preventDefault();

                    const userId = this.getAttribute("data-id");

                    axios.get(`/admin/users/${userId}/edit`)
                        .then(response => {
                            const user = response.data.data.query;

                            document.getElementById("editUserFName").value = user.first_name ??
                                '';
                            document.getElementById("editUserLName").value = user.last_name ??
                                '';
                            document.getElementById("editUserEmail").value = user.email ?? '';
                            document.getElementById("editUserPhone").value = user.phone ?? '';
                            document.getElementById("editUserRole").value = user.roles[0]
                                ?.name ?? '';
                            document.getElementById("editUserAddress").value = user.user_details
                                ?.address ?? '';
                            document.getElementById("editUserCountry").value = user.user_details
                                ?.country_id ?? '';
                            document.getElementById("editIsTourGuide").checked = (user
                                .is_tour_guide == 1);
                            document.getElementById("editIsActive").checked = (user.is_active ==
                                1);

                            // Hidden field for user ID
                            let hiddenId = document.getElementById("editUserId");
                            if (!hiddenId) {
                                hiddenId = document.createElement("input");
                                hiddenId.type = "hidden";
                                hiddenId.id = "editUserId";
                                hiddenId.name = "id";
                                editUserForm.appendChild(hiddenId);
                            }
                            hiddenId.value = user.id;
                        })
                        .catch(error => {
                            toastr.error(error.message || "Failed to fetch user.");
                        });
                });
            });

            // Handle Save
            saveBtn.addEventListener("click", function() {
                clearErrors();

                const originalText = saveBtn.innerHTML;
                saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Saving...';
                saveBtn.disabled = true;

                const formData = new FormData(editUserForm);
                formData.append('_method', 'PUT'); // Laravel expects PUT for update
                const userId = document.getElementById("editUserId").value;

                axios.post(`/admin/users/${userId}`, formData, {
                        headers: {
                            "Content-Type": "multipart/form-data"
                        }
                    })
                    .then(response => {
                        if (response.data.success) {
                            toastr.success("User updated successfully!");
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            toastr.error(response.data.message || "Failed to update user.");
                        }
                    })
                    .catch(error => {
                        if (error.response?.data?.errors) {
                            const errors = error.response.data.errors;
                            Object.keys(errors).forEach(field => {
                                const input = editUserForm.querySelector(`[name="${field}"]`);
                                showError(input, errors[field][0]);
                            });
                        } else {
                            toastr.error(error.message || "Failed to update user.");
                        }
                    })
                    .finally(() => {
                        saveBtn.innerHTML = originalText;
                        saveBtn.disabled = false;
                    });
            });

            // Reset modal on close
            editUserModal.addEventListener("hidden.bs.modal", function() {
                editUserForm.reset();
                clearErrors();
            });

            // Clear previous errors
            function clearErrors() {
                editUserForm.querySelectorAll('.error-message').forEach(el => el.remove());
            }

            // Show validation error
            function showError(input, message) {
                if (!input) return;
                let errorEl = input.parentElement.querySelector('.error-message');
                if (!errorEl) {
                    errorEl = document.createElement('div');
                    errorEl.classList.add('error-message', 'text-danger', 'mt-1');
                    input.parentElement.appendChild(errorEl);
                }
                errorEl.textContent = message;
            }
        });
    </script>

    <script>
        // View User Function
        document.querySelectorAll(".btn-view-user-table").forEach(btn => {
            btn.addEventListener("click", function(e) {
                e.preventDefault();

                const userId = this.getAttribute("data-id");

                axios.get(`/admin/users/${userId}/edit`)
                    .then(response => {
                        if (response.data.success) {
                            const user = response.data.data.query;

                            document.getElementById("viewUserFName").value = user.first_name ??
                                '';
                            document.getElementById("viewUserLName").value = user.last_name ??
                                '';
                            document.getElementById("viewUserEmail").value = user.email ?? '';
                            document.getElementById("viewUserPhone").value = user.phone ?? '';
                            document.getElementById("viewUserRole").value = user.roles[0]
                                ?.name ?? '';
                            document.getElementById("viewUserAddress").value = user.user_details
                                ?.address ?? '';
                            document.getElementById("viewUserCountry").value = user.user_details
                                ?.country?.name ?? '';
                            document.getElementById("viewIsTourGuide").checked = (user
                                .is_tour_guide == 1);
                            document.getElementById("viewIsActive").checked = (user.is_active ==
                                1);

                            // Modal show করা
                            let viewModal = new bootstrap.Modal(document.getElementById(
                                'viewUserModal'));
                            viewModal.show();
                        } else {
                            toastr.error(response.data.message || "Failed to fetch user details");
                        }
                    })
                    .catch(error => {
                        console.error(error);
                        toastr.error("Something went wrong while loading user data.");
                    });
            });
        });
    </script>


    {{-- Edit Customer Modal --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const editUserModal = document.getElementById("editCustomerModal");
            const editUserForm = document.getElementById("editCustomerForm");
            const saveBtn = document.getElementById("editSaveCustomerBtn");

            // Open Edit Modal + Prefill User Data
            document.querySelectorAll(".btn-edit-customer-table").forEach(btn => {
                btn.addEventListener("click", function(e) {
                    e.preventDefault();

                    const userId = this.getAttribute("data-id");

                    axios.get(`/admin/customers/${userId}/edit`)
                        .then(response => {
                            const user = response.data.data.query;

                            document.getElementById("editCustomerFName").value = user
                                .first_name ??
                                '';
                            document.getElementById("editCustomerLName").value = user
                                .last_name ??
                                '';
                            document.getElementById("editCustomerEmail").value = user.email ??
                                '';
                            document.getElementById("editCustomerPhone").value = user.phone ??
                                '';
                            document.getElementById("editCustomerAddress").value = user
                                .customer_details
                                ?.address ?? '';
                            document.getElementById("editCustomerCountry").value = user
                                .customer_details
                                ?.country_id ?? '';
                            document.getElementById("editCustomerIsActive").checked = (user
                                .is_active);

                            // Hidden field for user ID
                            let hiddenId = document.getElementById("editCustomerId");
                            if (!hiddenId) {
                                hiddenId = document.createElement("input");
                                hiddenId.type = "hidden";
                                hiddenId.id = "editCustomerId";
                                hiddenId.name = "id";
                                editUserForm.appendChild(hiddenId);
                            }
                            hiddenId.value = user.id;
                        })
                        .catch(error => {
                            toastr.error(error.message || "Failed to fetch user.");
                        });
                });
            });

            // Handle Save
            saveBtn.addEventListener("click", function() {
                clearErrors();

                const originalText = saveBtn.innerHTML;
                saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Saving...';
                saveBtn.disabled = true;

                const formData = new FormData(editUserForm);
                formData.append('_method', 'PUT'); // Laravel expects PUT for update
                const userId = document.getElementById("editCustomerId").value;

                axios.post(`/admin/customers/${userId}`, formData, {
                        headers: {
                            "Content-Type": "multipart/form-data"
                        }
                    })
                    .then(response => {
                        if (response.data.success) {
                            toastr.success("Customer updated successfully!");
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            toastr.error(response.data.message || "Failed to update user.");
                        }
                    })
                    .catch(error => {
                        if (error.response?.data?.errors) {
                            const errors = error.response.data.errors;
                            Object.keys(errors).forEach(field => {
                                const input = editUserForm.querySelector(`[name="${field}"]`);
                                showError(input, errors[field][0]);
                            });
                        } else {
                            toastr.error(error.message || "Failed to update customer.");
                        }
                    })
                    .finally(() => {
                        saveBtn.innerHTML = originalText;
                        saveBtn.disabled = false;
                    });
            });

            // Reset modal on close
            editUserModal.addEventListener("hidden.bs.modal", function() {
                editUserForm.reset();
                clearErrors();
            });

            // Clear previous errors
            function clearErrors() {
                editUserForm.querySelectorAll('.error-message').forEach(el => el.remove());
            }

            // Show validation error
            function showError(input, message) {
                if (!input) return;
                let errorEl = input.parentElement.querySelector('.error-message');
                if (!errorEl) {
                    errorEl = document.createElement('div');
                    errorEl.classList.add('error-message', 'text-danger', 'mt-1');
                    input.parentElement.appendChild(errorEl);
                }
                errorEl.textContent = message;
            }
        });
    </script>

    <script>
        // View Customer Function
        document.querySelectorAll(".btn-view-customer-table").forEach(btn => {
            btn.addEventListener("click", function(e) {
                e.preventDefault();

                const userId = this.getAttribute("data-id");

                axios.get(`/admin/customers/${userId}/edit`)
                    .then(response => {
                        if (response.data.success) {
                            const user = response.data.data.query;

                            document.getElementById("viewCustomerFName").value = user.first_name ??
                                '';
                            document.getElementById("viewCustomerLName").value = user.last_name ??
                                '';
                            document.getElementById("viewCustomerEmail").value = user.email ?? '';
                            document.getElementById("viewCustomerPhone").value = user.phone ?? '';
                            document.getElementById("viewCustomerAddress").value = user.customer_details
                                ?.address ?? '';
                            document.getElementById("viewCustomerCountry").value = user.customer_details
                                ?.country?.name ?? '';
                            document.getElementById("viewCustomerIsActive").checked = (user.is_active);

                            let viewModal = new bootstrap.Modal(document.getElementById(
                                'viewCustomerModal'));
                            viewModal.show();
                        } else {
                            toastr.error(response.data.message || "Failed to fetch user details");
                        }
                    })
                    .catch(error => {
                        console.error(error);
                        toastr.error("Something went wrong while loading user data.");
                    });
            });
        });
    </script>



    <script>
        document.addEventListener('DOMContentLoaded', function() {


            // Handle User Role change to show/hide Team/Guide Type dropdown and Team Name input
            const userRoleSelect = document.getElementById('userRole');
            const teamGuideTypeRow = document.getElementById('teamGuideTypeRow');
            const teamGuideTypeSelect = document.getElementById('teamGuideType');
            const teamNameRow = document.getElementById('teamNameRow');
            const teamNameInput = document.getElementById('teamName');

            userRoleSelect.addEventListener('change', function() {
                const selectedRole = this.value;

                if (selectedRole === 'guide') {
                    // Show the Team/Guide type dropdown only for Guide role
                    teamGuideTypeRow.style.display = 'block';
                    teamGuideTypeSelect.setAttribute('required', 'required');

                    // Hide team name input
                    teamNameRow.style.display = 'none';
                    teamNameInput.removeAttribute('required');
                    teamNameInput.value = '';

                    // Update label for guide role
                    const label = teamGuideTypeRow.querySelector('label');
                    label.innerHTML =
                        '<i class="bi bi-person-badge text-success me-2"></i>Select Guide Type';
                } else if (selectedRole === 'team-leader') {
                    // Hide the guide type dropdown
                    teamGuideTypeRow.style.display = 'none';
                    teamGuideTypeSelect.removeAttribute('required');
                    teamGuideTypeSelect.value = '';

                    // Show the team name input for Team Leader role
                    teamNameRow.style.display = 'block';
                    teamNameInput.setAttribute('required', 'required');
                } else {
                    // Hide both fields for all other roles
                    teamGuideTypeRow.style.display = 'none';
                    teamGuideTypeSelect.removeAttribute('required');
                    teamGuideTypeSelect.value = '';

                    teamNameRow.style.display = 'none';
                    teamNameInput.removeAttribute('required');
                    teamNameInput.value = '';
                }
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const TAB_STORAGE_KEY = 'usersTabsActive';
            const tabsContainer = document.getElementById('usersTabs');

            if (!tabsContainer) return;

            // Restore last active tab
            const savedTarget = sessionStorage.getItem(TAB_STORAGE_KEY);
            if (savedTarget) {
                const triggerEl = document.querySelector(`[data-bs-target="${savedTarget}"]`);
                if (triggerEl) {
                    const tab = new bootstrap.Tab(triggerEl);
                    tab.show();
                }
            }

            // Persist on tab change
            tabsContainer.addEventListener('shown.bs.tab', function(event) {
                const target = event.target?.getAttribute('data-bs-target');
                if (target) sessionStorage.setItem(TAB_STORAGE_KEY, target);
            });
        });
    </script>
@endpush