@extends('layouts.app')

@section('title', 'User Master')


@section('content')
<div class="container">
    <!-- Create User Button -->
    <div class="mb-3">
        <div class="row align-items-end">
            <div class="col-md-4">
                <label for="user_type" class="form-label">User Type</label>
                <select id="user_type" name="user_type" class="form-select custom-select">
                    <option value="" >All Type User</option>
                    <option value="1">Admin</option>
                    <option value="2">Company Admin</option>
                    <option value="3">User</option>
                </select>
            </div>
            <div class="col-md-4">
                <label for="user_status" class="form-label">User Status</label>
                <select id="user_status" name="user_status" class="form-select custom-select">
                    <option value="" >All Status</option>
                    <option value="1">Active</option>
                    <option value="2">Inactive</option>
                    <option value="3">Pending</option>
                </select>
            </div>
            <div class="col-md-4 text-end">
                <button type="button" class="btn btn-primary" id="create_user" data-bs-toggle="modal" data-bs-target="#createUserModal">
                    Create User
                </button>
            </div>
        </div>
    </div>
    <!-- User Data Card -->
    <div class="card">
        <div class="card-body">
            <table id="datatable" class="table dt-responsive table-striped nowrap w-100">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Mobile</th>
                        <th>User Type</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- DataTables will populate this section -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Create User Modal -->
