@extends("admin.template.layout")

@section('header')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
@stop

@section('content')
<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>
    </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->first_name . ' ' . $vendor->last_name) ?? 'N/A') }}
                    </option>
                    @endforeach
                </select>
            </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="templateBtnText">Export Blank Excel</span>
                    <span id="templateLoadingSpinner" class="spinner-border spinner-border-sm d-none" role="status"></span>
                </button>
            </div>

            <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" required disabled />
            </div>

            <button type="submit" class="btn-custom btn mr-2 mt-2 mb-2" id="importBtn" disabled>
                <span id="importBtnText">Import Products</span>
                <span id="importLoadingSpinner" class="spinner-border spinner-border-sm d-none" role="status"></span>
            </button>
            @endif
        </form>

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

<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">
            @csrf
            <div class="mb-3">
                <label for="imageZip" class="form-label">Upload Zip File <small class="text-muted">(Contains product images) file name must be image_zip.zip</small></label>
                <input type="file" name="image_zip" id="imageZip" class="form-control" accept=".zip" required />
            </div>
            @if (GetUserPermissions("imports_export"))
            <button type="submit" class="btn-custom btn mr-2 mt-2 mb-2" id="imageUploadBtn">
                <span id="imageBtnText">Upload and Extract</span>
                <span id="imageLoadingSpinner" class="spinner-border spinner-border-sm d-none" role="status"></span>
            </button>
            @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 small" id="imageProgressText">0%</div>
        </div>
    </div>
</div>
@stop

@section("script")
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
    const bulkImporter = {
        root: $(document),
        downloadBtn: '#downloadTemplateBtn',
        vendorSelect: '#vendorSelect',
        fileInput: '#file',
        importBtn: '#importBtn',
        importForm: '#importForm',
        imageImportForm: '#imageImportForm',
        imageUploadBtn: '#imageUploadBtn',
        
        userEvents: function() {

            const self = this;

            // Enable buttons on vendor change
            this.root.on('change', this.vendorSelect, function() {
                const isSelected = $(this).val() !== "";
                $(self.downloadBtn).prop('disabled', !isSelected);
                $(self.fileInput).prop('disabled', !isSelected);
                $(self.importBtn).prop('disabled', !isSelected);
            });

            // Template Download
            this.root.on('click', this.downloadBtn, function(e) {
                e.preventDefault();
                let vendorId = $(self.vendorSelect).val();
                const btn = $(this);
                const spinner = $('#templateLoadingSpinner');

                btn.prop('disabled', true);
                spinner.removeClass('d-none');

                $.ajax({
                    url: "{{ url('/admin/products/export-example-sheet') }}",
                    method: "POST",
                    data: JSON.stringify({ vendor_id: vendorId }),
                    contentType: "application/json",
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    xhrFields: { responseType: 'blob' },
                    success: function(blob, status, xhr) {
                        let filename = 'template.xlsx';
                        const disp = xhr.getResponseHeader('Content-Disposition');
                        if (disp && disp.indexOf('filename=') !== -1) {
                            filename = disp.split('filename=')[1].replace(/['\"]/g, '');
                        }
                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url; a.download = filename;
                        document.body.appendChild(a); a.click();
                        window.URL.revokeObjectURL(url); $(a).remove();
                        toastr.success('Template downloaded');
                    },
                    complete: () => {
                        btn.prop('disabled', false);
                        spinner.addClass('d-none');
                    }
                });
            });

            // Excel Import
            this.root.on('submit', this.importForm, (e) => {
                e.preventDefault();
                const form = e.currentTarget;
                const formData = new FormData(form);
                const btn = $(form).find('#importBtn');
                const progressBar = $('#progressBar');
                const progressText = $('#progressText');

                btn.prop('disabled', true);
                $('#importLoadingSpinner').removeClass('d-none');
                $('#progressContainer').removeClass('d-none');

                $.ajax({
                    url: "{{ url('/admin/products/upload-sync-sheet') }}",
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    xhr: function() {
                        const xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", (evt) => {
                            if (evt.lengthComputable) {
                                const percent = Math.round((evt.loaded / evt.total) * 100);
                                progressBar.css('width', percent + '%');
                                progressText.text(percent + '%');
                            }
                        }, false);
                        return xhr;
                    },
                    success: (res) => toastr.success(`${res?.results?.success_count} product(s) imported!`),
                    error: (xhr) => toastr.error('Error: ' + (xhr.responseJSON?.message || 'Upload failed')),
                    complete: () => {
                        btn.prop('disabled', false);
                        $('#importLoadingSpinner').addClass('d-none');
                        $('#progressContainer').addClass('d-none');
                        progressBar.css('width', '0%');
                        progressText.text('0%');
                    }
                });
            });

            // Image ZIP Import
            this.root.on('submit', this.imageImportForm, (e) => {
                e.preventDefault();
                const form = e.currentTarget;
                const formData = new FormData(form);
                const btn = $('#imageUploadBtn');
                const progressBar = $('#imageProgressBar');
                const progressText = $('#imageProgressText');

                btn.prop('disabled', true);
                $('#imageLoadingSpinner').removeClass('d-none');
                $('#imageProgressContainer').removeClass('d-none');

                $.ajax({
                    url: "{{ url('/admin/products/upload-sync-zip') }}",
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    xhr: function() {
                        const xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", (evt) => {
                            if (evt.lengthComputable) {
                                const percent = Math.round((evt.loaded / evt.total) * 100);
                                progressBar.css('width', percent + '%');
                                progressText.text(percent + '%');
                            }
                        }, false);
                        return xhr;
                    },
                    success: (res) => {
                        toastr.success(`${res?.processed_count} Images imported!`)
                        $(self.imageImportForm).trigger('reset')
                    },
                    error: (xhr) => toastr.error('Error: ' + (xhr.responseJSON?.message || 'Zip upload failed')),
                    complete: () => {
                        btn.prop('disabled', false);
                        $('#imageLoadingSpinner').addClass('d-none');
                        $('#imageProgressContainer').addClass('d-none');
                        progressBar.css('width', '0%');
                        progressText.text('0%');
                    }
                });
            });
        },

        init: function() { this.userEvents(); }
    };

    $(document).ready(() => bulkImporter.init());
</script>
@stop