@extends('frontend.layouts.app')

@section('content')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background: #f8f9fa;
			
			
        }

        /* Floating Settings Button */
        .settings-btn {
            position: fixed;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            background: #ff5722;
            color: white;
            padding: 15px;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
            border: none;
            font-size: 18px;
            z-index: 1000;
        }

        /* Floating Panel */
        .settings-panel {
            position: fixed;
            top: 0;
            right: -350px;
            width: 350px;
            height: 100vh;
            background: white;
            box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.2);
            transition: right 0.3s ease-in-out;
            padding: 20px;
            overflow-y: auto;
            z-index: 999;
        }

        .settings-panel.active {
            right: 0;
        }

        .close-btn {
            display: block;
            text-align: right;
            font-size: 20px;
            cursor: pointer;
            color: #333;
        }

        /* Panel Content */
        .container {
            text-align: center;
        }

        h2 {
            color: #333;
            font-size: 22px;
            text-transform: uppercase;
            font-weight: bold;
            margin-bottom: 10px;
			margin-top: 30px;
        }

        .file-info,
        .formats,
        .guidelines {
            text-align: left;
            margin-bottom: 15px;
        }

        .file-info p, .formats p, .guidelines p {
            font-size: 14px;
            color: #444;
            line-height: 1.5;
        }

        .file-info span,
        .formats span {
            font-weight: bold;
            color: #e74c3c;
        }

        .image-preview {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 15px 0;
        }

        .image-preview img {
            width: 120px;
            border-radius: 5px;
            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
        }

        .download-btn {
            display: inline-block;
            margin: 10px;
            padding: 10px 20px;
            border-radius: 5px;
            color: white;
            background: #ff5722;
            text-decoration: none;
            font-size: 14px;
            transition: 0.3s;
        }

        .download-btn:hover {
            background: #e64a19;
        }

		.icon-upload {
		  margin-right: 8px;
		  color: #0055ff;
		}

    .file-box, .drop-zone {
      background-color: white;
      width: 700px;
      border-radius: 8px;
      padding: 30px;
      margin-top: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .file-info {
      display: flex;
      align-items: center;
    }

    .file-info i {
      color: green;
      font-size: 1.2rem;
      margin-right: 10px;
    }

    .file-info span {
      margin-right: 10px;
    }

    .file-actions i {
      margin-left: 15px;
      font-size: 1.1rem;
      cursor: pointer;
      color: #333;
    }

    .drop-zone {
      flex-direction: column;
      align-items: center;
      text-align: center;
      font-weight: bold;
      color: #002266;
      cursor: pointer;
	  margin: 30px auto 30px;
    }

    .drop-zone p {
      margin: 10px 0 0;
      font-size: 0.9rem;
      font-weight: normal;
      color: gray;
    }

    .fab {
      position: fixed;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      background-color: #FF5722;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

	#fileSummarySection .row {
    width: 700px;
    margin: 0 auto;
}
    </style>
<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">
        <div class="col-md-6">

          <!-- Bloc fichier sélectionné -->
			<div id="fileOnlySection" class="file-box d-none">
			  <div class="file-info">
				<i class="fas fa-check-square text-success"></i>
				<span class="text-danger fw-bold">Fichier sélectionné</span>
				<span id="finalFileName">Printer Project.pdf</span>
				<span class="text-success"><strong>Prix estimé : <span id="finalPrice">5.73 €</span> TTC</strong></span>
			  </div>
			  <div class="file-actions">
				<i class="fas fa-pen" title="Modifier" id="editAnalysisBtn"></i>
				<i class="fas fa-trash" title="Supprimer" onclick="resetUpload()"></i>
				<i class="fas fa-angle-down ms-2" id="toggleAnalysisArrow" style="cursor: pointer;"></i>
			  </div>
			</div>

			<!-- Bloc d’analyse modifiable (apparait après sélection) -->
			<div id="analysisEditable" class="mt-4 d-none">
			  <div class="row g-3">
				<div class="col-md-6">
				 <div class="p-3 border rounded bg-white shadow-sm">
				  <label class="form-label"><i class="fas fa-ruler-combined"></i> Format</label>
				  <select id="formatSelect" class="form-select">
					<option>A4</option>
					<option>A3</option>
				  </select>
					</div>
				</div>
				<div class="col-md-6">
				 <div class="p-3 border rounded bg-white shadow-sm">
				  <label class="form-label"><i class="fas fa-palette"></i> Couleur</label>
				  <select id="colorSelect" class="form-select">
					<option>Couleur</option>
					<option>Noir et blanc</option>
				  </select>
					</div>
				</div>
				<div class="col-md-6">
				 <div class="p-3 border rounded bg-white shadow-sm">
				  <label class="form-label"><i class="fas fa-arrows-alt-v"></i> Orientation</label>
				  <select id="orientationSelect" class="form-select">
					<option>Portrait</option>
					<option>Paysage</option>
				  </select>
					</div>
				</div>
				<div class="col-md-6">
				 <div class="p-3 border rounded bg-white shadow-sm">
				  <label class="form-label"><i class="fas fa-clone"></i> Impression Recto / Verso</label><br>
				  <input type="checkbox" id="rectoVersoCheckbox" class="form-check-input">
				  <label for="rectoVersoCheckbox" class="form-check-label">Recto / Verso</label>
					</div>
				</div>
				<div class="col-md-6">
				 <div class="p-3 border rounded bg-white shadow-sm">
				  <label class="form-label"><i class="fas fa-book"></i> Reliure</label><br>
				  <input type="checkbox" id="reliureCheckbox" class="form-check-input">
				  <label for="reliureCheckbox" class="form-check-label">Ajouter une reliure</label>
					</div>
				</div>
				<div class="col-md-6">
				 <div class="p-3 border rounded bg-white shadow-sm">
				  <label class="form-label"><i class="fas fa-layer-group"></i> Plastification</label><br>
				  <input type="checkbox" id="plastificationCheckbox" class="form-check-input">
				  <label for="plastificationCheckbox" class="form-check-label">Ajouter une plastification</label>
				</div>
				  </div>
			  </div>
			</div>

            <!-- Zone d'upload (en bas) -->
            <div class="drop-zone mt-5 border p-4 rounded shadow bg-light position-relative" id="dropzoneArea">
                <input type="file" accept=".pdf" multiple class="position-absolute w-100 h-100" style="opacity: 0; cursor: pointer;" id="pdfInput">
                <div class="text-center">
                    <i class="fas fa-cloud-arrow-up display-4 text-primary"></i>
                    <h5 class="mt-3">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>

            <!-- Section de résumé -->
			<div id="fileSummarySection" class="mt-3" style="display: none;">
			  <div class="row" id="fileList" style="width: 700px; margin: 0 auto;"></div>
			</div>

			<!-- Zone d'upload -->
			<div class="drop-zone mt-5 border p-4 rounded shadow bg-light position-relative" id="dropzoneArea">
				<input type="file" accept=".pdf" multiple class="position-absolute w-100 h-100" style="opacity: 0; cursor: pointer;" id="pdfInput">
				
			</div>

            <!-- Aperçu PDF -->
            <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">◀️</button>
                    <canvas id="pdfCanvas" class="border rounded shadow" style="width: 250px; height: auto;"></canvas>
                    <button class="btn btn-outline-secondary ms-2" id="nextPageBtn">▶️</button>
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="p-3 border rounded bg-white shadow-sm">
                            <strong><i class="fas fa-file-alt"></i> Page</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>

                <div class="text-center mt-4">
                    <button class="btn btn-primary btn-lg" id="continueBtn">Continuer l'impression ›</button>
                </div>
            </div>
<!-- TEST -->
			<div class="container py-5">
			  <h2 class="text-center mb-4">
				<i class="fas fa-upload"></i> Analyse & Aperçu de votre document
			  </h2>

			  <!-- Liste des fichiers sélectionnés -->
			  <div id="fileListSection" class="mb-4 d-none"></div>

			  <!-- Zone d'upload en bas -->
			  <div class="drop-zone border p-4 rounded shadow bg-light position-relative">
				<input type="file" accept=".pdf" multiple class="position-absolute w-100 h-100" style="opacity: 0; cursor: pointer;" id="pdfInput">
				<div class="text-center">
				  <i class="fas fa-cloud-arrow-up display-4 text-primary"></i>
				  <h5 class="mt-3">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>
			</div>
<!-- end test -->

        </div>
    </div>
</div>
<!-- Floating Settings Button -->
    <button class="settings-btn" id="toggle-btn"><i class="fas fa-cog"></i></button>
<!-- Floating Panel -->
<div class="settings-panel" id="settings-panel">
    <span class="close-btn" id="close-btn"><i class="fas fa-times"></i></span>
    <div class="container">
        <h2><i class="fas fa-layer-group"></i> PETIT FORMAT</h2>
        <div class="file-info">
            <p><span><i class="fas fa-file-pdf"></i> FICHIER À FOURNIR :</span> PDF 300 dpi, CMJN, sans Pantone ni ton direct</p>
        </div>
        <div class="formats">
            <p><span><i class="fas fa-expand"></i> FORMATS À FOURNIR :</span></p>
            <p><i class="fas fa-address-card"></i> Carte de visite : 85 x 55 mm ou 55 x 85 mm + 3 mm bords perdus</p>
            <p><i class="fas fa-square"></i> Carte carrée : 150 x 150 mm ou 100 x 100 mm + 3 mm bords perdus</p>
            <p><i class="fas fa-rectangle-landscape"></i> Carte A6 : 150 x 100 mm ou 100 x 150 mm + 3 mm bords perdus</p>
            <p><i class="fas fa-envelope-open-text"></i> Carte de correspondance : 210 x 100 mm + 3 mm bords perdus</p>
        </div>
        <div class="image-preview" style="font-size: 2rem; gap: 20px;">
            <i class="fas fa-id-card" title="Carte exemple 1"></i>
            <i class="fas fa-clone" title="Carte exemple 2"></i>
        </div>
        <div class="guidelines mt-3">
            <p><strong><i class="fas fa-border-all"></i> Bords perdus :</strong> 3 mm minimum tout le tour</p>
            <p><strong><i class="fas fa-vector-square"></i> Zone de cadrage :</strong> 3 mm minimum</p>
        </div>
        <div class="download-section mt-4">
            <h3><i class="fas fa-download"></i> Télécharger le gabarit</h3>
            <a href="#" class="download-btn"><i class="fas fa-file-indesign"></i> Indesign</a>
            <a href="#" class="download-btn"><i class="fas fa-file-pdf"></i> PDF</a>
        </div>
    </div>
</div>

<script>
  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>
        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 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;
            console.log(pdfDoc);
            document.getElementById('totalPages').textContent = pdfDoc.numPages;
            document.getElementById('previewSection').classList.remove('d-none');
            renderPage(currentPage);
            analyzeColors(pdfDoc);
        };
        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;
    };
});
</script>
<script>
  const input = document.getElementById('pdfInput');
  const listContainer = document.getElementById('fileListSection');
  let fileCounter = 0;

  input.addEventListener('change', (e) => {
    const files = Array.from(e.target.files);
    if (files.length === 0) 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-3';
      card.id = fileId;

      card.innerHTML = `
        <div class="file-info">
          <i class="fas fa-check-square text-success"></i>
          <span class="text-danger fw-bold">Fichier sélectionné</span>
          <span>${file.name}</span>
          <span class="text-success"><strong>Prix estimé : ${price} € TTC</strong></span>
        </div>
        <div class="file-actions">
          <i class="fas fa-pen" title="Modifier" onclick="toggleOptions('${fileId}_options')"></i>
          <i class="fas fa-trash" title="Supprimer" onclick="removeFileCard('${fileId}')"></i>
          <i class="fas fa-angle-down ms-2" id="${fileId}_toggle" style="cursor: pointer;" onclick="toggleOptions('${fileId}_options', this)"></i>
        </div>
        <div class="mt-3 d-none" id="${fileId}_options">
          <div class="row g-3">
            <div class="col-md-6">
              <select class="form-select">
                <option>A4</option><option>A3</option>
              </select>
            </div>
            <div class="col-md-6">
              <select class="form-select">
                <option>Couleur</option><option>Noir et blanc</option>
              </select>
            </div>
            <div class="col-md-6">
              <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}_rectoVerso">
                <label class="form-check-label" for="${fileId}_rectoVerso">Recto / Verso</label>
              </div>
              <div>
                <input type="checkbox" class="form-check-input" id="${fileId}_reliure">
                <label class="form-check-label" for="${fileId}_reliure">Reliure</label>
              </div>
              <div>
                <input type="checkbox" class="form-check-input" id="${fileId}_plastification">
                <label class="form-check-label" for="${fileId}_plastification">Plastification</label>
              </div>
            </div>
          </div>
        </div>
      `;

      listContainer.prepend(card); // pour ajouter en haut de la liste
    });

    // Réinitialiser l'input pour permettre le même fichier à nouveau
    input.value = '';
  });

  function removeFileCard(id) {
    const el = document.getElementById(id);
    if (el) el.remove();

    if (document.querySelectorAll('#fileListSection .file-box').length === 0) {
      document.getElementById('fileListSection').classList.add('d-none');
    }
  }

  function toggleOptions(optionId, toggleIcon = null) {
    const section = document.getElementById(optionId);
    section.classList.toggle('d-none');

    if (toggleIcon) {
      toggleIcon.classList.toggle('fa-angle-down');
      toggleIcon.classList.toggle('fa-angle-up');
    }
  }
</script>



@endsection