<div class="modal fade" id="createUserModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userModalLabel">Create New User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="userForm" enctype="multipart/form-data">
                    <input type="hidden" id="userId" name="id">
                    <div class="text-center mb-4 position-relative">
                        <label for="userLogoFile" class="form-label" style="border: 2px solid black; padding: 5px; border-radius: 50%; display: inline-block; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);">
                            <img src="{{ asset('assets/images/profile.png') }}" alt="User Logo" class="img-fluid rounded-circle" id="logoPreview" style="width: 100px; height: 100px; object-fit: cover; cursor: pointer;">
                            <span id="removeLogo" class="position-absolute translate-middle" style="cursor: pointer; display: none; z-index: 10; font-size: 1.5rem; color: black;">&times;</span>
                        </label>
                        <input type="file" class="form-control mt-2" id="userLogoFile" name="user_logo" accept="image/*" style="display: none;">
                        <p class="form-label">Please click on the image above to upload your Logo.</p>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="firstname" class="form-label">First Name</label>
                            <input type="text" class="form-control" id="firstname" name="firstname"
                                placeholder="Enter first name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="lastname" class="form-label">Last Name</label>
                            <input type="text" class="form-control" id="lastname" name="lastname"
                                placeholder="Enter last name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Enter email"
                                required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="mobile_no" class="form-label">Mobile No</label>
                            <input type="text" class="form-control" id="mobile_no" name="mobile_no"
                                placeholder="Enter mobile number" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex justify-content-between">
                            <label for="wp_no" class="form-label">Whatsapp No</label>
                                <div>
                                    <input class="form-check-input" type="checkbox" id="sameAsMobile" name="sameAsMobile">
                                        <label class="form-check-label" for="sameAsMobile" style="font-weight: 300;">
                                            Same as Mobile No
                                        </label>
                                </div>
                            </div>
                            <input type="text" class="form-control" id="wp_no" name="wp_no"
                                placeholder="Enter Whatsapp number" required>
                        </div>
                        <div class="row col-md-6 mb-3 d-flex">
                            <label for="house_no" class="form-label">Address Line 1</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" id="house_no" name="house_no" placeholder="house no">
                            </div>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="add1" name="add1" placeholder="Enter address line 1">
                            </div>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="add2" class="form-label">Address Line 2</label>
                            <input type="text" class="form-control" id="add2" name="add2"
                                placeholder="Enter address line 2">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="area" class="form-label">Area</label>
                            <input type="text" class="form-control" id="area" name="area" placeholder="Enter area">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="pincode" class="form-label">Pincode</label>
                            <input type="text" class="form-control" id="pincode" name="pincode"
                                placeholder="Enter pincode">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="country" class="form-label">Country</label>
                            <select id="country" name="country" class="form-select" required>
                                <option value=""  selected>Select country</option>
                                <!-- Populate this with countries dynamically if needed -->
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="state" class="form-label">State</label>
                            <select id="state" name="state" class="form-select" required>
                                <option value="" disabled selected>Select state</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="city" class="form-label">City</label>
                            <select id="city" name="city" class="form-select" required>
                                <option value="" disabled selected>Select city</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select id="statuss" name="status" class="form-select" required>
                                <option value="1">Active</option>
                                <option value="2">Inactive</option>
                                <option value="3">Pending</option>
                            </select>
                        </div>
                         <div class="col-md-6 mb-3">
                             <label for="company_id" class="form-label">Company</label>
                                <select id="company_id" name="company_id" class="form-select" required>
                                    @if (Auth::user()->type == 2)
                                        <option value="{{ Auth::user()->company_id }}" selected>{{ Auth::user()->company->name }}</option>
                                    @else
                                        <option value="" disabled selected>Select Company</option>
                                    @endif
                                </select>

                        </div>
                        <div class="col-md-6 mb-3">
                            @if (Auth::user()->type == 2)
                                <label for="type" class="form-label">User Type</label>
                                <select id="type" name="type" class="form-select" required>
                                    <option value="3" selected>User</option>
                                </select>
                            @else
                                <label for="type" class="form-label">User Type</label>
                                <select id="type" name="type" class="form-select" required>
                                        <option value="2">Company Admin</option>
                                        <option value="3">User</option>
                                </select>
                            @endif
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveUserBtn">Save User</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('styles')
<style>
    /* Align DataTables search box to the right */
    .dataTables_filter {
        text-align: right;
    }

    /* Ensure the input is aligned properly */
    .dataTables_filter input {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
</style>
@endsection

@section('scripts')
<meta name="csrf-token" content="{{ csrf_token() }}">

<script type="text/javascript">
    var searchCountrylist = '{{route("search.countrylist")}}';
    var searchStatelist = '{{route("search.statelist")}}';
    var searchCitylist = '{{route("search.citylist")}}';
    var userSave = '{{route("user.save")}}';
    var userAjax = '{{ route("user.ajax") }}';
    var userGet = '{{ route("user.get") }}';
    var userDelete = '{{ route("user.delete") }}';
    var searchCompanylist = '{{route("search.companylist")}}';

    var csrfToken = $('meta[name="csrf-token"]').attr('content');

    $(document).ready(function() {

        let logoUploaded = false; // Flag to track logo upload status

    $('#userLogoFile').on('change', function(event) {
        const file = event.target.files[0];
        const validImageTypes = ['image/jpeg', 'image/png', 'image/gif'];
        const maxSize = 2 * 1024 * 1024; // 2 MB

        // Clear previous error messages if any
        $('#userLogoFile').removeClass('is-invalid');
        $('#userLogoFile').next('.error-message').remove();

        if (file) {
            // Validate file type and size
            if (!validImageTypes.includes(file.type)) {
                Swal.fire({
                    icon: 'error',
                    title: 'Invalid Image',
                    text: 'Please upload a valid image file (JPEG, PNG, GIF) with size less than 2MB.',
                });
                $('#userLogoFile').val(''); // Reset file input
                $('#logoPreview').attr('src', '{{ asset('assets/images/profile.png') }}'); // Reset preview
                $('#removeLogo').hide(); // Hide remove icon
                logoUploaded = false; // Reset upload flag
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                $('#logoPreview').attr('src', e.target.result);
                $('#removeLogo').show(); // Show the remove icon
                logoUploaded = true; // Set the flag to true
            };
            reader.readAsDataURL(file);
        }
    });

    $('#sameAsMobile').on('change', function () {
        if ($(this).is(':checked')) {
            $('#wp_no').val($('#mobile_no').val()).prop('readonly', true);
        } else {
            $('#wp_no').prop('readonly', false);
        }
    });
    $('#mobile_no').on('input', function () {
        if ($('#sameAsMobile').is(':checked')) {
            $('#wp_no').val($(this).val());
        }
    });
    $('#removeLogo').on('click', function(event) {
        event.preventDefault();
        $('#logoPreview').attr('src', '{{ asset('assets/images/profile.png') }}'); // Reset to default image
        $('#userLogoFile').val(''); // Clear the file input
        $(this).hide(); // Hide remove icon
        logoUploaded = false; // Reset upload flag

        // Show the error message again if the image is removed
        $('#userLogoFile').addClass('is-invalid');
        $('#userLogoFile').after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">Please upload a logo image.</div>');
    });
            
        function validateField($field) {
            let isValid = true;
            // Clear previous errors for the field
            $field.removeClass('is-invalid');
            $field.next('.error-message').remove();

            switch ($field.attr('id')) {

                case 'userLogoFile':
                const fileInput = $field[0];
                 if (logoUploaded) {
                    $field.removeClass('is-invalid');
                    break;
                }
                if (fileInput.files.length === 0) {
                    // No file selected
                    $field.addClass('is-invalid');
                    $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">Please upload a logo image.</div>');
                    isValid = false;
                } else {
                    const file = fileInput.files[0];
                    const validImageTypes = ['image/jpeg', 'image/png', 'image/gif'];
                    if (!validImageTypes.includes(file.type)) {
                        // Invalid file type
                        $field.addClass('is-invalid');
                        $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">Please upload a valid image (JPG, PNG, GIF).</div>');
                        isValid = false;
                    } else if (file.size > 5 * 1024 * 1024) {  // Limit size to 5MB
                        // File size exceeds 5MB
                        $field.addClass('is-invalid');
                        $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">File size should be less than 5MB.</div>');
                        isValid = false;
                    } else {
                        $field.removeClass('is-invalid'); // Remove invalid class if validation passes
                    }
                }
                break;
                case 'firstname':
                if ($field.val().trim() === '' || $field.val().length < 2) {
                    $field.addClass('is-invalid');
                    if ($field.next('.error-message').length === 0) {
                        $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">First name must be at least 2 characters long.</div>');
                    }
                    isValid = false;
                } else {
                   
                    $field.removeClass('is-invalid');
                    
                    
                }
                    break;

                case 'lastname':
                    if ($field.val().trim() === '' || $field.val().length < 2) {
                        $field.addClass('is-invalid');
                        $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">Last name must be at least 2 characters long.</div>');
                        isValid = false;
                    }else {
                    $field.removeClass('is-invalid');
                    }
                    break;

                case 'email':
                    let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (!emailPattern.test($field.val())) {
                        $field.addClass('is-invalid');
                        $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">Please enter a valid email address.</div>');
                        isValid = false;
                    }else {
                    $field.removeClass('is-invalid');
                    }
                    break;

                case 'mobile_no':
                    let mobilePattern = /^\d{10,15}$/;
                    if (!mobilePattern.test($field.val())) {
                        $field.addClass('is-invalid');
                        $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">Mobile number must be between 10 and 15 digits.</div>');
                        isValid = false;
                    }else {
                    $field.removeClass('is-invalid');
                    }
                    break;

                case 'wp_no':
                    if (!$('#sameAsMobile').is(':checked')) {
                        let mobilePatterns = /^\d{10,15}$/;
                        if (!mobilePatterns.test($field.val())) {
                            $field.addClass('is-invalid');
                            $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">Whatsapp number must be between 10 and 15 digits.</div>');
                            isValid = false;
                        }else {
                        $field.removeClass('is-invalid');
                        }
                    }
                   break;
                case 'house_no':
                    if ($field.val().trim() === '') {
                        $field.addClass('is-invalid');
                        $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">House number is required.</div>');
                        isValid = false;
                    }else {
                    $field.removeClass('is-invalid');
                    }

                    break;

                case 'add1':
                case 'add2':
                    if ($field.val().trim() === '' || $field.val().length < 5) {
                        $field.addClass('is-invalid');
                        $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">Address line must be at least 5 characters long.</div>');
                        isValid = false;
                    }else {
                    $field.removeClass('is-invalid');
                    }
                    break;

                case 'area':
                    if ($field.val().trim() === '') {
                        $field.addClass('is-invalid');
                        $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">Area is required.</div>');
                        isValid = false;
                    }else {
                    $field.removeClass('is-invalid');
                    }
                    break;

                case 'pincode':
                    let pincodePattern = /^\d{6}$/; // Assuming a 6-digit pincode
                    if (!pincodePattern.test($field.val())) {
                        $field.addClass('is-invalid');
                        $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">Pincode must be exactly 6 digits.</div>');
                        isValid = false;
                    }else {
                    $field.removeClass('is-invalid');
                    }
                    break;

                case 'country':
                case 'state':
                case 'city':
                    if ($field.val() === '' || $field.val() === null) {
                        $field.addClass('is-invalid');
                        $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">This field is required.</div>');
                        isValid = false;
                    }else {
                        $field.removeClass('is-invalid');
                    }
                    break;

                case 'status':
                case 'type':
                case 'company_id':
                    if ($field.val() === '' || $field.val() === null) {
                        $field.addClass('is-invalid');
                        $field.after('<div class="error-message" style="color: #dc3545; font-size: 0.875em; margin-top: 0.25rem;">This field is required.</div>');
                        isValid = false;
                    }else {
                        $field.removeClass('is-invalid');
                    }
                    break;
            }

            return isValid;
        }
         // Trigger validation on input blur (or keyup)
         $('#country, #state, #city, #company_id, #status, #type').on('change', function() {
            validateField($(this));
        });
        $('#firstname, #lastname, #email, #mobile_no, #wp_no, #house_no, #add1, #add2, #area, #pincode').on('blur keyup', function() {
            validateField($(this));
        });

        function validateForm() {
            let isValid = true;

            // Clear previous errors
            $(".form-control").removeClass('is-invalid');
            $(".error-message").remove();

            // Validate each field
            $("#userForm .form-control").each(function() {
                if (!validateField($(this))) {
                    isValid = false;
                }
            });

            return isValid;
        }

        // Trigger validation on form submit
        $("#userForm").on('submit', function(e) {
            if (!validateForm()) {
                e.preventDefault(); // Prevent form submission if validation fails
            }
        });

        function collectFormData() {
            return {
                id: $("#userId").val(),
                userLogoFile: logoUploaded ? $('#logoPreview').attr('src') : '',
                firstname: $("#firstname").val(),
                lastname: $("#lastname").val(),
                email: $("#email").val(),
                mobile_no: $("#mobile_no").val(),
                wp_no: $("#wp_no").val(),
                house_no: $("#house_no").val(),
                add1: $("#add1").val(),
                add2: $("#add2").val(),
                area: $("#area").val(),
                pincode: $("#pincode").val(),
                country: $("#country").val(),
                state: $("#state").val(),
                city: $("#city").val(),
                company_id: $("#company_id").val(),
                status: $("#statuss").val(),
                type: $("#type").val()
            };
        }

        // Save user using AJAX
        $("#saveUserBtn").on('click', function() {
            let isValid = validateForm();
            if (!isValid) {
                toastr.error('Enter data properly');
                return; // Stop further execution if validation fails
            }

            if (isValid) {
                let formData = collectFormData();

                $.ajax({
                    url: userSave,
                    type: 'POST',
                    contentType: 'application/json',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    data: JSON.stringify(formData),
                    success: function(response) {
                        $('#createUserModal').modal('hide');
                        toastr.success(response.message);
                        $('#datatable').DataTable().ajax.reload();
                    },
                    error: function(xhr, status, error) {
                        toastr.error('An error occurred while saving the user:', error);
                    }
                });
            } else {
                toastr.error('Enter data properly');
            }
        });
        let selectedStateId = null;
        let selectedCountryId = null;

        // Initialize Select2 for City
        $("#city").select2({
            ajax: {
                url: searchCitylist,
                dataType: 'json',
                method: 'POST',
                delay: 0,
                headers: {
                    'X-CSRF-TOKEN': csrfToken // Add CSRF token header
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        page: params.page,
                        state_id: selectedStateId, // Include selected state ID
                        country_id: selectedCountryId // Include selected country ID
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for a city',
            dropdownParent: $("#createUserModal .modal-body"),
        });

        $("#country").select2({
            ajax: {
                url: searchCountrylist,
                dataType: 'json',
                method: 'POST',
                delay: 0,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for a country',
            dropdownParent: $("#createUserModal .modal-body"),
            }).on('select2:select', function(e) {
            selectedCountryId = e.params.data.id; // Save selected country ID
            // Clear state and city selections when country changes
            $("#state").val(null).trigger('change');
            $("#city").val(null).trigger('change');
        });
        if ({{ Auth::user()->type }} == 1) {

          $("#company_id").select2({
            ajax: {
                url: searchCompanylist,
                dataType: 'json',
                method: 'POST',
                delay: 0,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
            data: function(params) {
                return {
                    q: params.term,
                    page: params.page
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;
                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: false
        },
            placeholder: 'Search for a company',
            dropdownParent: $("#createUserModal .modal-body"),
        });
    }
        $("#state").select2({
            ajax: {
                url: searchStatelist,
                dataType: 'json',
                method: 'POST',
                delay: 0,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: function(params) {
                    return {
                        q: params.term,
                        page: params.page,
                        country_id: selectedCountryId
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for a state',
            dropdownParent: $("#createUserModal .modal-body"),
            }).on('select2:select', function(e) {
            selectedStateId = e.params.data.id;
            $("#city").val(null).trigger('change');
        });

        var usersPageLength = 10;
        let viewAllClicked = false;
        
        if ($.fn.DataTable.isDataTable('#datatable')) {
            $('#datatable').DataTable().destroy();
        }

        // Initialize DataTable
        $('#user_type, #user_status').on('change', function () {
            $('#datatable').DataTable().ajax.reload();
        });

        $('#datatable').DataTable({
            "columnDefs": [
                { "orderable": true, "targets": 5 }
            ],
            "order": [[0, 'asc']],
            "processing": true,
            "serverSide": true,
            "pageLength": usersPageLength,
            "ajax": {
                "url": userAjax,
                "type": "GET",
                "data": function(d) {
                    return $.extend({}, d, {
                        "_token": csrfToken,
                        "user_type": $('#user_type').val(),
                        "user_status": $('#user_status').val()
                    });
                },
                "dataType": "json"
            },
            "columns": [
                { "data": "id" },
                { "data": "fname" },
                { "data": "lname" },
                { "data": "email" },
                { "data": "mobile" },
                { "data": "type" },
                { "data": "status" },
                { "data": "action", orderable: false, "searchable": false }
            ],
            "initComplete": function() {
                const $label = $('#datatable_filter label');
                const $searchInput = $('#datatable_filter input');

                // Remove the text node "Search:"
                $label.contents().filter(function() {
                    return this.nodeType === 3;
                }).remove();

                $searchInput
                    .addClass('form-control search-input')
                    .attr('placeholder', 'Search menu...');

                $searchInput.wrap('<div class="position-relative"></div>');
                $searchInput.after('<i class="bx bx-search-alt search-icon"></i>');
            },
            "drawCallback": function() {
                const $info = $('#datatable_info');
                 $('#viewAllLink').remove();

                 const linkHtml = ` &nbsp;|&nbsp; <a href="javascript:void(0);" id="viewAllLink">
                        ${viewAllClicked ? 'Show Less <i class="fas fa-chevron-up"></i>' : 'View All <i class="fas fa-chevron-right"></i>'}
                    </a>`;

                    $info.append(linkHtml);

                $('#viewAllLink').off('click').on('click', function () {
                    const table = $('#datatable').DataTable();

                    viewAllClicked = !viewAllClicked;

                    usersPageLength = viewAllClicked ? -1 : 10;

                    table.page.len(usersPageLength).draw(false);  // false = stay on current page
                });
            }
        });

        $(document).on('click', '.edit-btn', function() {

            var userId = $(this).data('id');
            $.ajax({
                url: userGet+'?id='+userId,
                method: 'GET',
                success: function(response) {
                    
                    $('#createUserModal #userId').val(response.data.id);
                    $('#createUserModal #firstname').val(response.data.first_name);
                    $('#createUserModal #lastname').val(response.data.last_name);
                    $('#createUserModal #email').val(response.data.email);
                    $('#createUserModal #mobile_no').val(response.data.phone_number);
                    $('#createUserModal #wp_no').val(response.data.whatsapp_number);
                   
                    $('#createUserModal #house_no').val(response.data.house_no);
                    $('#createUserModal #add1').val(response.data.address_line1);
                    $('#createUserModal #add2').val(response.data.address_line2);
                    $('#createUserModal #area').val(response.data.area);
                    $('#createUserModal #pincode').val(response.data.pincode);

                    if(response.data.userLogoFile && response.data.userLogoFile !== ''){
                        $('#logoPreview').attr('src',response.data.userLogoFile);
                        $('#removeLogo').attr('style','cursor: pointer;  z-index: 10; font-size: 1.5rem; color: black;');
                        logoUploaded = true;
                    }else {
                        $('#logoPreview').attr('src', '{{ asset('assets/images/profile.png') }}');
                        $('#removeLogo').attr('style', 'display: none;');
                        logoUploaded = false;
                    }
                 
                    $('#createUserModal #country').append('<option value=' + response.data.country_id + ' selected>' + response.data.country_name + '</option>');
                    $('#createUserModal #state').append('<option value=' + response.data.state_id + ' selected>' + response.data.state_name + '</option>');
                    $('#createUserModal #city').append('<option value=' + response.data.city_id + ' selected>' + response.data.city_name + '</option>');
                    $('#createUserModal #company_id').append('<option value=' + response.data.company_id + ' selected>' + response.data.company_name + '</option>');
                    $('#createUserModal #statuss').val(response.data.status);

                    if (response.data.type == 1) {
                        $('#createUserModal #type').append('<option value=' + response.data.type + ' selected>Admin</option>');
                        $('#createUserModal #type').prop('disabled', true);
                    } else {
                        $('#createUserModal #type').val(response.data.type);
                        $('#createUserModal #type').prop('disabled', false);
                        $('#createUserModal #type').find('option[value="1"]').remove();
                    }
                    $('#createUserModal #userModalLabel').text('Edit User #' + response.data.id);

                    // Show the modal
                    $('#createUserModal').modal('show');
                    validateForm();
                }
            });
        });

        $(document).on('click', '#create_user', function() {
            $('#userForm')[0].reset();
            $('#createUserModal #userId').val('');

            $('#createUserModal #type option[value="1"]').remove();

            $('#createUserModal #city').empty().trigger('change');
            $('#createUserModal #state').empty().trigger('change');
            $('#createUserModal #country').empty().trigger('change');
            $('#createUserModal #statuss').prop('selectedIndex', 0);
            $('#createUserModal #type').prop('selectedIndex', 0);

            $('#createUserModal #type').prop('disabled', false);

            $(".form-control").removeClass('is-invalid');
            $(".error-message").remove();
        });

        $(document).on('click', '.delete-btn', function(e) {
            e.preventDefault();

            var userId = $(this).data('id');

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Perform the delete request using jQuery
                    $.ajax({
                        url:userDelete+'?id='+userId,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            if (data.message === 'User deleted successfully') {
                                Swal.fire(
                                    'Deleted!',
                                    'User has been deleted.',
                                    'success'
                                );
                                // Reload the DataTable
                                $('#datatable').DataTable().ajax.reload();
                            } else {
                                Swal.fire(
                                    'Error!',
                                    'An error occurred while deleting the user.',
                                    'error'
                                );
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire(
                                'Error!',
                                'An unexpected error occurred.',
                                'error'
                            );
                        }
                    });
                }
            });
        });

    });
</script>

@endsection