@extends('frontend.layouts.app')

@section('content')
  
<div class="container py-5">
    <h2 class="text-center mb-4"><i class="fas fa-upload"></i> Analyse & Aperçu de votre document</h2>

    <div class="row justify-content-center">
        <!-- Liste des fichiers PDF ajoutés -->
        <div id="fileListSection" class="d-none"></div>

        <!-- Zone de dépôt -->
        <div class="drop-zone">
            <input type="file" id="pdfInput" accept=".pdf" multiple>
            <div>
                <i class="fas fa-cloud-arrow-up display-4 text-primary" style="font-size: 2rem;"></i>
                <h5>Glissez un fichier PDF ici ou cliquez pour le sélectionner</h5>
                <small class="text-muted">PDF uniquement - Taille max 10 Mo</small>
            </div>
        </div>

        <!-- Aperçu PDF -->
        <div class="col-md-6">
            <div id="previewSection" class="mt-5 d-none">
                <h4 class="text-center mb-4">Aperçu du document</h4>
                <div class="d-flex justify-content-center mb-3">
                    <button class="btn btn-outline-secondary me-2" id="prevPageBtn">\u25c0\ufe0f</button>
                    <canvas id="pdfCanvas" class="border rounded shadow" style="width: 250px; height: auto;"></canvas>
                    <button class="btn btn-outline-secondary ms-2" id="nextPageBtn">\u25b6\ufe0f</button>
                </div>
                <p class="text-center">Page <span id="currentPage">1</span> / <span id="totalPages">--</span></p>
            </div>

            <!-- Détails du document -->
            <div id="resultSection" class="row g-3 d-none">
                <div class="col-md-6">
                    <div class="p-3 border rounded bg-white shadow-sm">
                        <strong><i class="fas fa-file-alt"></i> Pages</strong><br>
                        <span id="currentPage">1</span> / <span id="totalPages">--</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 border rounded bg-white shadow-sm">
                        <strong><i class="fas fa-ruler-combined"></i> Format</strong><br>
                        <span id="formatText">-</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 border rounded bg-white shadow-sm">
                        <strong><i class="fas fa-palette"></i> Couleur estimée</strong><br>
                        <span id="colorText">(analyse à venir)</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 border rounded bg-white shadow-sm">
                        <strong><i class="fas fa-file"></i> Nom du fichier</strong><br>
                        <span id="fileName">-</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 border rounded bg-white shadow-sm">
                        <strong><i class="fas fa-weight-hanging"></i> Taille</strong><br>
                        <span id="fileSize">-</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 border rounded bg-white shadow-sm">
                        <strong><i class="fas fa-euro-sign"></i> Prix estimé</strong><br>
                        <span id="priceEstimate">Calcul...</span>
                    </div>
                </div>
            </div>

            <!-- Bouton Continuer -->
            <div id="nextSection" class="text-center mt-4 d-none">
                <button class="btn-submit" id="continueBtn">Continuer l'impression ›</button>
            </div>
        </div>
    </div>
</div>
  
	<!-- Floating Settings Button -->
<button class="settings-btn" id="toggle-btn"><i class="fas fa-cog"></i></button>

