@extends('layouts.admin')

@section('title', 'Business')
@section('breadcrumb_title', 'Business')
@section('breadcrumb_sub_title', 'List')
@section('page_title', 'Business')

@section('content')

    <div class="min-h-screen bg-gray-50">
        <div class="row mt-4">
            <div class="col-12">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <span class="alert-icon"><i class="ni ni-check-bold"></i></span>
                        <span class="alert-text">{{ session('success') }}</span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <span class="alert-icon"><i class="ni ni-bell-55"></i></span>
                        <span class="alert-text">{{ session('error') }}</span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <!-- Card header -->
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="mb-0">Businesses</h5>
                                <p class="text-sm mb-0">
                                    Manage all businesses.
                                </p>
                            </div>
                            <div>
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#CreateModal">
                                    <i class="fas fa-plus me-2"></i>Add New Business
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Filters Section -->
                    <div class="card-body border-bottom">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="status_filter" class="form-label">Status</label>
                                    <select class="form-control no-select2" id="status_filter">
                                        <option value="" selected>All Statuses</option>
                                        <option value="1">Active</option>
                                        <option value="0">Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <div class="form-group text-end">
                                    <button type="button" class="btn btn-primary" id="applyFilters">Apply Filters</button>
                                    <button type="button" class="btn btn-secondary" id="clearFilters">Clear
                                        Filters</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-flush" id="datatable-search">
                            <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Contact</th>
                                    <th>Address</th>
                                    <th>Logo</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="businesses-table-body">
                                <!-- Data will be loaded here via JavaScript -->
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Create Modal -->
    <div class="modal fade" id="CreateModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-gradient-primary">
                    <h5 class="modal-title text-white" id="CreateModalLabel">
                    <i class="fa-solid fa-building me-2"></i>Add New Business
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Close"></button>
                </div>

                <div class="create_view">
                    <form id="createBusinessForm" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="createBusinessName" class="form-label">Business Name <span
                                                class="text-danger">*</span></label>
                                        <input class="form-control" type="text" id="businessName"
                                            name="name" placeholder="Enter business name" />
                                        <small class="text-danger font-weight-bold err_name" style="display: none;"></small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="createBusinessEmail" class="form-label">Email <span
                                                class="text-danger">*</span></label>
                                        <input class="form-control" type="text" id="businessEmail" name="email"
                                            placeholder="Enter email" />
                                        <small class="text-danger font-weight-bold err_email" style="display: none;"></small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="createBusinessContact" class="form-label">Business Contact<span
                                                class="text-danger">*</span></label>
                                        <input class="form-control"  type="tel" id="businessContact" name="contact"
                                            placeholder="Enter Contact Number"
                                            maxlength="12"
                                            inputmode="numeric"
                                            oninput="this.value=this.value.startsWith('+')?'+'+this.value.slice(1).replace(/\D/g,'').slice(0,11):this.value.replace(/\D/g,'').slice(0,10)" />
                                        {{-- <small class="form-text text-muted">Format: 0XXXXXXXXX or +94XXXXXXXXX</small> --}}
                                        <small class="text-danger font-weight-bold err_contact" style="display: none;"></small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="createBusinessAddress" class="form-label">Business Address <span
                                                class="text-danger">*</span></label>
                                        <input class="form-control" type="text" id="businessAddress" name="address"
                                                placeholder="Enter Business Address" />
                                        <small class="text-danger font-weight-bold err_address" style="display: none;"></small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="createBusinessLogo" class="form-label">Business Logo</label>
                                        <input class="form-control" type="file" id="businessLogo" name="logo"
                                            accept="image/*" />
                                        <small class="text-muted d-block mt-1">Maximum file size: 2MB</small>
                                        <small class="text-danger font-weight-bold err_logod" style="display: none;"></small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <!-- Image Preview Container -->
                                    <div id="businessLogoPreview" class="mt-3">
                                        <div class="d-flex align-items-center">
                                            <img id="previewImage"
                                                src="https://projects-sl.s3.ap-south-2.amazonaws.com/ecorental/dzmhp5cIIxNL9Ouvob3wOpWTmmPWI1gV3Y79bjvq.png"
                                                alt="Profile Preview" class="rounded-circle"
                                                style="width: 80px; height: 80px; object-fit: cover; border: 2px solid #e9ecef;">
                                            <div class="ms-3">
                                                <h6 class="mb-1" id="previewTitle">Default Logo</h6>
                                                <small class="text-muted" id="previewSubtitle">Select a logo</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Status</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="createStatus"
                                                name="status" value="1" checked>
                                            <label class="form-check-label">
                                                Active
                                            </label>
                                            <small class="text-danger font-weight-bold err_status" style="display: none;"></small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm"
                                data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary btn-sm">Create Business</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Include Modals -->
    @include('admin.business.modals.view')
    @include('admin.business.modals.edit')
@endsection

