@extends('admin.template.layout')

@section('header')
    <link rel="stylesheet" type="text/css" href="{{ asset('admin-assets/plugins/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('admin-assets/plugins/table/datatable/custom_dt_customer.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Toastr custom styles */
        #toast-container>.toast {
            background-image: none !important;
            color: #fff !important;
            opacity: 1 !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        #toast-container>.toast-success {
            background-color: #28a745 !important;
            /* Bootstrap success green */
        }

        #toast-container>.toast-error {
            background-color: #dc3545 !important;
            /* Bootstrap danger red */
        }

        #toast-container>.toast-warning {
            background-color: #ffc107 !important;
            /* Bootstrap warning yellow */
            color: #000 !important;
            /* Dark text for contrast */
        }

        #toast-container>.toast-info {
            background-color: #17a2b8 !important;
            /* Bootstrap info blue */
        }

        /* Icon spacing and positioning */
        #toast-container>.toast:before {
            position: fixed;
            font-family: FontAwesome;
            font-size: 24px;
            line-height: 18px;
            float: left;
            color: #FFF;
            padding-right: 0.5em;
            margin: auto 0.5em auto -1.5em;
        }

        #toast-container>.toast-warning:before {
            content: "\f003";
        }

        #toast-container>.toast-error:before {
            content: "\f001";
        }

        #toast-container>.toast-info:before {
            content: "\f005";
        }

        #toast-container>.toast-success:before {
            content: "\f002";
        }
        .progress {
            position: relative;
            width: 100%;
        }

        .bar {
            background-color: #00ff00;
            width: 0%;
            height: 20px;
        }

        .percent {
            position: absolute;
            display: inline-block;
            left: 50%;
            color: #040608;
        }
    </style>
@stop