<!-- Floating Panel (unique) -->
<div class="settings-panel" id="settings-panel">
    <span class="close-btn" id="close-btn"><i class="fas fa-times"></i></span>
    <div class="container">

        @php
            use Platform\Packages\PrintSystems\Models\PrintCalibration;
            $calibration = PrintCalibration::first();
        @endphp

        @if($calibration)
            <h2><i class="fas fa-layer-group"></i> PETIT FORMAT</h2>

            <div class="file-info mb-3">
                <p><i class="fas fa-file-pdf"></i> <strong>FICHIER À FOURNIR :</strong> {{ $calibration->file_requirement }}</p>
            </div>

            <div class="formats mb-3">
                <p><i class="fas fa-expand"></i> <strong>FORMATS À FOURNIR :</strong></p>
                <p><i class="fas fa-address-card"></i> Carte de visite : {{ $calibration->business_card_format }}</p>
                <p><i class="fas fa-square"></i> Carte carrée : {{ $calibration->square_card_format }}</p>
                <p><i class="fas fa-rectangle-landscape"></i> Carte A6 : {{ $calibration->a6_card_format }}</p>
                <p><i class="fas fa-envelope-open-text"></i> Carte de correspondance : {{ $calibration->correspondence_card_format }}</p>
            </div>

            <div class="guidelines mb-3">
                <p><i class="fas fa-border-all"></i> <strong>Bords perdus :</strong> {{ $calibration->bleed_info }}</p>
                <p><i class="fas fa-vector-square"></i> <strong>Zone de cadrage :</strong> {{ $calibration->frame_info }}</p>
            </div>
				@php
					$calibration = \Platform\Packages\PrintSystems\Models\PrintCalibration::first();
				@endphp

				@if($calibration)
					<div class="form-group mb-3">
						<label for="paper_type"><i class="fas fa-print"></i> Choisissez un format de planche</label>
						<select name="paper_type" id="paper_type" class="form-control">
							<option value="A4" selected>A4 (par défaut)</option>

							@if($calibration->paper_type === 'A3')
								<option value="A3">A3</option>
							@endif
							@if($calibration->paper_type === 'SRA3')
								<option value="SRA3">SRA3</option>
							@endif
						</select>
					</div>
				@endif


          <div class="download-section mt-4">
			<h4><i class="fas fa-download"></i> Télécharger le gabarit :</h4>

			<div class="row mt-3">
				@if($calibration->indesign_template_link)
					<div class="col-6">
						<a href="{{ asset('storage/' . $calibration->indesign_template_link) }}"
						   class="btn btn-outline-primary w-100 d-flex align-items-center justify-content-center gap-2"
						   download>
							<i class="fas fa-file-indesign fa-lg"></i> Indesign
						</a>
					</div>
				@endif

				@if($calibration->pdf_template_link)
					<div class="col-6">
						<a href="{{ asset('storage/' . $calibration->pdf_template_link) }}"
						   class="btn btn-outline-danger w-100 d-flex align-items-center justify-content-center gap-2"
						   download>
							<i class="fas fa-file-pdf fa-lg"></i> PDF
						</a>
					</div>
				@endif
			</div>
		</div>


        @else
            <p class="text-warning"><i class="fas fa-exclamation-triangle"></i> Aucun calibrage défini pour l’instant.</p>
        @endif

    </div>
</div>


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

        toggleBtn.addEventListener("click", () => {
            settingsPanel.classList.toggle("active");
        });

        closeBtn.addEventListener("click", () => {
            settingsPanel.classList.remove("active");
        });
    </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const editBtn = document.getElementById('editAnalysisBtn');
        const toggleArrow = document.getElementById('toggleAnalysisArrow');
        const editableSection = document.getElementById('analysisEditable');
        const fileSection = document.getElementById('fileOnlySection');
        const pdfInput = document.getElementById('pdfInput');

        const fileNameEl = document.getElementById('finalFileName');
        const finalPriceEl = document.getElementById('finalPrice');

        // Affichage fichier sélectionné
        pdfInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file && file.type === 'application/pdf') {
                fileNameEl.textContent = file.name;
                finalPriceEl.textContent = (Math.random() * 5 + 1).toFixed(2) + ' €';

                fileSection.classList.remove('d-none');
                editableSection.classList.add('d-none');
                toggleArrow.classList.add('fa-angle-down');
                toggleArrow.classList.remove('fa-angle-up');
                fileSection.scrollIntoView({behavior: 'smooth'});
            }
        });

        // Toggle affichage section modifiable
        editBtn.addEventListener('click', toggleEdit);
        toggleArrow.addEventListener('click', toggleEdit);

        function toggleEdit() {
            editableSection.classList.toggle('d-none');
            toggleArrow.classList.toggle('fa-angle-down');
            toggleArrow.classList.toggle('fa-angle-up');
            if (!editableSection.classList.contains('d-none')) {
                editableSection.scrollIntoView({behavior: 'smooth'});
            }
        }

        // Réinitialiser l'état
        function resetUpload() {
            pdfInput.value = '';
            fileSection.classList.add('d-none');
            editableSection.classList.add('d-none');
            fileNameEl.textContent = '';
            finalPriceEl.textContent = '0 €';
            toggleArrow.classList.add('fa-angle-down');
            toggleArrow.classList.remove('fa-angle-up');
        }
    });
</script>