@section('scripts')
    <!-- DataTables Script -->
    <script src="{{ asset('js/plugins/datatables.js') }}"></script>

    <style>
        .jconfirm .jconfirm-buttons .btn {
            width: 120px !important;
            min-width: 120px !important;
        }

        /* Set table font size */
        #datatable-search {
            font-size: 14px;
        }

        #datatable-search th {
            font-size: 10px;
            white-space: nowrap !important;
            padding-right: 25px !important;
            position: relative !important;
        }

        #datatable-search td {
            font-size: 14px;
            white-space: nowrap !important;
        }

        /* Fix DataTable sorting overlap */
        .dataTable-sorter {
            padding-right: 20px !important;
        }

        .dataTable-table th a {
            display: inline-block !important;
            padding-right: 20px !important;
            position: relative !important;
        }

        .dataTable-table th.dataTable-ascending a::after,
        .dataTable-table th.dataTable-descending a::after {
            position: absolute !important;
            right: 5px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
        }

        /* Prevent text overflow and overlap */
        .dataTable-table th,
        .dataTable-table td {
            overflow: visible !important;
            text-overflow: ellipsis !important;
        }

        /* Ensure proper column spacing */
        .dataTable-table thead th {
            padding: 12px 25px 12px 15px !important;
            vertical-align: middle !important;
        }

        .dataTable-table tbody td {
            padding: 10px 15px !important;
            vertical-align: middle !important;
        }

        /* Fix table header alignment */
        .dataTable-top,
        .dataTable-bottom {
            padding: 8px 10px !important;
        }

        /* Prevent sorting arrow overlap */
        .dataTable-sorter::before,
        .dataTable-sorter::after {
            right: 8px !important;
        }
        /* Prevent file name overflow in preview sections */
        #previewSubtitle,
        #updatePreviewSubtitle {
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Ensure parent container doesn't overflow */
        #businessLogoPreview .ms-3,
        #updateBusinessLogoPreview .ms-3 {
            flex: 1;
            min-width: 0;
            max-width: calc(100% - 100px);
        }
    </style>

    <script>
        $(document).ready(function() {
            let dataTable;
            let currentFilters = {};

            // Make loadBusinesses global so it can be called from anywhere
            window.loadBusinesses = function() {
                console.log('Loading Business with filters:', currentFilters);
                $.get('{{ route('admin.business.get-businesses-list') }}', currentFilters)
                    .done(function(response) {
                        console.log(response);
                        if (response.success) {
                            // Store current pagination settings before updating data
                            let currentPerPage = 10;
                            if (dataTable) {
                                currentPerPage = dataTable.options.perPage;
                            }

                            // Initialize DataTable if it doesn't exist
                            if (!dataTable) {
                                initializeDataTable();
                            }

                            // Update DataTable with new data
                            updateDataTableData(response.data, currentPerPage);
                        } else {
                            showError('Failed to load businesses');
                        }
                    })
                    .fail(function() {
                        showError('Error loading businesses');
                    });
            };

            // Load initial data
            window.loadBusinesses();

            function initializeDataTable() {
                // Initialize DataTable only once
                dataTable = new simpleDatatables.DataTable("#datatable-search", {
                    searchable: true,
                    fixedHeight: true,
                    perPage: 10,
                    perPageSelect: [5, 10, 15, 20, 25],
                    paging: true,
                    nextPrev: true,
                    firstLast: false,
                    columns: [
                        {
                            select: 0, // # - Sortable
                            sortable: true
                        },
                        {
                            select: 1, // Name - Sortable
                            sortable: true
                        },
                        {
                            select: 2, // Email - Sortable
                            sortable: true
                        },
                        {
                            select: 3, // Contact - Not sortable
                            sortable: false
                        },
                        {
                            select: 4, // Address - Sortable
                            sortable: true
                        },
                        {
                            select: 5, // Logo - Not sortable
                            sortable: false
                        },
                        {
                            select: 6, // Status - Not sortable
                            sortable: false
                        },
                        {
                            select: 7, // Actions - Not sortable
                            sortable: false
                        }
                    ],
                    labels: {
                        placeholder: "Search...",
                        perPage: "{select} entries per page",
                        noRows: "No entries found",
                        info: "Showing {start} to {end} of {rows} entries"
                    }
                });

                // Custom sort comparator using data-order attributes
                dataTable.on('datatable.sort', function(column, direction) {
                    const tbody = dataTable.table.tBodies[0];
                    const rows = Array.from(tbody.querySelectorAll('tr'));

                    rows.sort((rowA, rowB) => {
                        const cellA = rowA.cells[column];
                        const cellB = rowB.cells[column];

                        if (!cellA || !cellB) return 0;

                        // Get sort values from data-order attribute or text content
                        let valueA = cellA.getAttribute('data-order') || cellA.textContent.trim();
                        let valueB = cellB.getAttribute('data-order') || cellB.textContent.trim();

                        // Try to parse as numbers
                        const numA = parseFloat(valueA);
                        const numB = parseFloat(valueB);

                        if (!isNaN(numA) && !isNaN(numB)) {
                            // Numeric comparison
                            return direction === 'desc' ? numB - numA : numA - numB;
                        } else {
                            // String comparison
                            if (direction === 'desc') {
                                return valueB.toString().localeCompare(valueA.toString());
                            } else {
                                return valueA.toString().localeCompare(valueB.toString());
                            }
                        }
                    });

                    // Re-append rows in sorted order
                    rows.forEach(row => tbody.appendChild(row));
                });

                console.log('DataTable initialized');
            }

            function updateDataTableData(businesses, perPage) {
                if (dataTable) {
                    console.log('Updating DataTable with', businesses.length, 'items');

                    // Clear existing data
                    dataTable.rows().remove('all');

                    if (businesses.length === 0) {
                        // Show no data message
                        dataTable.setMessage('No businesses found.');
                        return;
                    }

                    // Convert charging points to DataTable format
                    const tableData = businesses.map((business, index) => {
                        const businessName = business.name || '';
                        const displayName = businessName.length > 20 ? businessName.substring(0, 20) + '...' : businessName;

                        // Action buttons
                        const actionButtons = `
                            <i class="fas fa-eye text-info me-3" style="cursor: pointer; font-size: 16px;"
                                title="View Details" onclick="viewBusiness(${business.id})"></i>
                            <i class="fas fa-edit text-success me-3" style="cursor: pointer; font-size: 16px;"
                                title="Edit" onclick="openEditModal(${business.id})"></i>
                            <i class="fas fa-trash text-danger" style="cursor: pointer; font-size: 16px;"
                                title="Delete" onclick="deleteConfirmation(${business.id})"></i>
                        `;

                        return [
                            String(index + 1),
                            business.name ?
                            '<div title="' + escapeHtml(business.name) + '" style="font-weight:600; cursor:pointer; text-transform: none;" onclick="goToDashboard(' + business.id + ')">'
                            + displayName
                            + '</div>' :
                            'N/A',
                            business.email ?
                            (business.email.length > 25 ?
                                business.email.substring(0, 25) + '...' :
                                business.email) :
                            'N/A',
                            business.contact ?
                            (business.contact.length > 25 ?
                                business.contact.substring(0, 25) + '...' :
                                business.contact) :
                            'N/A',
                            business.address ?
                            (business.address.length > 25 ?
                                business.address.substring(0, 25) + '...' :
                                business.address) :
                            'N/A',
                            business.logo_url ?
                            `<img src="${business.logo_url}" alt="Logo" style="width: 50px; height: 50px; object-fit: cover;" class="rounded" onerror="this.src='${window.location.origin}/img/business.png'">` :
                            `<img src="${window.location.origin}/img/business.png" alt="Default Logo" style="width: 50px; height: 50px; object-fit: cover;" class="rounded">`,
                            getStatusDisplay(business.status),
                            actionButtons
                        ];
                    });

                    // Insert new data
                    dataTable.insert({
                        data: tableData
                    });

                    console.log('DataTable updated successfully');
                }
            }

            function getStatusDisplay(status) {
                if (status === null || status === undefined) {
                    return 'N/A';
                }

                // Convert status to integer
                const statusValue = (status === true || status === 1 || status === '1') ? 1 : 0;

                // Map status values to labels and badge classes
                const statusMap = {
                    0: {
                        label: 'Inactive',
                        class: 'badge-warning'
                    },
                    1: {
                        label: 'Active',
                        class: 'badge-success'
                    }
                };

                const statusInfo = statusMap[statusValue];
                if (statusInfo) {
                    return `<span class="badge ${statusInfo.class}">${statusInfo.label}</span>`;
                }

                return 'N/A';
            }

            // Apply Filters button click handler
            $('#applyFilters').on('click', function() {
                const statusValue = $('#status_filter').val();

                // Build filters object
                currentFilters = {};

                if (statusValue !== '') {
                    currentFilters.status = statusValue;
                }

                console.log('Applying filters:', currentFilters);

                // Reload businesses with filters
                window.loadBusinesses();
            });

            // Clear Filters button click handler
            $('#clearFilters').on('click', function() {
                // Reset status filter dropdown to empty value
                $('#status_filter').val('').trigger('change');

                // Explicitly select the "All Statuses" option
                $('#status_filter option[value=""]').prop('selected', true);

                // Clear current filters
                currentFilters = {};

                console.log('Clearing filters - Resetting to All Statuses');

                // Reload all businesses without filters
                window.loadBusinesses();
            });
        });

        // Function to handle logo preview
        function businessLogoPreview(file) {
            var $logoInput = $('#businessLogo');
            // Find error element - it's in the same mb-3 container as the input
            var $errorElement = $logoInput.closest('.mb-3').find('.err_logod');

            // If not found, try searching in the create form
            if ($errorElement.length === 0) {
                $errorElement = $('#createBusinessForm').find('.err_logod');
            }

            // Clear previous errors
            if ($errorElement.length > 0) {
                $errorElement.text('').hide();
            }
            $logoInput.removeClass('border-danger is-invalid');

            if (file) {
                // Validate file type
                if (!file.type.match('image.*')) {
                    if ($errorElement.length > 0) {
                        $errorElement.text('Please select an image file').show();
                    }
                    $logoInput.addClass('border-danger is-invalid');
                    $logoInput.val('');
                    return;
                }

                // Validate file size (2MB = 2 * 1024 * 1024 bytes)
                if (file.size > 2 * 1024 * 1024) {
                    if ($errorElement.length > 0) {
                        $errorElement.text('File size must be less than 2MB').show();
                    }
                    $logoInput.addClass('border-danger is-invalid');
                    $logoInput.val('');
                    return;
                }

                // Read and display the image
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#previewImage').attr('src', e.target.result);
                    $('#previewTitle').text('Selected Logo');
                    $('#previewSubtitle').text(file.name);
                    // Clear any errors since file is valid
                    if ($errorElement.length > 0) {
                        $errorElement.text('').hide();
                    }
                    $logoInput.removeClass('border-danger is-invalid');
                };
                reader.readAsDataURL(file);
            } else {
                // Reset to default if no file selected
                $('#previewImage').attr('src', 'https://projects-sl.s3.ap-south-2.amazonaws.com/ecorental/dzmhp5cIIxNL9Ouvob3wOpWTmmPWI1gV3Y79bjvq.png');
                $('#previewTitle').text('Default Logo');
                $('#previewSubtitle').text('Select a logo');
            }
        }

        // Handle logo file selection and show preview
        $('#businessLogo').on('change', function(e) {
            const file = e.target.files[0];
            var $logoInput = $(this);

            // Clear logo error when file is selected (will be set again if validation fails)
            var $errorElement = $logoInput.closest('.mb-3').find('.err_logod');
            if ($errorElement.length === 0) {
                $errorElement = $('#createBusinessForm').find('.err_logod');
            }

            if ($errorElement.length > 0) {
                $errorElement.text('').hide();
            }
            $logoInput.removeClass('is-invalid border-danger');

            // Call preview function which will validate and show errors if needed
            businessLogoPreview(file);
        });

        // Handle click to remove image
        $('#businessLogoPreview').on('click', function() {
            // Only allow removal if a custom image is selected
            if ($('#previewTitle').text() === 'Selected Logo') {
                $('#businessLogo').val('');
                businessLogoPreview(null);
            }
        });

        // Clear form inputs when modal is closed
        $('#CreateModal').on('hidden.bs.modal', function() {
            // Reset form
            $('#createBusinessForm')[0].reset();

            // Clear all error messages and styling
            clearCreateError();

            // Reset logo preview to default
            $('#previewImage').attr('src', 'https://projects-sl.s3.ap-south-2.amazonaws.com/ecorental/dzmhp5cIIxNL9Ouvob3wOpWTmmPWI1gV3Y79bjvq.png');
            $('#previewTitle').text('Default Logo');
            $('#previewSubtitle').text('Select a logo');

            // Reset status checkbox to checked (default)
            $('#createStatus').prop('checked', true);

            // Re-enable button and restore original text
            $('#createBusinessForm').find('button[type="submit"]').prop('disabled', false).text('Create Business');
        });

        // Function to clear all error messages and styling
        function clearCreateError() {
            // Clear all error messages and hide them
            $('.err_name, .err_email, .err_contact, .err_address, .err_logod, .err_status').text('').hide();

            // Remove error styling from all form inputs
            $('#businessName, #businessEmail, #businessContact, #businessAddress, #businessLogo')
                .removeClass('is-invalid border-danger');

            // Remove error styling from status checkbox
            $('#createStatus').removeClass('border-danger');
            $('#createStatus').closest('.form-check').removeClass('border-danger');
        }

        // Clear errors when user starts typing
        $('#businessName, #businessEmail, #businessContact, #businessAddress').on('input', function() {
            const fieldName = $(this).attr('name');
            $('.err_' + fieldName).text('').hide();
            $(this).removeClass('is-invalid border-danger');
        });

        // Clear status error when checkbox is changed
        $('#createStatus').on('change', function() {
            $('.err_status').text('').hide();
            $(this).removeClass('border-danger');
            $(this).closest('.form-check').removeClass('border-danger');
        });

        $('#createBusinessForm').submit(function(e) {
            e.preventDefault();
            let formData = new FormData($('#createBusinessForm')[0]);

            var $submitBtn = $('#createBusinessForm').find('button[type="submit"]');

            // Handle checkbox value - if unchecked, set to 0
            if (!$('#createStatus').is(':checked')) {
                formData.set('status', '0');
            }

            $.ajax({
                type: "POST",
                beforeSend: function() {
                    $('#loader').show();
                    $submitBtn.prop('disabled', true);
                },
                url: "{{ route('admin.business.store') }}",
                data: formData,
                dataType: "JSON",
                contentType: false,
                cache: false,
                processData: false,
                success: function(response) {
                    $('#loader').hide();

                    if (response.status === true) {
                        // Keep button disabled on success as we're reloading
                        $submitBtn.prop('disabled', true);
                        $('#CreateModal').modal('hide');

                        $.confirm({
                            theme: 'modern',
                            columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                            title: 'Success!',
                            content: response.message || 'Business created successfully!',
                            type: 'green',
                            typeAnimated: true,
                            buttons: {
                                confirm: {
                                    text: 'OK',
                                    btnClass: 'btn-primary',
                                    action: function() {
                                        location.reload();
                                    }
                                }
                            }
                        });
                    } else {
                        // Re-enable button on error
                        $submitBtn.prop('disabled', false);
                        clearCreateError();

                        $.confirm({
                            theme: 'modern',
                            columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                            title: 'Error!',
                            content: response.message || 'Something went wrong!',
                            type: 'red',
                            typeAnimated: true,
                            buttons: {
                                confirm: {
                                    text: 'OK',
                                    btnClass: 'btn-danger'
                                }
                            }
                        });
                    }
                },
                statusCode: {
                    401: function() {
                        window.location.href = '{{ route('landing') }}';
                    },
                    419: function() {
                        window.location.href = '{{ route('landing') }}';
                    },
                },
                error: function(xhr, status, error) {
                    $('#loader').hide();
                    // Re-enable button on error
                    $submitBtn.prop('disabled', false);

                    console.log('AJAX Error:', xhr, status, error);
                    console.log('Response:', xhr.responseJSON);

                    if (xhr.status === 422) {
                        clearCreateError();
                        var response = xhr.responseJSON;
                        if (response && response.errors) {
                            $.each(response.errors, function(key, item) {
                                if (key) {
                                    const errorMessage = Array.isArray(item) ? item[0] : item;
                                    var $errorElement = $('.err_' + key);

                                    // Set error message and show it
                                    $errorElement.text(errorMessage).show();

                                    // Add error styling to form fields
                                    if (key === 'name') {
                                        $('#businessName').addClass('is-invalid border-danger');
                                    } else if (key === 'email') {
                                        $('#businessEmail').addClass('is-invalid border-danger');
                                    } else if (key === 'contact') {
                                        $('#businessContact').addClass('is-invalid border-danger');
                                    } else if (key === 'address') {
                                        $('#businessAddress').addClass('is-invalid border-danger');
                                    } else if (key === 'logo') {
                                        $('#businessLogo').addClass('is-invalid border-danger');
                                    } else if (key === 'status') {
                                        $('#createStatus').addClass('border-danger');
                                        $('#createStatus').closest('.form-check').addClass('border-danger');
                                    }
                                }
                            });
                        }
                    } else {
                        var errorMessage = 'Something went wrong!';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        $.confirm({
                            theme: 'modern',
                            columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                            title: 'Error!',
                            content: errorMessage,
                            type: 'red',
                            typeAnimated: true,
                            buttons: {
                                confirm: {
                                    text: 'OK',
                                    btnClass: 'btn-danger'
                                }
                            }
                        });
                    }
                }
            });
        });

        // Helper function to escape HTML
        function escapeHtml(text) {
            const map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            return text.replace(/[&<>"']/g, function(m) { return map[m]; });
        }

        // Function to change business session ID and open dashboard in new tab
        function goToDashboard(id) {
            // Open a new window with a loading message first (this must happen during user interaction)
            var newWindow = window.open('about:blank', '_blank');

            // Check if popup was blocked
            if (!newWindow || newWindow.closed || typeof newWindow.closed == 'undefined') {
                $.confirm({
                    theme: 'modern',
                    columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                    title: 'Error!',
                    content: 'Popup blocked! Please allow popups for this site.',
                    type: 'red',
                    typeAnimated: true,
                    buttons: {
                        confirm: {
                            text: 'OK',
                            btnClass: 'btn-danger'
                        }
                    }
                });
                return;
            }

            // Write loading message to the new window
            newWindow.document.write('<html><head><title>Loading...</title></head><body><div style="text-align:center;padding:50px;font-family:Arial;">Loading dashboard...</div></body></html>');
            newWindow.document.close();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var data = {
                'id': id
            }

            $.ajax({
                type: "POST",
                url: "{{ route('admin.business.move_dashboard') }}",
                data: data,
                dataType: "JSON",
                success: function(response) {
                    if (response.status == false) {
                        newWindow.close(); // Close the new tab if the operation failed
                        $.confirm({
                            theme: 'modern',
                            columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                            title: 'Error!',
                            content: response.message || 'Failed to change business session!',
                            type: 'red',
                            typeAnimated: true,
                            buttons: {
                                confirm: {
                                    text: 'OK',
                                    btnClass: 'btn-danger'
                                }
                            }
                        });
                    } else {
                        // Redirect the new tab to the dashboard URL using the named route
                        newWindow.location.href = "{{ route('business.dashboard') }}";
                    }
                },
                statusCode: {
                    401: function() {
                        if (newWindow) newWindow.close();
                        window.location.href = '{{ route('landing') }}';
                    },
                    419: function() {
                        if (newWindow) newWindow.close();
                        window.location.href = '{{ route('landing') }}';
                    },
                },
                error: function(xhr, status, error) {
                    if (newWindow) newWindow.close();
                    $.confirm({
                        theme: 'modern',
                        columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                        title: 'Error!',
                        content: 'Something went wrong while changing business session!',
                        type: 'red',
                        typeAnimated: true,
                        buttons: {
                            confirm: {
                                text: 'OK',
                                btnClass: 'btn-danger'
                            }
                        }
                    });
                }
            });
        }

        // View Business Details
        function viewBusiness(id) {
            $.ajax({
                url: `/eco_rental/business/${id}`,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.status) {
                        const business = response.data;

                        // Populate modal fields
                        $('#viewBusinessName').text(business.name || 'N/A');
                        $('#viewBusinessEmail').text(business.email || 'N/A');
                        $('#viewBusinessContact').text(business.contact || 'N/A');
                        $('#viewBusinessAddress').text(business.address || 'N/A');
                        $('#viewBusinessRefNo').text(business.ref_no || 'N/A');
                        $('#viewBusinessAuthKey').text(business.decrypted_auth_key || 'N/A');

                        // Set creator name
                        if (business.creator) {
                            const creatorName = business.creator.first_name && business.creator.last_name
                                ? `${business.creator.first_name} ${business.creator.last_name}`
                                : business.creator.name || 'N/A';
                            $('#viewBusinessCreatedBy').text(creatorName);
                        } else {
                            $('#viewBusinessCreatedBy').text('N/A');
                        }

                        // Set logo
                        if (business.logo_url) {
                            $('#viewBusinessLogo').attr('src', business.logo_url);
                        } else {
                            $('#viewBusinessLogo').attr('src', 'https://projects-sl.s3.ap-south-2.amazonaws.com/ecorental/dzmhp5cIIxNL9Ouvob3wOpWTmmPWI1gV3Y79bjvq.png');
                        }

                        // Set status badge
                        const statusBadge = business.status ?
                            '<span class="badge badge-success">Active</span>' :
                            '<span class="badge badge-warning">Inactive</span>';
                        $('#viewBusinessStatus').html(statusBadge);

                        // Show modal
                        $('#ViewModal').modal('show');
                    } else {
                        $.confirm({
                            theme: 'modern',
                            columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                            title: 'Error!',
                            content: response.message || 'Failed to load business details',
                            type: 'red',
                            typeAnimated: true,
                            buttons: {
                                confirm: {
                                    text: 'OK',
                                    btnClass: 'btn-danger'
                                }
                            }
                        });
                    }
                },
                error: function() {
                    $.confirm({
                        theme: 'modern',
                        columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                        title: 'Error!',
                        content: 'Failed to fetch business details',
                        type: 'red',
                        typeAnimated: true,
                        buttons: {
                            confirm: {
                                text: 'OK',
                                btnClass: 'btn-danger'
                            }
                        }
                    });
                }
            });
        }

        // Open Edit Modal
        function openEditModal(id) {
            $.ajax({
                url: `/eco_rental/business/${id}`,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.status) {
                        const business = response.data;

                        // Populate form fields
                        $('#updateBusinessId').val(business.id);
                        $('#updateBusinessName').val(business.name);
                        $('#updateBusinessEmail').val(business.email);
                        $('#updateBusinessContact').val(business.contact);
                        $('#updateBusinessAddress').val(business.address);

                        // Set status checkbox
                        if (business.status) {
                            $('#updateBusinessStatus').prop('checked', true);
                        } else {
                            $('#updateBusinessStatus').prop('checked', false);
                        }

                        // Set logo preview
                        if (business.logo_url) {
                            $('#updatePreviewImage').attr('src', business.logo_url);
                        } else {
                            $('#updatePreviewImage').attr('src', 'https://projects-sl.s3.ap-south-2.amazonaws.com/ecorental/dzmhp5cIIxNL9Ouvob3wOpWTmmPWI1gV3Y79bjvq.png');
                        }

                        // Clear any previous errors
                        $('.err_name, .err_email, .err_contact, .err_address, .err_logo, .err_status').text('').hide();

                        // Show modal
                        $('#UpdateModal').modal('show');
                    } else {
                        $.confirm({
                            theme: 'modern',
                            columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                            title: 'Error!',
                            content: response.message || 'Failed to load business details',
                            type: 'red',
                            typeAnimated: true,
                            buttons: {
                                confirm: {
                                    text: 'OK',
                                    btnClass: 'btn-danger'
                                }
                            }
                        });
                    }
                },
                error: function() {
                    $.confirm({
                        theme: 'modern',
                        columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                        title: 'Error!',
                        content: 'Failed to fetch business details',
                        type: 'red',
                        typeAnimated: true,
                        buttons: {
                            confirm: {
                                text: 'OK',
                                btnClass: 'btn-danger'
                            }
                        }
                    });
                }
            });
        }

        // Handle logo preview in edit modal
        $('#updateBusinessLogo').on('change', function() {
            updateBusinessLogoPreview(this.files[0]);
        });

        function updateBusinessLogoPreview(file) {
            var $logoInput = $('#updateBusinessLogo');
            // Find error element - it's in the same mb-3 container as the input
            var $errorElement = $logoInput.closest('.mb-3').find('.err_logo');

            // If not found, try searching in the update form
            if ($errorElement.length === 0) {
                $errorElement = $('#updateBusinessForm').find('.err_logo');
            }

            // Clear previous errors
            if ($errorElement.length > 0) {
                $errorElement.text('').hide();
            }
            $logoInput.removeClass('border-danger is-invalid');

            if (file) {
                // Validate file type
                if (!file.type.match('image.*')) {
                    if ($errorElement.length > 0) {
                        $errorElement.text('Please select an image file').show();
                    } else {
                        console.warn('Error element not found for logo validation');
                    }
                    $logoInput.addClass('border-danger is-invalid');
                    $logoInput.val('');
                    return;
                }

                // Validate file size (2MB = 2 * 1024 * 1024 bytes)
                if (file.size > 2 * 1024 * 1024) {
                    console.log('File size validation failed. File size:', file.size, 'Error element found:', $errorElement.length);
                    if ($errorElement.length > 0) {
                        $errorElement.text('File size must be less than 2MB').show();
                        console.log('Error message set and shown');
                    } else {
                        console.warn('Error element not found for logo validation. Looking for: .err_logo');
                        // Try to find it again with different selectors
                        $errorElement = $('#updateBusinessForm .err_logo');
                        if ($errorElement.length > 0) {
                            $errorElement.text('File size must be less than 2MB').show();
                            console.log('Error element found on second attempt');
                        }
                    }
                    $logoInput.addClass('border-danger is-invalid');
                    $logoInput.val('');
                    return;
                }

                // Read and display the image
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#updatePreviewImage').attr('src', e.target.result);
                    $('#updatePreviewTitle').text('New Logo');
                    $('#updatePreviewSubtitle').text(file.name);
                    // Clear any errors since file is valid
                    if ($errorElement.length > 0) {
                        $errorElement.text('').hide();
                    }
                    $logoInput.removeClass('border-danger is-invalid');
                };
                reader.readAsDataURL(file);
            }
        }

        // Clean up when UpdateModal is hidden
        $('#UpdateModal').on('hidden.bs.modal', function() {
            // Remove any lingering backdrops
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open');
            $('body').css('overflow', '');
            $('body').css('padding-right', '');

            // Clear form and errors - scope to update form
            $('#updateBusinessForm')[0].reset();
            $('#updateBusinessForm').find('.err_name, .err_email, .err_contact, .err_address, .err_logo, .err_status').text('').hide();
            $('#updateBusinessName, #updateBusinessEmail, #updateBusinessContact, #updateBusinessAddress, #updateBusinessLogo')
                .removeClass('is-invalid border-danger');
            $('#updateBusinessStatus').removeClass('border-danger');
            $('#updateBusinessStatus').closest('.form-check').removeClass('border-danger');

            // Re-enable button and restore original text
            $('#updateBusinessForm').find('button[type="submit"]').prop('disabled', false).text('Update Business');
        });

        // Clear errors when user starts typing in update form
        $('#updateBusinessName, #updateBusinessEmail, #updateBusinessContact, #updateBusinessAddress').on('input', function() {
            const fieldName = $(this).attr('name');
            $('#updateBusinessForm').find('.err_' + fieldName).text('').hide();
            $(this).removeClass('is-invalid border-danger');
        });

        // Clear status error when checkbox is changed in update form
        $('#updateBusinessStatus').on('change', function() {
            $('#updateBusinessForm').find('.err_status').text('').hide();
            $(this).removeClass('border-danger');
            $(this).closest('.form-check').removeClass('border-danger');
        });

        // Clear logo error when file is selected in update form - with size validation
        $('#updateBusinessLogo').on('change', function() {
            const file = this.files[0];
            const maxSize = 2 * 1024 * 1024; // 2MB in bytes
            const $errorEl = $('#updateBusinessForm').find('.err_logo');

            if (file) {
                if (file.size > maxSize) {
                    const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
                    const errorMsg = 'File size exceeds 2MB limit. Selected file: ' + sizeMB + 'MB';
                    $errorEl.text(errorMsg).css({display: 'block', visibility: 'visible'});
                    $(this).addClass('is-invalid border-danger');
                } else {
                    $errorEl.text('').hide();
                    $(this).removeClass('is-invalid border-danger');
                }
            } else {
                $errorEl.text('').hide();
                $(this).removeClass('is-invalid border-danger');
            }
        });

        // Handle update form submission
        $('#updateBusinessForm').on('submit', function(e) {
            e.preventDefault();

            var $updateSubmitBtn = $('#updateBusinessForm').find('button[type="submit"]');
            const businessId = $('#updateBusinessId').val();
            const formData = new FormData(this);

            // Handle status checkbox - if unchecked, set to 0
            if (!$('#updateBusinessStatus').is(':checked')) {
                formData.set('status', '0');
            } else {
                formData.set('status', '1');
            }

            // Clear previous errors - scope to update form
            $('#updateBusinessForm').find('.err_name, .err_email, .err_contact, .err_address, .err_logo, .err_status').text('').hide();
            $('#updateBusinessName, #updateBusinessEmail, #updateBusinessContact, #updateBusinessAddress, #updateBusinessLogo')
                .removeClass('is-invalid border-danger');
            $('#updateBusinessStatus').removeClass('border-danger');
            $('#updateBusinessStatus').closest('.form-check').removeClass('border-danger');

            console.log('Updating business ID:', businessId);
            console.log('Form data status:', formData.get('status'));

            $.ajax({
                url: `/eco_rental/business/${businessId}`,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $updateSubmitBtn.prop('disabled', true);
                },
                success: function(response) {
                    console.log('Update response:', response);
                    if (response.status) {
                        // Keep button disabled on success as we're reloading
                        $updateSubmitBtn.prop('disabled', true);
                        // Hide modal and remove backdrop
                        $('#UpdateModal').modal('hide');

                        // Remove any lingering modal backdrops
                        setTimeout(function() {
                            $('.modal-backdrop').remove();
                            $('body').removeClass('modal-open');
                            $('body').css('overflow', '');
                            $('body').css('padding-right', '');
                        }, 500);

                        // Reset form
                        $('#updateBusinessForm')[0].reset();

                        $.confirm({
                            theme: 'modern',
                            columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                            title: 'Success!',
                            content: response.message || 'Business updated successfully',
                            type: 'green',
                            typeAnimated: true,
                            buttons: {
                                confirm: {
                                    text: 'OK',
                                    btnClass: 'btn-primary',
                                    action: function() {
                                        // Reload the businesses list
                                        location.reload();
                                    }
                                }
                            }
                        });
                    } else {
                        // Re-enable button on error
                        $updateSubmitBtn.prop('disabled', false);
                        // Display validation errors
                        if (response.errors) {
                            console.log('Response errors:', response.errors);
                            $.each(response.errors, function(field, messages) {
                                const errorMessage = Array.isArray(messages) ? messages[0] : messages;
                                // Scope error element search to update form
                                var $errorElement = $('#updateBusinessForm').find('.err_' + field);
                                // Fallback to global search if not found in form
                                if ($errorElement.length === 0) {
                                    $errorElement = $('.err_' + field);
                                }
                                console.log('Field:', field, 'Error element found:', $errorElement.length, 'Message:', errorMessage);

                                if ($errorElement.length > 0) {
                                    $errorElement.text(errorMessage).show();
                                } else {
                                    console.warn('Error element not found for field:', field, 'Looking for: .err_' + field);
                                }

                                // Add error styling to form fields
                                if (field === 'name') {
                                    $('#updateBusinessName').addClass('is-invalid border-danger');
                                } else if (field === 'email') {
                                    $('#updateBusinessEmail').addClass('is-invalid border-danger');
                                } else if (field === 'contact') {
                                    $('#updateBusinessContact').addClass('is-invalid border-danger');
                                } else if (field === 'address') {
                                    $('#updateBusinessAddress').addClass('is-invalid border-danger');
                                } else if (field === 'logo') {
                                    $('#updateBusinessLogo').addClass('is-invalid border-danger');
                                } else if (field === 'status') {
                                    $('#updateBusinessStatus').addClass('border-danger');
                                    $('#updateBusinessStatus').closest('.form-check').addClass('border-danger');
                                }
                            });
                        } else if (response.message) {
                            // Show general error message
                            $.confirm({
                                theme: 'modern',
                                columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                                title: 'Error!',
                                content: response.message || 'Failed to update business',
                                type: 'red',
                                typeAnimated: true,
                                buttons: {
                                    confirm: {
                                        text: 'OK',
                                        btnClass: 'btn-danger'
                                    }
                                }
                            });
                        }
                    }
                },
                error: function(xhr, status, error) {
                    // Re-enable button on error
                    $updateSubmitBtn.prop('disabled', false);

                    console.error('Update error:', xhr.responseJSON);
                    console.error('Status:', xhr.status);
                    console.error('Error:', error);

                    if (xhr.status === 422) {
                        // Clear previous errors - scope to update form
                        $('#updateBusinessForm').find('.err_name, .err_email, .err_contact, .err_address, .err_logo, .err_status').text('').hide();

                        // Validation errors
                        const errors = xhr.responseJSON.errors || {};
                        console.log('Validation errors:', errors);
                        $.each(errors, function(field, messages) {
                            const errorMessage = Array.isArray(messages) ? messages[0] : messages;
                            // Scope error element search to update form
                            var $errorElement = $('#updateBusinessForm').find('.err_' + field);
                            // Fallback to global search if not found in form
                            if ($errorElement.length === 0) {
                                $errorElement = $('.err_' + field);
                            }
                            console.log('Field:', field, 'Error element found:', $errorElement.length, 'Message:', errorMessage);

                            if ($errorElement.length > 0) {
                                $errorElement.text(errorMessage).show();
                            } else {
                                console.warn('Error element not found for field:', field, 'Looking for: .err_' + field);
                            }

                            // Add error styling to form fields
                            if (field === 'name') {
                                $('#updateBusinessName').addClass('is-invalid border-danger');
                            } else if (field === 'email') {
                                $('#updateBusinessEmail').addClass('is-invalid border-danger');
                            } else if (field === 'contact') {
                                $('#updateBusinessContact').addClass('is-invalid border-danger');
                            } else if (field === 'address') {
                                $('#updateBusinessAddress').addClass('is-invalid border-danger');
                            } else if (field === 'logo') {
                                $('#updateBusinessLogo').addClass('is-invalid border-danger');
                            } else if (field === 'status') {
                                $('#updateBusinessStatus').addClass('border-danger');
                                $('#updateBusinessStatus').closest('.form-check').addClass('border-danger');
                            }
                        });
                    } else {
                        const errorMessage = xhr.responseJSON && xhr.responseJSON.message
                            ? xhr.responseJSON.message
                            : 'Failed to update business. Check console for details.';

                        $.confirm({
                            theme: 'modern',
                            columnClass: 'col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12',
                            title: 'Error!',
                            content: errorMessage,
                            type: 'red',
                            typeAnimated: true,
                            buttons: {
                                confirm: {
                                    text: 'OK',
                                    btnClass: 'btn-danger'
                                }
                            }
                        });
                    }
                }
            });
        });

        // Delete Confirmation
        function deleteConfirmation(id) {
            $.confirm({
                theme: 'modern',
                columnClass: 'col-lg-6 col-md-8 col-sm-10 col-12',
                icon: 'far fa-question-circle text-danger',
                title: 'Are you Sure!',
                content: 'Do you want to Delete the Selected Business?',
                type: 'red',
                autoClose: 'cancel|10000',
                buttons: {
                    confirm: {
                        text: 'Yes',
                        btnClass: 'btn-primary',
                        action: function() {
                            deleteBusiness(id);
                        }
                    },
                    cancel: {
                        text: 'Cancel',
                        btnClass: 'btn-red',
                        action: function() {

                        }
                    }
                }
            });
        }

        // Delete Business
        function deleteBusiness(id) {
            $("#loader").show();
            $.ajax({
                url: `/eco_rental/business/${id}`,
                type: 'DELETE',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $("#loader").hide();
                    if (response.status) {
                        $.confirm({
                            theme: 'modern',
                            columnClass: 'col-lg-6 col-md-8 col-sm-10 col-12',
                            title: 'Success!',
                            content: response.message || 'Business deleted successfully',
                            type: 'green',
                            typeAnimated: true,
                            buttons: {
                                confirm: {
                                    text: 'OK',
                                    btnClass: 'btn-primary',
                                    action: function() {
                                        // Reload the businesses list
                                        window.loadBusinesses();
                                    }
                                }
                            }
                        });
                    } else {
                        $.confirm({
                            theme: 'modern',
                            columnClass: 'col-lg-6 col-md-8 col-sm-10 col-12',
                            title: 'Error!',
                            content: response.message || 'Failed to delete business',
                            type: 'red',
                            typeAnimated: true,
                            buttons: {
                                confirm: {
                                    text: 'OK',
                                    btnClass: 'btn-danger'
                                }
                            }
                        });
                    }
                },
                error: function(xhr) {
                    $("#loader").hide();
                    var errorMessage = 'Failed to delete business. Please try again.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    $.confirm({
                        theme: 'modern',
                        columnClass: 'col-lg-6 col-md-8 col-sm-10 col-12',
                        title: 'Error!',
                        content: errorMessage,
                        type: 'red',
                        typeAnimated: true,
                        buttons: {
                            confirm: {
                                text: 'OK',
                                btnClass: 'btn-danger'
                            }
                        }
                    });
                },
                statusCode: {
                    401: function() {
                        window.location.href = '{{ route('landing') }}';
                    },
                    419: function() {
                        window.location.href = '{{ route('landing') }}';
                    }
                }
            });
        }
    </script>
@endsection