@extends('frontend.layouts.app')

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="degressive-mode" content="{{ \Platform\Packages\PrintSystems\Models\OnlinePrintSetting::first()?->degressive_mode ?? 'none' }}">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css">
<link rel="stylesheet" href="{{ asset('vendor/printsystems/css/upload.css') }}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
</script>


<div class="container py-5">
  <h2 class="text-center mb-4">
    <i class="fas fa-upload"></i> Analyse & Aperçu de vos documents
  </h2>

  <!-- Liste des fichiers uploadés -->
  <div id="fileListContainer"></div>

  <!-- Dropzone classique, visible uniquement avant upload -->
  <div class="dropzone-container">
    <input type="file" id="pdfInput" accept="application/pdf" multiple hidden>
    <label for="pdfInput" class="dropzone-label">
      <i class="fas fa-cloud-upload-alt"></i>
      <span>Glissez un fichier PDF ici ou cliquez pour le sélectionner</span>
    </label>
    <p class="dropzone-helper">PDF/images/word/Excel uniquement – Taille max 64 Mo</p>
  </div>

  <!-- Bouton Ajouter un autre fichier (affiché après 1er upload) -->
  <div class="add-more-container text-center d-none" id="addMoreFileContainer">
    <button type="button" class="add-more-label d-inline-flex align-items-center justify-content-center gap-3" style="padding:18px 32px; border:none; background:#fff0f7; border:2px dashed #FF0060; border-radius:10px;">
		<i class="fas fa-plus-square fa-2x" style="color:#FF0060;"></i>
		<span class="fw-bold fs-5" style="color:#FF0060;">Voulez-vous ajouter d'autre fichier ?</span>
	</button>
    <p class="dropzone-helper" style="margin-bottom:0;">PDF/images/word/Excel uniquement – Taille max 64 Mo</p>
</div>

  <div class="text-center mt-4">
    <button class="btn btn-primary btn-lg d-none" id="continueBtn" type="button">
		Continuer l'impression
	</button>
  </div>

  <div class="d-flex justify-content-center mt-4 fw-bold fs-5">
    <span>Total à payer : <span id="totalCombinedPrice">0.00 €</span></span>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>

<!-- Bouton flottant de réglage -->
<button class="settings-btn" id="toggle-btn">
  <i class="fas fa-cog"></i>
</button>

<!-- Panel flottant de calibrage -->
@include('frontend.upload._calibration_panel')

<!-- Gestion des fichiers JS -->
<script src="{{ asset('vendor/printsystems/js/upload-handler.js') }}"></script>
<script src="{{ asset('vendor/printsystems/js/analyzer-files-handler.js') }}"></script>
<script src="{{ asset('vendor/printsystems/js/pdf.js') }}"></script>
<script src="{{ asset('vendor/printsystems/js/calculate-price.js') }}"></script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const toggleBtn = document.getElementById("toggle-btn");
    const settingsPanel = document.getElementById("settings-panel");
    const closeBtn = document.getElementById("close-btn");

    toggleBtn?.addEventListener("click", () => settingsPanel?.classList.toggle("active"));
    closeBtn?.addEventListener("click", () => settingsPanel?.classList.remove("active"));
  });
</script>
<script>
  window.currentPdfUrl = "{{ asset('uploads/ton_fichier.pdf') }}";
</script>

{{-- LOGIQUE UI ADAPTATIVE --}}
<script type="module">