<script>
    const pdfInput = document.getElementById('pdfInput');
    const fileSection = document.getElementById('fileOnlySection');
    const fileNameEl = document.getElementById('finalFileName');
    const finalPriceEl = document.getElementById('finalPrice');

    pdfInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file && file.type === 'application/pdf') {
            fileNameEl.textContent = file.name;

            // Simuler un prix estimé
            const simulatedPrice = (Math.random() * 5 + 1).toFixed(2);
            finalPriceEl.textContent = `${simulatedPrice} €`;

            fileSection.classList.remove('d-none');
            fileSection.scrollIntoView({ behavior: 'smooth' });
        }
    });

    function resetUpload() {
        pdfInput.value = '';
        fileSection.classList.add('d-none');
        fileNameEl.textContent = 'Text.pdf';
        finalPriceEl.textContent = 'Calcul...';
    }
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('pdfInput');
    const canvas = document.getElementById('pdfCanvas');
    const ctx = canvas.getContext('2d');

    let pdfDoc = null;
    let currentPage = 1;
    let colorPages = 0;
    let bwPages = 0;
    let fileSize = 0;
    let fileName = '';

    input.addEventListener('change', e => {
        const file = e.target.files[0];
        if (file && file.type === 'application/pdf') {
            fileSize = (file.size / 1024).toFixed(2);
            fileName = file.name;
            document.getElementById('fileName').textContent = fileName;
            document.getElementById('fileSize').textContent = fileSize + ' Ko';
            renderPDF(file);
        }
    });

    async function renderPDF(file) {
        const reader = new FileReader();
        reader.onload = async function () {
            const typedArray = new Uint8Array(this.result);
            pdfDoc = await pdfjsLib.getDocument(typedArray).promise;
            document.getElementById('totalPages').textContent = pdfDoc.numPages;
            document.getElementById('previewSection').classList.remove('d-none');
            renderPage(currentPage);
            analyzeColors(pdfDoc);
        };

		document.getElementById('previewSection').classList.remove('d-none');
		renderPage(currentPage);
		analyzeColors(pdfDoc);

		// Affiche les détails après chargement
		document.getElementById('resultSection').classList.remove('d-none');
		document.getElementById('sextSection').classList.remove('d-none');

        reader.readAsArrayBuffer(file);
    }

    async function renderPage(num) {
        const page = await pdfDoc.getPage(num);
        const viewport = page.getViewport({ scale: 1.2 });
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        await page.render({ canvasContext: ctx, viewport }).promise;
        document.getElementById('currentPage').textContent = num;

        const widthMM = viewport.width * 0.3528;
        const heightMM = viewport.height * 0.3528;
        const format = getPageSize(widthMM, heightMM);
        document.getElementById('formatText').textContent = format;
    }

    async function analyzeColors(pdfDoc) {
        colorPages = 0;
        bwPages = 0;

        for (let i = 1; i <= pdfDoc.numPages; i++) {
            const page = await pdfDoc.getPage(i);
            const viewport = page.getViewport({ scale: 1.0 });
            const tempCanvas = document.createElement('canvas');
            const tempCtx = tempCanvas.getContext('2d');

            tempCanvas.width = viewport.width;
            tempCanvas.height = viewport.height;

            await page.render({ canvasContext: tempCtx, viewport }).promise;
            const imgData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height).data;

            let isColor = false;
            for (let j = 0; j < imgData.length; j += 4) {
                if (!(imgData[j] === imgData[j+1] && imgData[j+1] === imgData[j+2])) {
                    isColor = true;
                    break;
                }
            }

            isColor ? colorPages++ : bwPages++;
        }

        document.getElementById('colorText').textContent = `${colorPages} couleur(s), ${bwPages} N&B`;

        fetch('/admin/calculate-price', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                pages: [
                    { type: 'color', count: colorPages },
                    { type: 'bw', count: bwPages }
                ],
                paper_size: document.getElementById('formatText').textContent,
                reliure: false,
                plastification: false
            })
        })
        .then(res => res.json())
        .then(data => {
            document.getElementById('priceEstimate').textContent = data.total_ttc + ' €';
            document.getElementById('finalPrice').textContent = data.total_ttc + ' €';
        })
        .catch(err => console.error(err));
    }

    function getPageSize(w, h) {
        if (Math.abs(w - 210) < 10 && Math.abs(h - 297) < 10) return 'A4';
        if (Math.abs(w - 297) < 10 && Math.abs(h - 420) < 10) return 'A3';
        return `${Math.round(w)}mm × ${Math.round(h)}mm`;
    }

    document.getElementById('prevPageBtn').onclick = () => {
        if (currentPage > 1) {
            currentPage--;
            renderPage(currentPage);
        }
    };

    document.getElementById('nextPageBtn').onclick = () => {
        if (currentPage < pdfDoc.numPages) {
            currentPage++;
            renderPage(currentPage);
        }
    };

    document.getElementById('continueBtn').onclick = () => {
        document.getElementById('previewSection').classList.add('d-none');
        document.getElementById('fileOnlySection').classList.remove('d-none');
		document.getElementById('fileOnlySection').scrollIntoView({ behavior: 'smooth' });
        document.getElementById('finalFileName').textContent = fileName;
		document.getElementById('resultSection').classList.add('d-none');
		document.getElementById('nextSection').classList.add('d-none');
    };
});
</script>
  