@section('content')
    <div class="container mt-2">
        <!-- Bulk Product Import Section -->
        <div class="card shadow">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Bulk Product Import</h5>
                {{-- <button type="button" id="downloadTemplateBtn" class="btn btn-light btn-sm">
                    <span id="downloadTemplateText">Download Template</span>
                    <span id="templateLoadingSpinner" class="spinner-border spinner-border-sm d-none" role="status"></span>
                </button> --}}
            </div>
            <div class="card-body">
                <form id="importForm" enctype="multipart/form-data">
                    @csrf

                    <div class="mb-3">
                        <label for="vendorSelect" class="form-label">Select Vendor</label>
                        <select name="vendor_id" id="vendorSelect" class="form-select form-control" required>
                            <option value="">-- Select Vendor --</option>
                            @foreach ($vendors as $vendor)
                                <option value="{{ $vendor->id }}">
                                    {{ ( ($vendor->name ?? $vendor->first_name)  ?? 'N/A') }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback" id="vendorError"></div>
                    </div>
                    @if ( GetUserPermissions("imports_export") )
                    <div class="mb-3">
                        <button type="button" id="downloadTemplateBtn" class="btn-custom btn mr-2 mt-2 mb-2" disabled>
                            <span id="downloadTemplateText">Export Blank Excel</span>
                            <span id="templateLoadingSpinner" class="spinner-border spinner-border-sm d-none" role="status"
                                aria-hidden="true"></span>
                        </button>
                    </div>
                    @endif


                    @if ( GetUserPermissions("imports_export") )
                    <div class="mb-3">
                        <label for="file" class="form-label">Choose Excel File (.xlsx) to Import:</label>
                        <input type="file" name="file" id="file" class="form-control" accept=".xlsx" disabled
                            required />
                        <div class="invalid-feedback" id="fileError"></div>
                    </div>
                       @endif

                    <button type="submit" class="btn-custom btn mr-2 mt-2 mb-2" id="importBtn" disabled>
                        <span id="importBtnText">Import Data</span>
                        <span id="importLoadingSpinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                    </button>

                </form>

                <div id="progressContainer" class="mt-4" style="display: none">
                    <div class="progress">
                        <div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%"></div>
                    </div>
                    <span id="progressText" class="text-muted"></span>
                </div>
            </div>
        </div>

        <!-- Bulk Image Import Section -->
        <div class="card shadow mt-5">
            <div class="card-header bg-dark text-white">
                <h5 class="mb-0">Bulk Import Images</h5>
            </div>

            <div class="card-body">
                <form id="imageImportForm" enctype="multipart/form-data" class="needs-validation" novalidate>
                    @csrf
                    <div class="mb-3">
                        <label for="imageZip" class="form-label">Upload Zip File <small class="text-muted">(Contains product
                                images)</small></label>
                        <input type="file" name="image_zip" id="imageZip" class="form-control" accept=".zip"
                            required />
                        <div class="invalid-feedback" id="imageZipError"></div>
                    </div>
                    @if ( GetUserPermissions("imports_export") )
                    <div class="mb-3 text-start">
                        <button type="submit" class="btn-custom btn mr-2 mt-2 mb-2" id="imageUploadBtn">Upload and
                            Extract</button>
                    </div>
                    @endif
                </form>

                <div id="imageProgressContainer" class="mt-4 d-none">
                    <label class="form-label">Image Upload Progress</label>
                    <div class="progress mb-2">
                        <div id="imageProgressBar" class="progress-bar progress-bar-striped bg-warning" role="progressbar"
                            style="width: 0%"></div>
                    </div>
                    <div class="text-muted" id="imageProgressText">Waiting for image import to begin...</div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        const vendorSelect = document.getElementById('vendorSelect');
        const downloadBtn = document.getElementById('downloadTemplateBtn');
        const importBtn = document.getElementById('importBtn');
        const fileInput = document.getElementById('file');


        vendorSelect.addEventListener('change', function() {
            const vendorId = this.value;
            fileInput.disabled = !vendorId;
            importBtn.disabled = !vendorId;
            downloadBtn.disabled = !vendorId;
        });


        // Download template on button click
        document.getElementById('downloadTemplateBtn').addEventListener('click', function() {
            const vendorId = document.getElementById('vendorSelect').value;
            const downloadBtn = this;
            const downloadText = document.getElementById('downloadTemplateText');
            const spinner = document.getElementById('templateLoadingSpinner');

            if (!vendorId) {
                toastr.warning('Please select a vendor first.');
                return;
            }

            downloadText.textContent = 'Loading Template...';
            spinner.classList.remove('d-none');
            downloadBtn.disabled = true;

            fetch("{{ route('imports.template') }}", {
                    method: "POST",
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        vendor_id: vendorId
                    })
                })
                .then(response => {
                    if (!response.ok) throw new Error('Template fetch failed');

                    // Try to get filename from Content-Disposition header
                    const disposition = response.headers.get('Content-Disposition');
                    let filename = 'product_import_template.xlsx';
                    if (disposition && disposition.indexOf('filename=') !== -1) {
                        filename = disposition.split('filename=')[1].replace(/['\"]/g, '');
                    }
                    return response.blob().then(blob => ({
                        blob,
                        filename
                    }));
                })
                .then(({
                    blob,
                    filename
                }) => {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    toastr.success('Template downloaded.');
                })
                .catch(() => toastr.error('Failed to download template.'))
                .finally(() => {
                    spinner.classList.add('d-none');
                    downloadText.textContent = 'Download Template';
                    downloadBtn.disabled = false;
                });
        });

        document.getElementById('importForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const vendorId = document.getElementById('vendorSelect').value;
            if (!vendorId) return toastr.warning('Please select a vendor first.');

            // Spinner & text change
            const importBtn = document.getElementById('importBtn');
            const importText = document.getElementById('importBtnText');
            const importSpinner = document.getElementById('importLoadingSpinner');
            importText.textContent = 'Uploading...';
            importSpinner.classList.remove('d-none');
            importBtn.disabled = true;


            let form = this;
            let formData = new FormData(form);
            let vendorError = document.getElementById('vendorError');
            let fileError = document.getElementById('fileError');

            vendorError.innerText = '';
            fileError.innerText = '';
            document.getElementById('vendorSelect').classList.remove('is-invalid');
            document.getElementById('file').classList.remove('is-invalid');

            fetch('{{ route('imports.upload') }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: formData
                })
                .then(response => {
                    if (!response.ok) return response.json().then(err => Promise.reject(err));
                    return response.json();
                })
                .then(data => {
                    console.log(data);
                    toastr.success(data.message);

                    const vendorId = document.getElementById('vendorSelect').value;
                    // Echo.private(`product-import.${vendorId}`)
                    //     .listen('ProductImportProgress', (e) => {
                    //         const percentage = Math.round((e.processed / e.total) * 100);
                    //         document.getElementById('progressBar').style.width = percentage + '%';
                    //         document.getElementById('progressText').innerText = `${percentage}% completed`;
                    //         document.getElementById('progressContainer').style.display = 'block';
                    //     });
                })
                .catch(error => {
                    if (error.errors) {
                        if (error.errors.vendor_id) {
                            vendorError.innerText = error.errors.vendor_id[0];
                            document.getElementById('vendorSelect').classList.add('is-invalid');
                        }
                        if (error.errors.file) {
                            fileError.innerText = error.errors.file[0];
                            document.getElementById('file').classList.add('is-invalid');
                        }
                    } else {
                        // toastr.error('Something went wrong.');
                        console.log(error);
                    }
                }).finally(() => {
                    importText.textContent = 'Import Data';
                    importSpinner.classList.add('d-none');
                    importBtn.disabled = false;
                });;
        });

        // Bulk Image Upload Submit
        const imageForm = document.getElementById('imageImportForm');
        const imageZip = document.getElementById('imageZip');
        const imageProgressBar = document.getElementById('imageProgressBar');
        const imageProgressText = document.getElementById('imageProgressText');
        const imageProgressContainer = document.getElementById('imageProgressContainer');

        // imageForm.addEventListener('submit', function(e) {
        //     e.preventDefault();
        //     const formData = new FormData(imageForm);
        //     imageZip.classList.remove('is-invalid');
        //     document.getElementById('imageZipError').textContent = '';

        //     fetch('{{ route('product.image.import') }}', {
        //             method: 'POST',
        //             headers: {
        //                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
        //             },
        //             body: formData
        //         })
        //         .then(response => {
        //             if (!response.ok) return response.json().then(err => Promise.reject(err));
        //             return response.json();
        //         })
        //         .then(data => {
        //             toastr.success(data.message || 'Image zip upload started.');
        //             imageProgressContainer.classList.remove('d-none');

        //             Echo.private('image-import-status')
        //                 .listen('ImageImportProgress', (e) => {
        //                     const percent = Math.round((e.processed / e.total) * 100);
        //                     imageProgressBar.style.width = percent + '%';
        //                     imageProgressText.textContent =
        //                         `${e.status}: ${percent}% (${e.processed}/${e.total})`;
        //                 });
        //         })
        //         .catch(error => {
        //             if (error.errors && error.errors.image_zip) {
        //                 imageZip.classList.add('is-invalid');
        //                 document.getElementById('imageZipError').textContent = error.errors.image_zip[0];
        //             } else {
        //                 toastr.error('Image import failed.');
        //             }
        //         });
        // });

        imageForm.addEventListener('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(imageForm);
        imageZip.classList.remove('is-invalid');
        document.getElementById('imageZipError').textContent = '';

        fetch('{{ route('product.image.import') }}', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
            body: formData
        })
        .then(async response => {
            const data = await response.json().catch(() => null);

            if (!response.ok) {
                throw data || { message: 'Upload failed' };
            }
            return data;
        })
        .then(data => {
            toastr.success(data.message || 'Image zip upload successfully.');
        })
        .catch(error => {
            console.error(error);

            if (error?.errors?.image_zip) {
                imageZip.classList.add('is-invalid');
                document.getElementById('imageZipError').textContent = error.errors.image_zip[0];
            } else {
                toastr.error(error.message || 'Unexpected error occurred.');
            }
        });
    });
    </script>


@endsection