document.addEventListener("DOMContentLoaded", function() {
    const fileListContainer = document.getElementById("fileListContainer");
    const dropzoneContainer = document.querySelector(".dropzone-container");
    const addMoreFileContainer = document.getElementById("addMoreFileContainer");
    const pdfInput = document.getElementById("pdfInput");

    // Ce sélecteur doit matcher chaque carte fichier créée dynamiquement dans fileListContainer !
    function getFileCardsCount() {
        // Adapte ici selon ta classe de carte JS/HTML (ex: .file-card ou .pdf-file-card)
        // Si ton JS ajoute <div class="file-card"> ou similaire :
        return fileListContainer.querySelectorAll('.file-card, .pdf-file-card').length;
    }

    function toggleUploadUI() {
        const filesCount = getFileCardsCount();
        if (filesCount === 0) {
            dropzoneContainer.classList.remove("d-none");
            addMoreFileContainer.classList.add("d-none");
        } else {
            dropzoneContainer.classList.add("d-none");
            addMoreFileContainer.classList.remove("d-none");
        }
    }

    // Appelle toggleUploadUI dès le départ
    toggleUploadUI();

    // Monkey patch pour rendre compatible avec ton JS existant.
    // On intercepte tous les ajouts/suppressions de fichiers dynamiques.
    // --> Le code ci-dessous suppose que tu utilises déjà upload-handler.js pour gérer l'UI fichiers.

    // Hook sur l'ajout d'un fichier
    const _oldAppendChild = fileListContainer.appendChild;
    fileListContainer.appendChild = function() {
        let res = _oldAppendChild.apply(this, arguments);
        toggleUploadUI();
        return res;
    };

    // Hook sur la suppression d'un fichier (via removeChild)
    const _oldRemoveChild = fileListContainer.removeChild;
    fileListContainer.removeChild = function() {
        let res = _oldRemoveChild.apply(this, arguments);
        toggleUploadUI();
        return res;
    };

    // Fallback au cas où JS ajoute/supprime d'une autre façon : observer le DOM
    const observer = new MutationObserver(toggleUploadUI);
    observer.observe(fileListContainer, {childList: true});

    // Click sur bouton "ajouter fichier" = ouvre l'input
    addMoreFileContainer.addEventListener("click", function(e) {
		e.preventDefault();
		pdfInput.value = "";
		pdfInput.click();
	});
});
</script>
{{-- LOGIQUE PANIER  --}}
<script type="module">
    import { PDFDocument } from 'https://unpkg.com/pdf-lib/dist/pdf-lib.esm.min.js';
    // import { PDFDocument } from 'pdf-lib';

    async function extractPagesFromFile(file, pageRangeStr) {
        const arrayBuffer = await file.arrayBuffer();
        const pdfDoc = await PDFDocument.load(arrayBuffer);

        const pageNumbers = parsePageRange(pageRangeStr);
        const newPdf = await PDFDocument.create();
        const copiedPages = await newPdf.copyPages(pdfDoc, pageNumbers.map(p => p - 1));
        copiedPages.forEach(p => newPdf.addPage(p));

        const newPdfBytes = await newPdf.save();
        return new Blob([newPdfBytes], { type: 'application/pdf' });
    }

    function parsePageRange(rangeStr) {
        const pages = new Set();
        const parts = rangeStr.split(',');
        parts.forEach(part => {
            if (part.includes('-')) {
                const [start, end] = part.split('-').map(Number);
                for (let i = start; i <= end; i++) pages.add(i);
            } else {
                pages.add(Number(part));
            }
        });
        return [...pages].sort((a, b) => a - b);
    }