<script>
  const continueBtn = document.getElementById('continueBtn');
  const pdfInput = document.getElementById('pdfInput');

  pdfInput.addEventListener('change', () => {
    if (pdfInput.files.length > 0) {
      continueBtn.style.display = 'block';
    } else {
      continueBtn.style.display = 'none';
    }
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('pdfInput');
    const listContainer = document.getElementById('fileListSection');
    const canvas = document.getElementById('pdfCanvas');
    const ctx = canvas.getContext('2d');

    const currentPageEl = document.getElementById('currentPage');
    const totalPagesEl = document.getElementById('totalPages');
    const prevBtn = document.getElementById('prevPageBtn');
    const nextBtn = document.getElementById('nextPageBtn');
    const continueBtn = document.getElementById('continueBtn');

    const previewSection = document.getElementById('previewSection');
    const resultSection = document.getElementById('resultSection');
    const formatText = document.getElementById('formatText');
    const fileNameText = document.getElementById('fileName');
    const fileSizeText = document.getElementById('fileSize');
    const colorText = document.getElementById('colorText');
    const priceEstimate = document.getElementById('priceEstimate');
    const finalFileName = document.getElementById('finalFileName');
    const finalPrice = document.getElementById('finalPrice');
    const nextSection = document.getElementById('nextSection');

    let fileCounter = 0;
    let pdfFiles = {};
    let currentFileId = null;
    let currentPage = 1;
    input.addEventListener('change', (e) => {
        const files = Array.from(e.target.files);
        if (!files.length) return;

        listContainer.classList.remove('d-none');

        files.forEach(file => {
            if (file.type !== 'application/pdf') return;

            fileCounter++;
            const fileId = `file_${fileCounter}`;
            const price = (Math.random() * 5 + 1).toFixed(2);

            const card = document.createElement('div');
            card.className = 'file-box mb-2 p-3 border bg-white rounded shadow-sm';
            card.id = fileId;
            card.innerHTML = `
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <i class="fas fa-check-circle text-success me-2"></i>
                  <strong class="text-danger">Fichier sélectionné :</strong>
                  <span class="fw-bold text-dark">${file.name}</span><br>
                  <small class="text-success"><i class="fas fa-euro-sign"></i> Prix estimé : ${price} € TTC</small>
                </div>
                <div>
                  <button class="btn btn-sm btn-dark me-1" onclick="previewFile('${fileId}')"><i class="fas fa-eye"></i></button>
                  <button class="btn btn-sm btn-danger me-1" onclick="removeFileCard('${fileId}')"><i class="fas fa-trash"></i></button>
                  <button class="btn btn-sm btn-secondary" onclick="toggleOptions('${fileId}_options', this)"><i class="fas fa-angle-down"></i></button>
                </div>
              </div>
              <div class="file-options d-none mt-2" id="${fileId}_options">
                <div class="row">
                  <div class="col-md-6"><label>Format</label><select class="form-select"><option>A4</option><option>A3</option></select></div>
                  <div class="col-md-6"><label>Couleur</label><select class="form-select"><option>Couleur</option><option>Noir et blanc</option></select></div>
                  <div class="col-md-6"><label>Orientation</label><select class="form-select"><option>Portrait</option><option>Paysage</option></select></div>
                  <div class="col-md-6">
                    <div><input type="checkbox" class="form-check-input" id="${fileId}_reliure"> <label for="${fileId}_reliure">Reliure</label></div>
                    <div><input type="checkbox" class="form-check-input" id="${fileId}_plastification"> <label for="${fileId}_plastification">Plastification</label></div>
                  </div>
                </div>
              </div>
            `;

            listContainer.appendChild(card);

            const reader = new FileReader();
            reader.onload = async function () {
                const typedArray = new Uint8Array(this.result);
                const pdfDoc = await pdfjsLib.getDocument(typedArray).promise;
                pdfFiles[fileId] = { file, pdfDoc, price };
                if (!currentFileId) previewFile(fileId);
            };
            reader.readAsArrayBuffer(file);
        });

        input.value = '';
    });

    window.previewFile = async function(fileId) {
        if (!pdfFiles[fileId]) return;
        currentFileId = fileId;
        currentPage = 1;

        const { file, pdfDoc } = pdfFiles[fileId];
        fileNameText.textContent = file.name;
        finalFileName.textContent = file.name;
        fileSizeText.textContent = (file.size / 1024).toFixed(2) + ' Ko';
        totalPagesEl.textContent = pdfDoc.numPages;

        previewSection.classList.remove('d-none');
        resultSection.classList.remove('d-none');
        nextSection.classList.remove('d-none');
        continueBtn.style.display = 'inline-block';

        await renderPage(currentPage);
        await analyzeColors(pdfDoc);
    }

    async function renderPage(num) {
        const pdfDoc = pdfFiles[currentFileId]?.pdfDoc;
        if (!pdfDoc) return;

        const page = await pdfDoc.getPage(num);
        const viewport = page.getViewport({ scale: 1.5 });
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        await page.render({ canvasContext: ctx, viewport }).promise;

        currentPageEl.textContent = num;
        const widthMM = viewport.width * 0.3528;
        const heightMM = viewport.height * 0.3528;
        formatText.textContent = getPageSize(widthMM, heightMM);
    }

    async function analyzeColors(pdfDoc) {
        let colorPages = 0, bwPages = 0;

        for (let i = 1; i <= pdfDoc.numPages; i++) {
            const page = await pdfDoc.getPage(i);
            const viewport = page.getViewport({ scale: 1 });
            const tempCanvas = document.createElement('canvas');
            const tempCtx = tempCanvas.getContext('2d');
            tempCanvas.width = viewport.width;
            tempCanvas.height = viewport.height;

            await page.render({ canvasContext: tempCtx, viewport }).promise;
            const imgData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height).data;

            let isColor = false;
            for (let j = 0; j < imgData.length; j += 4) {
                if (!(imgData[j] === imgData[j + 1] && imgData[j + 1] === imgData[j + 2])) {
                    isColor = true;
                    break;
                }
            }

            isColor ? colorPages++ : bwPages++;
        }

        colorText.textContent = `${colorPages} couleur(s), ${bwPages} N&B`;

        const format = formatText.textContent;

        fetch('/admin/calculate-price', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                pages: [
                    { type: 'color', count: colorPages },
                    { type: 'bw', count: bwPages }
                ],
                paper_size: format,
                reliure: false,
                plastification: false
            })
        })
        .then(res => res.json())
        .then(data => {
            priceEstimate.textContent = data.total_ttc + ' €';
            finalPrice.textContent = data.total_ttc + ' €';
        })
        .catch(err => console.error(err));
    }

    function getPageSize(w, h) {
        if (Math.abs(w - 210) < 10 && Math.abs(h - 297) < 10) return 'A4';
        if (Math.abs(w - 297) < 10 && Math.abs(h - 420) < 10) return 'A3';
        return `${Math.round(w)}mm × ${Math.round(h)}mm`;
    }

    function toggleOptions(id, btn) {
        const el = document.getElementById(id);
        if (el) el.classList.toggle('d-none');
        if (btn) {
            btn.classList.toggle('fa-angle-down');
            btn.classList.toggle('fa-angle-up');
        }
    }

    window.removeFileCard = function(id) {
        const el = document.getElementById(id);
        const opt = document.getElementById(id + '_options');
        if (el) el.remove();
        if (opt) opt.remove();
        delete pdfFiles[id];
        if (Object.keys(pdfFiles).length === 0) {
            previewSection.classList.add('d-none');
            resultSection.classList.add('d-none');
            nextSection.classList.add('d-none');
        }
    }

    prevBtn.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            renderPage(currentPage);
        }
    });

    nextBtn.addEventListener('click', () => {
        const pdfDoc = pdfFiles[currentFileId]?.pdfDoc;
        if (pdfDoc && currentPage < pdfDoc.numPages) {
            currentPage++;
            renderPage(currentPage);
        }
    });

    continueBtn.addEventListener('click', () => {
        previewSection.classList.add('d-none');
        document.getElementById('fileOnlySection')?.classList.remove('d-none');
        document.getElementById('fileOnlySection')?.scrollIntoView({ behavior: 'smooth' });
    });
});
</script>



@endsection