@extends('user-panelv2.layouts.userv2')
@section('head')
    <link rel="stylesheet" type="text/css" href="{{asset('user-panel/app-assets/css/pages/page-blog.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('user-panel/app-assets/css/plugins/forms/pickers/form-flat-pickr.css')}}">
    <style>
        .blur-me {
            filter: blur(5px); /* Adjust the blur level as needed */
            width: 100%;
            height: 100%;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent overlay */
            color: red; /* Text color */
            font-size: 30px; /* Adjust text size as needed */
        }

        .remove-customer {
            cursor: pointer !important;
            min-width: 70px;
        }

        .remove-customer:hover {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
        }

        .customer-group {
            background-color: #f8f9fa;
            transition: all 0.3s ease;
        }

        .customer-group:hover {
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

    </style>
@endsection

@section('content-head')
    <div class="content-header-left col-md-9 col-12 mb-2">
        <div class="row breadcrumbs-top">
            <div class="col-12">
                <h2 class="content-header-title float-left mb-0">Bilet Al</h2>
                <div class="breadcrumb-wrapper">
                    <ol class="breadcrumb">
                        {{--                                <li class="breadcrumb-item"><a href="index.html">Home</a>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="breadcrumb-item"><a href="#">Pages</a>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="breadcrumb-item"><a href="#">Blog</a>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="breadcrumb-item active">Edit--}}
                        {{--                                </li>--}}
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endsection
<!-- BEGIN: Content-->
@section('content')
    <!-- Blog Edit -->
    <div class="blog-edit-wrapper">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body @if( ! auth()->user()->hasVerifiedEmail()) blur-me @endif ">
{{--                        Ödəniş etdim bəs necə əlavə edim? Mərhələlərə <a href="https://www.canva.com/design/DAFtCu2nNok/YYSlX7k4dXmNNInSjeaMUw/view?utm_content=DAFtCu2nNok&utm_campaign=designshare&utm_medium=link&utm_source=editor">buradan</a> baxa bilərsiniz--}}

                        {{--                                <div class="media">--}}
                        {{--                                    <div class="avatar mr-75">--}}
                        {{--                                        <img src="../../../app-assets/images/portrait/small/avatar-s-9.jpg" width="38" height="38" alt="Avatar" />--}}
                        {{--                                    </div>--}}
                        {{--                                    <div class="media-body">--}}
                        {{--                                        <h6 class="mb-25">Chad Alexander</h6>--}}
                        {{--                                        <p class="card-text">May 24, 2020</p>--}}
                        {{--                                    </div>--}}
                        {{--                                </div>--}}
                        <!-- Form -->
                        <form action="{{route('userv2.ticket.store')}}" method="POST" class="mt-2" enctype="multipart/form-data">
                            @csrf

                            <div class="row">
                                <div class="col-md-12">
                                    <h1 for="blog-edit-title">Əziz Anifanlar</h1>
                                    <ul>
                                        <li>
                                            Bank : 4098 5844 0823 1460
                                        </li>
                                        <li>
                                            Qiymət : 10 AZN və ya 15AZN
                                        </li>
                                        <li>
                                            Ödəniş etməmişdən əvvəl şəxsi hesabınıza keçid edib məlumatları düzgün
                                            doldurduğunuzdan əmin olun. Siz binaya bu məlumatlar əsasında daxil olacaqsınız.
                                            Yanlış məlumat olduğu halda orada köməklik göstərə bilməyəcəyik.Ona görə də indidən bizə yazıb aydınlaşdırın.
                                        </li>
                                        <li>
                                            Ödənişi edib qəbzi mütləq buraya yükləyin. “Qəbz” yerini boş saxlayıb
                                            “Yüklə” düyməsinə basdıqda sorğunuz qəbul edilməyəcək.
                                        </li>
                                        <li>Ünvan: Cineland</li>
                                        <li>Seans: 14:00</li>
                                    </ul>
{{--                                    <input type="text" id="blog-edit-title" class="form-control"--}}
{{--                                           value="The Best Features Coming to iOS and Web design"/>--}}
                                </div>
                                <!-- Array Data -->

                                <div class="col-md-6 col-12">
                                    <div class="form-group mb-2">
                                        <label for="default-select">Film</label>
                                        <select id="default-select" name="movie" class="select2 form-control"  >
                                            @foreach($ticketMovies as $ticket)
                                                <option value="{{$ticket->id}}" @if($ticket->status == 0) disabled @endif >{{$ticket->title}}</option>
                                            @endforeach
{{--                                            <option value="Anifan - İblis ovçuları: Sonsuz Qatar Dublyaj" disabled>Anifan - İblis ovçuları: Sonsuz Qatar Dublyaj</option>--}}
{{--                                            <option value="Anifan - JJK (ParkCinema)" disabled>Anifan - Jujutsu Kaisen:Gizli Vergi</option>--}}
{{--                                            <option value="Anifan - Spy x Family Kod: Bəyaz" disabled>Anifan - Spy x Family Kod: Bəyaz</option>--}}
{{--                                            <option value="Anifan - Titana Hücum: Son Həmlə" selected>Anifan - Titana Hücum: Son Həmlə</option>--}}
{{--                                                                                                <option value="Anifan&Sakura - The Boy and The Beast Altyazı">Anifan&Sakura - The Boy and The Beast Altyazı</option>--}}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="form-group mb-2">
                                        <label for="blog-edit-category">Bizi haradan eşitmisiniz?</label>
                                        <select id="blog-edit-category" name="category[]" class="select2 form-control" multiple>
                                            <option value="anifan" selected>Anifan</option>
{{--                                            <option value="sakura">Sakura</option>--}}
                                            <option value="ig">Instagram</option>
                                            <option value="tiktok">Tiktok</option>
                                            <option value="yt">Youtube</option>
                                            <option value="dost">Dost</option>
                                            <option value="other">Başqa</option>
                                        </select>
                                    </div>
                                </div>
                                {{--                                        <div class="col-md-6 col-12">--}}
                                {{--                                            <div class="form-group mb-2">--}}
                                {{--                                                <label for="blog-edit-slug">Slug</label>--}}
                                {{--                                                <input type="text" id="blog-edit-slug" class="form-control" value="the-best-features-coming-to-ios-and-web-design" />--}}
                                {{--                                            </div>--}}
                                {{--                                        </div>--}}
                                {{--                                        <div class="col-md-6 col-12">--}}
                                {{--                                            <div class="form-group mb-2">--}}
                                {{--                                                <label for="blog-edit-status">Status</label>--}}
                                {{--                                                <select class="form-control" id="blog-edit-status">--}}
                                {{--                                                    <option value="Published">Published</option>--}}
                                {{--                                                    <option value="Pending">Pending</option>--}}
                                {{--                                                    <option value="Draft">Draft</option>--}}
                                {{--                                                </select>--}}
                                {{--                                            </div>--}}
                                {{--                                        </div>--}}
                                <div class="col-12 mb-2">
                                    <div class="border rounded p-2">
                                        <h4 class="mb-1">Ödəniş Qəbzi</h4>
                                        <div class="media flex-column flex-md-row">
                                            <img src="{{asset('user-panel/app-assets/images/slider/03.jpg')}}" id="blog-feature-image" class="rounded mr-2 mb-1 mb-md-0" width="170" height="110" alt="Blog Featured Image" />
                                            <div class="media-body">
                                                <small class="text-muted">
{{--                                                    Server limiti: {{ $maxUploadSizeMB }}MB | Müştəri tərəfi: 50MB-a qədər (avtomatik sıxışdırma)--}}
                                                    <br>Dəstəklənən formatlar: JPG, PNG, GIF
                                                </small>
                                                <p class="my-50">
                                                    <span id="file-info" class="text-info"></span>
                                                </p>
                                                <div class="d-inline-block">
                                                    <div class="form-group mb-0">
                                                        <div class="custom-file">
                                                            <input type="file" name="invoice" class="custom-file-input" id="blogCustomFile" accept="image/*" />
                                                            <label class="custom-file-label" for="blogCustomFile">Fayl seç</label>
                                                        </div>
                                                        <div id="file-error" class="text-danger mt-1" style="display: none;"></div>
                                                        <div id="file-success" class="text-success mt-1" style="display: none;"></div>
                                                        <div id="compression-progress" class="mt-2" style="display: none;">
                                                            <div class="progress">
                                                                <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                                                            </div>
{{--                                                            <small class="text-info">Şəkil sıxışdırılır...</small>--}}
                                                        </div>
                                                        <!-- Hidden field for compressed image data -->
                                                        <input type="hidden" id="compressed-image-data" name="compressed_image_data" />
                                                        <input type="hidden" id="original-filename" name="original_filename" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Additional Customers Section -->
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h4 class="card-title">Əlavə İştirakçılar</h4>
                                            <button type="button" class="btn btn-primary btn-sm float-right" id="add-customer-btn">
                                                <i class="feather icon-plus"></i> İştirakçı Əlavə Et
                                            </button>
                                        </div>
                                        <div class="card-body">
                                            <div id="additional-customers">
                                                <!-- Additional customer fields will be added here dynamically -->
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <ul>
                                        <li>
                                            Qaydalar: <a href="{{ route('userv2.ticketRules') }}" target="_blank">Link</a>
                                        </li>
                                    </ul>
                                    {{--                                    <input type="text" id="blog-edit-title" class="form-control"--}}
                                    {{--                                           value="The Best Features Coming to iOS and Web design"/>--}}
                                </div>
                                <div class="col-12 mt-50">
                                    <button type="submit" class="btn btn-primary mr-1">Yüklə</button>
                                    <button type="reset" class="btn btn-outline-secondary">Ləğv Et</button>
                                </div>
                            </div>
                        </form>
                        <!--/ Form -->
                    </div>
                    @if(auth()->user()->hasVerifiedEmail())

                    @else
                        <div class="overlay">
                            <p>{{__('You are restricted, verify your mail!')}}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!--/ Blog Edit -->
@endsection
<!-- END: Content-->

@section('scripts')
    <!-- BEGIN: Page JS-->
    <script src="{{asset('user-panel/app-assets/vendors/js/editors/quill/katex.min.js')}}"></script>
    <script src="{{asset('user-panel/app-assets/vendors/js/editors/quill/highlight.min.js')}}"></script>
    <script src="{{asset('user-panel/app-assets/vendors/js/editors/quill/quill.min.js')}}"></script>

    <script src="{{asset('user-panel/app-assets/js/scripts/pages/page-blog-edit.js')}}"></script>

    <!-- Additional Customer Management Script -->
    <script>
        // Global flag to prevent multiple initializations
        window.customerManagementInitialized = false;
        let customerCount = 0;

        // Function to add customer fields
        function addCustomerFields(count) {
            console.log('Adding customer fields for customer:', count);
            const customerHtml = `
                <div class="customer-group border rounded p-3 mb-3" id="customer-${count}">
                    <div class="row">
                        <div class="col-md-11">
                                                <h5 class="mb-3">İştirakçı ${count}</h5>
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-danger btn-sm remove-customer" data-customer="${count}" title="İştirakçını sil">
                                <i class="feather icon-trash-2"></i> Sil
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="customer_name_${count}">Ad</label>
                                <input type="text" class="form-control" id="customer_name_${count}"
                                           name="additional_customers[${count}][name]" placeholder="İştirakçı adı">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="customer_surname_${count}">Soyad</label>
                                <input type="text" class="form-control" id="customer_surname_${count}"
                                           name="additional_customers[${count}][surname]" placeholder="İştirakçı soyadı">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="customer_email_${count}">Email</label>
                                <input type="email" class="form-control" id="customer_email_${count}"
                                           name="additional_customers[${count}][email]" placeholder="iştirakçı@email.com">
                            </div>
                        </div>
                    </div>
                </div>
            `;

            const container = document.getElementById('additional-customers');
            if (container) {
                container.insertAdjacentHTML('beforeend', customerHtml);
                console.log('Customer fields added successfully');

                // Re-initialize feather icons for the new trash icon
                if (typeof feather !== 'undefined') {
                    feather.replace();
                }
            }
        }

        function initCustomerManagement() {
            // Prevent multiple initializations
            if (window.customerManagementInitialized) {
                console.log('Customer management already initialized, skipping...');
                return;
            }

            console.log('Initializing customer management');
            window.customerManagementInitialized = true;

            // Add customer button click event
            const addBtn = document.getElementById('add-customer-btn');
            if (addBtn) {
                console.log('Add customer button found, attaching event');

                // Remove any existing event listeners first
                addBtn.removeEventListener('click', handleAddCustomer);

                // Add the event listener
                addBtn.addEventListener('click', handleAddCustomer);
            } else {
                console.log('Add customer button not found!');
            }

            // Set up remove customer functionality with event delegation
            setupRemoveCustomerListener();
        }

        // Separate function for remove customer listener
        function setupRemoveCustomerListener() {
            console.log('Setting up remove customer listener');

            // Remove any existing listeners first
            if (window.removeCustomerHandler) {
                document.removeEventListener('click', window.removeCustomerHandler);
            }

            // Create the handler function
            window.removeCustomerHandler = function(e) {
                console.log('Document click detected on:', e.target, 'Classes:', e.target.className);

                // Check if clicked element or its parent is a remove button
                let removeBtn = null;
                let clickedElement = e.target;

                // Walk up the DOM tree to find the remove button
                while (clickedElement && clickedElement !== document) {
                    if (clickedElement.classList && clickedElement.classList.contains('remove-customer')) {
                        removeBtn = clickedElement;
                        break;
                    }
                    clickedElement = clickedElement.parentElement;
                }

                if (removeBtn) {
                    console.log('Remove button found:', removeBtn);
                    e.preventDefault();
                    e.stopPropagation();

                    const customerId = removeBtn.getAttribute('data-customer');
                    console.log('Attempting to remove customer:', customerId);

                    const customerElement = document.getElementById(`customer-${customerId}`);
                    if (customerElement) {
                        console.log('Customer element found, removing:', customerElement);

                        // Add a fade out effect before removing
                        customerElement.style.transition = 'opacity 0.3s ease';
                        customerElement.style.opacity = '0';

                        setTimeout(() => {
                            customerElement.remove();
                            console.log('Customer removed successfully');
                        }, 300);
                    } else {
                        console.error('Customer element not found with ID:', `customer-${customerId}`);
                    }
                } else {
                    // Only log if it's a button click to reduce noise
                    if (e.target.tagName === 'BUTTON' || e.target.closest('button')) {
                        console.log('Not a remove customer button');
                    }
                }
            };

            // Add the event listener to document
            document.addEventListener('click', window.removeCustomerHandler);
            console.log('Remove customer listener attached to document');
        }

        // Separate function for handling add customer click
        function handleAddCustomer(e) {
            e.preventDefault();
            console.log('Add customer button clicked');
            customerCount++;
            addCustomerFields(customerCount);
        }

        // File validation and preview functionality with client-side compression
        function initFileValidation() {
            const fileInput = document.getElementById('blogCustomFile');
            const fileLabel = document.querySelector('label[for="blogCustomFile"]');
            const fileError = document.getElementById('file-error');
            const fileSuccess = document.getElementById('file-success');
            const fileInfo = document.getElementById('file-info');
            const previewImage = document.getElementById('blog-feature-image');
            const compressionProgress = document.getElementById('compression-progress');
            const progressBar = compressionProgress.querySelector('.progress-bar');
            const compressedDataInput = document.getElementById('compressed-image-data');
            const originalFilenameInput = document.getElementById('original-filename');

            // Target compression size (approximately 2MB)
            const targetCompressionMB = 2;
            const targetCompressionBytes = targetCompressionMB * 1024 * 1024;

            // Server limits (actual server limit)
            const serverLimitMB = {{ $maxUploadSizeMB }};
            const serverLimitBytes = serverLimitMB * 1024 * 1024;

            // Client-side limit (much larger - we'll compress down to target)
            const clientLimitMB = 50; // Allow up to 50MB on client side
            const clientLimitBytes = clientLimitMB * 1024 * 1024;

            if (fileInput) {
                fileInput.addEventListener('change', function(e) {
                    const file = e.target.files[0];

                    // Reset everything
                    fileError.style.display = 'none';
                    fileSuccess.style.display = 'none';
                    compressionProgress.style.display = 'none';
                    fileInfo.textContent = '';
                    compressedDataInput.value = '';
                    originalFilenameInput.value = '';

                    if (file) {
                        // Update label
                        fileLabel.textContent = file.name;
                        originalFilenameInput.value = file.name;

                        // Validate file type
                        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
                        if (!allowedTypes.includes(file.type)) {
                            fileError.textContent = 'Yalnız JPG, PNG və GIF formatları dəstəklənir.';
                            fileError.style.display = 'block';
                            resetFileInput();
                            return;
                        }

                        // Check client-side limit (before compression)
                        if (file.size > clientLimitBytes) {
                            fileError.textContent = `Fayl həddindən artıq böyükdür. Maksimum ${clientLimitMB}MB ola bilər.`;
                            fileError.style.display = 'block';
                            resetFileInput();
                            return;
                        }

                        // Show initial file info
                        const fileSizeMB = (file.size / 1024 / 1024).toFixed(2);
                        // fileInfo.textContent = `Orijinal ölçü: ${fileSizeMB}MB`;

                        // If file is already small enough, no compression needed
                        if (file.size <= targetCompressionBytes) {
                            fileSuccess.textContent = 'Fayl ölçüsü uyğundur, sıxışdırma lazım deyil.';
                            fileSuccess.style.display = 'block';
                            previewFile(file);
                        } else {
                            // File is too large, compress it to ~2MB
                            compressImage(file);
                        }
                    } else {
                        resetFileInput();
                    }
                });
            }

            function resetFileInput() {
                fileLabel.textContent = 'Fayl seç';
                previewImage.src = '{{asset("user-panel/app-assets/images/slider/03.jpg")}}';
                compressedDataInput.value = '';
                originalFilenameInput.value = '';
            }

            function previewFile(file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImage.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }

            function compressImage(file) {
                compressionProgress.style.display = 'block';
                progressBar.style.width = '10%';

                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                const img = new Image();

                img.onload = function() {
                    progressBar.style.width = '30%';

                    // Calculate new dimensions (max 1920x1080)
                    let { width, height } = calculateDimensions(img.width, img.height, 1920, 1080);

                    canvas.width = width;
                    canvas.height = height;

                    progressBar.style.width = '50%';

                    // Draw and compress
                    ctx.drawImage(img, 0, 0, width, height);

                    progressBar.style.width = '70%';

                    // Try different quality levels until we get under the server limit
                    compressToTarget(canvas, file.name);
                };

                img.onerror = function() {
                    fileError.textContent = 'Şəkil yüklənərkən xəta baş verdi.';
                    fileError.style.display = 'block';
                    compressionProgress.style.display = 'none';
                };

                const reader = new FileReader();
                reader.onload = function(e) {
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }

            function calculateDimensions(originalWidth, originalHeight, maxWidth, maxHeight) {
                if (originalWidth <= maxWidth && originalHeight <= maxHeight) {
                    return { width: originalWidth, height: originalHeight };
                }

                const ratio = Math.min(maxWidth / originalWidth, maxHeight / originalHeight);
                return {
                    width: Math.round(originalWidth * ratio),
                    height: Math.round(originalHeight * ratio)
                };
            }

            function compressToTarget(canvas, filename) {
                let quality = 0.8; // Start with 80% quality
                let attempts = 0;
                const maxAttempts = 10;

                function tryCompress() {
                    canvas.toBlob(function(blob) {
                        progressBar.style.width = (70 + (attempts * 3)) + '%';

                        // Target approximately 2MB, but allow some flexibility
                        const targetSize = targetCompressionBytes;
                        const isGoodSize = blob.size <= targetSize || attempts >= maxAttempts;

                        if (isGoodSize) {
                            // Success or max attempts reached
                            progressBar.style.width = '100%';

                            const reader = new FileReader();
                            reader.onload = function(e) {
                                // Store compressed data
                                compressedDataInput.value = e.target.result;

                                // Update UI
                                const compressedSizeMB = (blob.size / 1024 / 1024).toFixed(2);
                                // fileInfo.textContent = `Sıxışdırılmış ölçü: ${compressedSizeMB}MB (Hədəf: ~${targetCompressionMB}MB)`;
                                // fileSuccess.textContent = `Şəkil uğurla sıxışdırıldı! (${compressedSizeMB}MB)`;
                                fileSuccess.style.display = 'block';
                                compressionProgress.style.display = 'none';

                                // Preview compressed image
                                previewImage.src = e.target.result;

                                // Clear the original file input since we're using compressed data
                                fileInput.value = '';
                            };
                            reader.readAsDataURL(blob);
                        } else {
                            // Try with lower quality
                            quality -= 0.1;
                            attempts++;
                            if (quality > 0.1) {
                                setTimeout(tryCompress, 100);
                            } else {
                                fileError.textContent = 'Şəkil kifayət qədər sıxışdırıla bilmədi. Daha kiçik fayl seçin.';
                                fileError.style.display = 'block';
                                compressionProgress.style.display = 'none';
                            }
                        }
                    }, 'image/jpeg', quality);
                }

                tryCompress();
            }
        }

        // Test function to manually verify functionality
        window.testRemoveCustomer = function() {
            console.log('Testing remove customer functionality...');
            const removeButtons = document.querySelectorAll('.remove-customer');
            console.log('Found remove buttons:', removeButtons.length);
            removeButtons.forEach((btn, index) => {
                console.log(`Button ${index + 1}:`, btn, 'Customer ID:', btn.getAttribute('data-customer'));
            });
        };

        // Form submission handler
        function initFormSubmission() {
            const form = document.querySelector('form[action*="store"]');
            if (form) {
                form.addEventListener('submit', function(e) {
                    const compressedData = document.getElementById('compressed-image-data').value;
                    const fileInput = document.getElementById('blogCustomFile');

                    console.log('Form submission:', {
                        hasCompressedData: !!compressedData,
                        hasFile: fileInput.files.length > 0,
                        compressedDataLength: compressedData.length
                    });

                    // If we have compressed data but no file, that's expected
                    if (compressedData && fileInput.files.length === 0) {
                        console.log('Submitting with compressed data (no file upload)');
                        return true; // Allow submission
                    }

                    // If we have a file but no compressed data, that's also expected
                    if (!compressedData && fileInput.files.length > 0) {
                        console.log('Submitting with file upload (no compressed data)');
                        return true; // Allow submission
                    }

                    // If we have neither, that's an error
                    if (!compressedData && fileInput.files.length === 0) {
                        alert('Zəhmət olmasa qəbz şəklini seçin.');
                        e.preventDefault();
                        return false;
                    }

                    return true;
                });
            }
        }

        // Single initialization point
        if (typeof $ !== 'undefined') {
            $(document).ready(function() {
                console.log('jQuery available, initializing all functionality');
                initCustomerManagement();
                initFileValidation();
                initFormSubmission();

                // Add a small delay to ensure everything is ready
                setTimeout(() => {
                    console.log('All functionality initialization complete');
                    console.log('You can test remove functionality by typing: testRemoveCustomer()');
                }, 500);
            });
        } else {
            // Fallback to vanilla JavaScript
            console.log('jQuery not available, using vanilla JS');
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', function() {
                    initCustomerManagement();
                    initFileValidation();
                    initFormSubmission();
                    setTimeout(() => {
                        console.log('All functionality initialization complete');
                        console.log('You can test remove functionality by typing: testRemoveCustomer()');
                    }, 500);
                });
            } else {
                initCustomerManagement();
                initFileValidation();
                initFormSubmission();
                setTimeout(() => {
                    console.log('All functionality initialization complete');
                    console.log('You can test remove functionality by typing: testRemoveCustomer()');
                }, 500);
            }
        }
    </script>

    <!-- END: Page JS-->
@endsection