document.addEventListener("DOMContentLoaded", function() {
    const continueBtn = document.getElementById('continueBtn');
    if (!continueBtn) return;

    {{--continueBtn.addEventListener('click', function(e) {--}}
    {{--    // Si c'est encore un <a>, décommente la ligne suivante pour empêcher le lien de partir :--}}
    {{--    // e.preventDefault();--}}

    {{--    // Construction du panier avant redirection--}}
    {{--    const panier = [];--}}

    {{--    Object.entries(uploadedFiles).forEach(([fileId, file]) => {--}}
    {{--        const fileCard = document.getElementById(fileId);--}}
    {{--        if (!fileCard) return;--}}

    {{--        panier.push({--}}
    {{--            name: file.name,--}}
    {{--            size: file.size,--}}
    {{--            file:file,--}}
    {{--            pages: parseInt(fileCard.dataset.pageCount) || 0,--}}
    {{--            colorPages: parseInt(fileCard.dataset.colorPages) || 0,--}}
    {{--            bwPages: parseInt(fileCard.dataset.bwPages) || 0,--}}
    {{--            estimatedPrice: parseFloat(fileCard.querySelector('.estimated-price').textContent.replace('€', '').trim()) || 0,--}}
    {{--            // Ajoute ici toutes les autres options du formulaire si besoin--}}
	{{--			// Ajoute d'autres options ici si nécessaire, ex:--}}
    {{--            // format: fileCard.querySelector('.paper-size')?.value || 'A4',--}}
    {{--            // couleur: fileCard.querySelector('.color-mode')?.value || 'auto',--}}
    {{--            // rectoVerso: fileCard.querySelector('.double-sided')?.value || 'non',--}}
    {{--            // etc.--}}
    {{--        });--}}
    {{--    });--}}

    {{--    // On sauvegarde le panier dans le localStorage (ou en session AJAX si tu veux)--}}
    {{--    localStorage.setItem('panier_upload', JSON.stringify(panier));--}}
    {{--    // Ou, pour une vraie session côté Laravel, tu peux faire un AJAX POST--}}

    {{--    // Redirection vers la page client--}}
    {{--    // Si tu utilises un <button>, fais la redirection ici :--}}
{{--        window.location.href = "{{ route('customers.create.package', ['package' => 'PrintSystems']) }}";--}}
    {{--    // Si tu veux garder le <a>, tu peux commenter la ligne ci-dessus--}}
    {{--    console.log(panier);--}}
    {{--});--}}


    continueBtn.addEventListener('click',  function (e) {
        // e.preventDefault();
        continueBtn.setAttribute('disabled', 'disabled');
        const panier = [];

        var totalFiles=0;
        var uploadedFilesCount=0;

        Object.entries(uploadedFiles).forEach(async ([fileId, file]) => {
            const fileCard = document.getElementById(fileId);
            const rangeInput = fileCard.querySelector('.custom-page-range');
            const pageRangeType=fileCard.querySelector('.page-range-type');



            let pageCount=fileCard.querySelector('.page-count').innerText;

            let frontBack=fileCard.querySelector('.double-sided').value;

            console.log('Data Set',fileCard.dataset);
            // return;;

            totalFiles++;
            if (!fileCard) return;

            console.log(pageCount);
            const data = {
                name: file.name,
                size: file.size,
                pages: parseInt(pageCount) || 0,
                // colorPages: parseInt(fileCard.dataset.colorPages) || 0,
                format: fileCard.querySelector('.paper-size')?.value || 'A4',
                colorPages: parseInt(pageCount) || 0,
                doubleSided: frontBack == 'oui'? true: false,
                bwPages: parseInt(fileCard.dataset.bwPages) || 0,
                print_type: fileCard.dataset.colorMode == 'bw' ? 'bw' : 'color',
                estimatedPrice: parseFloat(fileCard.querySelector('.estimated-price').textContent.replace('€', '').trim()) || 0
            };

            // Add file metadata to basket (not the actual file)
            panier.push(data);
            console.log(data);
            const pageRange = rangeInput?.value?.trim() || `1-${data.pages}`;

            const newBlob = await extractPagesFromFile(file, pageRange);
            const newFile = new File([newBlob], file.name, { type: 'application/pdf' });

            console.log(newFile);
            // return;

            // ---- Begin Uploading File with Progress ----
            const formData = new FormData();
            if(pageRangeType.value=='custom') {
                formData.append('file', newFile);
            }else {
                formData.append('file', file);
            }

            formData.append('meta', JSON.stringify(data));
            formData.append('_token', document.querySelector('meta[name="csrf-token"]').content); // Laravel CSRF

            // Setup progress bar
            let progressBar = fileCard.querySelector('.upload-progress');
            if (!progressBar) {
                if(!fileCard.querySelector('.upload-progress')) {
                    progressBar = document.createElement('div');
                    progressBar.className = 'upload-progress';
                    progressBar.style.height = '2px';
                    progressBar.style.background = '#E50051';
                    progressBar.style.width = '0%';
                    fileCard.querySelector('.file-upload').appendChild(progressBar);
                }
            }


            // Use XMLHttpRequest manually for progress
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload-file');

            xhr.upload.addEventListener('progress', function (event) {
                if (event.lengthComputable) {
                    const percent = Math.round((event.loaded / event.total) * 100);
                    progressBar.style.width = percent + '%';
                }
            });

            xhr.onload = function () {
                if (xhr.status === 200) {
                    progressBar.style.background = '#00610f'; // success - green
                    console.log('Upload success:', JSON.parse(xhr.responseText));
                    uploadedFilesCount++;
                    console.log('total File',totalFiles);
                    console.log('Uploaded File',uploadedFilesCount);

                    if(uploadedFilesCount===totalFiles){
                        console.log('Total Uploaded Files:', uploadedFilesCount);
                        window.location.href = "{{ route('customers.create.package', ['package' => 'PrintSystems']) }}";
                    }
                    continueBtn.removeAttribute('disabled');
                } else {
                    progressBar.style.background = '#E50051'; // failure - red
                    console.error('Upload failed:', xhr.responseText);
                    continueBtn.removeAttribute('disabled');
                }
            };

            xhr.onerror = function () {
                progressBar.style.background = '#E50051'; // network failure - red
                console.error('Network error');
                continueBtn.removeAttribute('disabled');
            };

            xhr.send(formData);
        });

        // Save panier in localStorage
        localStorage.setItem('panier_upload', JSON.stringify(panier));
    });
});
</script>

@endsection