{{ template "headers.html" . }}

<style>
.w-card {
  width: 90vw;
  max-width: 470px;
}

#uploadedLogo, .cropper-container, .cropper-container img {
  width: auto;
  max-width: 100%;
  max-height: 200px !important;
}
.cropper-crop-box {
  max-height: 160px !important;
}

.desktop-layout-phase1 {
  margin-top: 64px !important;
}

.gradient-bg {
    background: linear-gradient(135deg, #2d2d2d, #000000);
}
.color-picker {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: 2px solid #8888;
  border-radius: 4px;
  cursor: pointer;
  margin: 3px;
}
.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}
.color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}
.color-scheme-block {
  transition: all 0.3s ease;
  border: 2px solid #000000;
}
.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #000000;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  margin-right: 1rem;
}
.border-2x {
border-width: 2px;
border-color: #000;
}
.main-content.preview {
  background: #999;
}
@media (max-width: 1023px) {
  body, main {
    background: #fff !important;
    text-align: center !important;
  }
  #desktop-playground {
    padding: 96px 0 64px !important;
  }
  #desktop-playground, .desktop-layout, .max-w-md {
    text-align: center !important;
    margin: 0 auto;
    width: 100%;
  }
}
@media (min-width:1024px) {
  body, main {
    background: #f8f5f1 !important;
  }
  .desktop-layout {
    display: flex;
    min-height: calc(100vh - 64px);
  }
  .sidebar, .main-content {
    width: 50%;
    max-width: 50%;
    overflow-y: auto;
  }
  .sidebar {
    border-right: 2px solid #000000;
  }
  nav {
    border-top: 2px solid #000000;
    height: 64px; /* Fixed height for navbar */
  }
  .h-screen-64{
    height: calc(100vh - 64px) !important;
  }
}
</style>

<form id="initialForm" class="space-y-6">

<nav id="topNav" class="fixed right-0 bottom-0 left-0 z-10 bg-white border-b-2 border-black shadow">
	<div class="container">
	<div class="flex justify-between items-center h-16">
		<a href="/create" class="text-black hover:text-gray-700">
		<i class="text-xl fas fa-arrow-left"></i>
        </a>

      <button type="submit" class="flex justify-center px-4 py-2 text-sm font-medium text-white bg-black rounded-md border border-transparent shadow-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
        {{ "Commencer" | t }}
      </button>
    </div>
	</div>
</nav>

<div id="phase1" class="desktop-layout">
    <div class="block flex-col justify-center p-8 text-white md:flex sidebar gradient-bg">
        <div class="mx-auto max-w-md">
            <h1 class="mb-4 text-4xl font-bold">{{ "Création de votre gabarit" | t }}</h1>
            <p class="mb-8 text-xl">{{ "Personnalisez votre carte de visite en quelques étapes simples." | t }}</p>
        </div>
    </div>
    
    <div class="block flex-col justify-center p-8 md:flex main-content">
        <div class="mx-auto max-w-3xl">
            <h2 class="mb-6 text-2xl font-semibold">{{ "Commençons par les bases" | t }}</h2>
                <div class="mt-4">
                <label for="companyName" class="block text-sm font-medium text-gray-700">{{ "Nom de l'entreprise" | t }}</label>
                <input type="text" id="companyName" name="companyName" required class="block px-3 py-2 mt-1 w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-black focus:border-black">
                </div>
                
                <div class="mt-10">
                <label class="block text-sm font-medium text-gray-700">{{ "Type d'URL" | t }}</label>
                <div class="mt-2 space-y-4">
                    <div class="flex items-center">
                    <label for="urlTypePath" class="block mx-4 ml-3 font-medium text-gray-700 text-md">
                        <input id="urlTypePath" name="urlType" type="radio" value="path" class="inline text-black border-gray-300 focus:ring-black" checked>
                        <img src="/cdn/design/logos/card-black.png" class="inline h-5" />
                    </label>
                    <label for="urlTypeDomain" class="block mx-4 ml-3 font-medium text-gray-700 text-md">
                        <input id="urlTypeDomain" name="urlType" type="radio" value="domain" class="inline text-black border-gray-300 focus:ring-black">
                        Domaine personnalisé
                    </label>
                    </div>
                </div>
                </div>
                
                <div id="pathInput" class="mt-10 space-y-2">
                <label for="path" class="block text-sm font-medium text-gray-700">{{ "Chemin" | t }}</label>
                <div class="flex mt-1 rounded-md shadow-sm">
                    <span class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300">
                    https://card.pm/
                    </span>
                    <input type="text" name="path" id="path" required class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:ring-black focus:border-black">
                </div>
                </div>
                
                <div id="domainInput" class="hidden mt-10 space-y-2">
                <label for="domain" class="block text-sm font-medium text-gray-700">{{ "Domaine" | t }}</label>
                <div class="flex mt-1 rounded-md shadow-sm">
                    <span class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300">
                    https://
                    </span>
                    <input type="text" name="domain" id="domain" class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:ring-black focus:border-black">
                </div>
                </div>
                
                <div class="mt-10">
                <p class="text-sm text-gray-500">{{ "Aperçu :" | t }} <span id="urlPreview" class="p-2 bg-gray-200">https://card.pm/</span></p>
                </div>
                
        </div>
    </div>
  </div>
  
</form>

  <form id="templateForm" action="/bin/template/save" method="post" enctype="multipart/form-data" class="hidden">
    <nav class="fixed right-0 bottom-0 left-0 p-2">
      <div class="container flex justify-end">
        <button type="submit" form="templateForm" class="px-6 py-2 text-lg text-white bg-black rounded-md transition duration-300 hover:bg-gray-800">{{ "Enregistrer" | t }}</button>
      </div>
    </nav>
    <div id="phase2" class="desktop-layout">
      <div class="overflow-y-auto p-8 pb-44 h-screen-64 sidebar">
        <h1 class="mb-8 text-3xl font-bold">{{ "Création de votre gabarit" | t }}</h1>
        
        <div id="step1" class="step">
          <div class="flex items-center mb-4">
            <div class="step-number">1</div>
            <h2 class="text-2xl font-semibold">{{ "Téléchargez votre logo" | t }}</h2>
          </div>
          <div id="uploadArea" class="flex justify-center items-center w-full">
            <label for="logoUpload" class="flex flex-col justify-center items-center w-full h-64 bg-white rounded-lg border-gray-300 border-dashed cursor-pointer border-2x hover:bg-gray-100">
              <div class="flex flex-col justify-center items-center pt-5 pb-6">
                <svg class="mb-3 w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
                <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Cliquez pour télécharger</span> ou glissez et déposez</p>
                <p class="text-xs text-gray-500">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
              </div>
              <input id="logoUpload" name="logo" type="file" class="hidden" accept="image/*" />
            </label>
          </div>
          <div id="logoPreview" class="hidden mt-4">
            <img id="uploadedLogo" src="" alt="Logo uploadé" class="mx-auto mb-4 max-w-xs" />
            <div class="flex justify-center space-x-4">
              <button type="button" id="replaceBtn" class="px-4 py-2 text-white bg-black rounded transition duration-300 hover:bg-gray-800">Remplacer</button>
              <button type="button" id="resizeBtn" class="px-4 py-2 text-white bg-black rounded transition duration-300 hover:bg-gray-800">Retailler</button>
              <button type="button" id="cropBtn" class="px-4 py-2 text-white bg-black rounded transition duration-300 hover:bg-gray-800">Détourer</button>
            </div>
          </div>
        </div>
  
        <div id="step2" class="mt-8 step">
          <div class="flex items-center mb-4">
            <div class="step-number">2</div>
            <h2 class="text-2xl font-semibold">{{ "Choisissez votre jeu de couleurs" | t }}</h2>
          </div>
          <div id="colorScheme" class="p-4 bg-white rounded-lg shadow-md color-scheme-block">
            <div class="grid grid-cols-2 gap-4">
              <div class="flex items-center">
                <input type="color" id="colorNames" name="colorNames" class="color-picker">
                <label for="colorNames" class="ml-2">{{ "Noms" | t }}</label>
              </div>
              <div class="flex items-center">
                <input type="color" id="colorFunctions" name="colorFunctions" class="color-picker">
                <label for="colorFunctions" class="ml-2">{{ "Mise en avant" | t }}</label>
              </div>
              <div class="flex items-center">
                <input type="color" id="colorText" name="colorText" class="color-picker">
                <label for="colorText" class="ml-2">{{ "Texte classique" | t }}</label>
              </div>
              <div class="flex items-center">
                <input type="color" id="colorBackground" name="colorBackground" class="color-picker">
                <label for="colorBackground" class="ml-2">{{ "Fond carte" | t }}</label>
              </div>
            </div>
          </div>
        </div>
  
        <div id="step3" class="mt-8 step">
          <div class="flex items-center mb-4">
            <div class="step-number">3</div>
            <h2 class="text-2xl font-semibold">{{ "Sélectionnez votre typographie" | t }}</h2>
          </div>
          <div class="mb-4">
            <input type="text" id="fontSearch" placeholder="{{ "Rechercher une police..." | t }}" class="px-3 py-2 w-full rounded-md border shadow-md focus:outline-none focus:ring-2 focus:ring-black">
          </div>
          <div id="fontOptions" class="grid grid-cols-1 gap-4 md:grid-cols-3">
            <!-- Font options will be dynamically inserted here -->
          </div>
        </div>
      </div>
      
      <div class="flex flex-col justify-center items-center p-8 main-content preview">
        <h2 class="mb-6 text-2xl font-semibold text-white">Aperçu en temps réel</h2>
        <div id="cardPreview" class="overflow-hidden h-56 rounded-lg shadow-md w-card">
          <!-- Card preview content will be dynamically updated here -->
        </div>
      </div>
    </div>
  
    <!-- Hidden inputs to store initial form data -->
    <input type="hidden" id="hiddenCompanyName" name="companyName">
    <input type="hidden" id="hiddenUrlType" name="urlType">
    <input type="hidden" id="hiddenPath" name="path">
    <input type="hidden" id="hiddenDomain" name="domain">
  </form>
  
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">

<script>
document.addEventListener('DOMContentLoaded', function() {
    const colorThief = new ColorThief();
    let cropper;

    // Company Name to Path conversion
    document.getElementById('companyName').addEventListener('input', function(e) {
    const companyName = e.target.value;
    const path = companyName.toLowerCase()
        .replace(/[éèêë]/g, 'e')
        .replace(/[àâä]/g, 'a')
        .replace(/[ùûü]/g, 'u')
        .replace(/[îï]/g, 'i')
        .replace(/[ôö]/g, 'o')
        .replace(/ç/g, 'c')
        .replace(/[^a-z0-9]/g, '-')
        .replace(/-+/g, '-')
        .replace(/^-|-$/g, '');
    document.getElementById('path').value = path;
    updateUrlPreview();
    });

    // Phase 1 to Phase 2 transition
    document.getElementById('initialForm').addEventListener('submit', function(e) {
    e.preventDefault();
    document.getElementById('topNav').style.display = 'none';
    const companyName = document.getElementById('companyName').value;
    const path = document.getElementById('path').value;
    const domain = document.getElementById('domain').value;
    const urlType = document.querySelector('input[name="urlType"]:checked').value;

    if (companyName && ((urlType === 'path' && path) || (urlType === 'domain' && domain))) {
        document.getElementById('phase1').classList.add('hidden');
        document.getElementById('templateForm').classList.remove('hidden');
        
        // Store initial form data in hidden inputs
        document.getElementById('hiddenCompanyName').value = companyName;
        document.getElementById('hiddenUrlType').value = urlType;
        document.getElementById('hiddenPath').value = path;
        document.getElementById('hiddenDomain').value = domain;
    } else {
        alert('Veuillez remplir tous les champs obligatoires.');
    }
    });

    // URL Type Toggle
    document.querySelectorAll('input[name="urlType"]').forEach((elem) => {
    elem.addEventListener("change", function(event) {
        const pathInput = document.getElementById('pathInput');
        const domainInput = document.getElementById('domainInput');
        
        if (event.target.value === "path") {
        pathInput.classList.remove('hidden');
        domainInput.classList.add('hidden');
        document.getElementById('path').required = true;
        document.getElementById('domain').required = false;
        } else {
        pathInput.classList.add('hidden');
        domainInput.classList.remove('hidden');
        document.getElementById('path').required = false;
        document.getElementById('domain').required = true;
        }
        updateUrlPreview();
    });
    });

    // Update URL preview
    function updateUrlPreview() {
    const urlPreview = document.getElementById('urlPreview');
    const urlType = document.querySelector('input[name="urlType"]:checked').value;
    if (urlType === "path") {
        urlPreview.textContent = `https://card.pm/${document.getElementById('path').value}`;
    } else {
        urlPreview.textContent = `https://${document.getElementById('domain').value}`;
    }
    }

    // Update URL preview on input
    document.getElementById('path').addEventListener('input', updateUrlPreview);
    document.getElementById('domain').addEventListener('input', updateUrlPreview);

    // Logo Upload Preview
    document.getElementById('logoUpload').addEventListener('change', function(event) {
    handleLogoUpload(event.target.files[0]);
    });

    function handleLogoUpload(file) {
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            const pngDataUrl = canvas.toDataURL('image/png');
            
            document.getElementById('uploadedLogo').src = pngDataUrl;
            document.getElementById('logoPreview').classList.remove('hidden');
            document.getElementById('uploadArea').classList.add('hidden');
            generateInitialColorScheme(this);
            updateCardPreview();
        }
        img.src = e.target.result;
        }
        reader.readAsDataURL(file);
    }
    }

    // Logo manipulation buttons
    document.getElementById('replaceBtn').addEventListener('click', () => {
    document.getElementById('logoPreview').classList.add('hidden');
    document.getElementById('uploadArea').classList.remove('hidden');
    document.getElementById('logoUpload').value = ''; // Reset file input
    if (cropper) {
        cropper.destroy();
        cropper = null;
    }
    updateCardPreview();
    });

    document.getElementById('resizeBtn').addEventListener('click', () => {
    const image = document.getElementById('uploadedLogo');
    if (cropper) {
        // Apply crop
        const croppedCanvas = cropper.getCroppedCanvas();
        image.src = croppedCanvas.toDataURL('image/png');
        cropper.destroy();
        cropper = null;
    } else {
        // Initialize cropper
        cropper = new Cropper(image, {
        aspectRatio: NaN,
        viewMode: 1,
        minCropBoxWidth: 100,
        minCropBoxHeight: 100,
        ready() {
            this.cropper.setCropBoxData({ width: 300, height: 200 });
        },
        });
    }
    updateCardPreview();
    });

    document.getElementById('cropBtn').addEventListener('click', () => {
    const image = document.getElementById('uploadedLogo');
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = image.naturalWidth;
    canvas.height = image.naturalHeight;
    ctx.drawImage(image, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Algorithme simple pour détecter et supprimer le fond
    const threshold = 240; // Ajustez selon vos besoins
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        
        // Si le pixel est proche du blanc, le rendre transparent
        if (r > threshold && g > threshold && b > threshold) {
        data[i + 3] = 0; // Canal alpha à 0 (transparent)
        }
    }

    ctx.putImageData(imageData, 0, 0);

    // Mettre à jour l'image affichée
    image.src = canvas.toDataURL('image/png');
    alert('Détourage terminé !');
    updateCardPreview();
    });

    // Generate Initial Color Scheme
    function generateInitialColorScheme(logoImg = null) {
    let colors;
    if (logoImg) {
        try {
        colors = colorThief.getPalette(logoImg, 4);
        } catch (error) {
        console.error('Error getting palette:', error);
        colors = [[0, 0, 0], [51, 51, 51], [102, 102, 102], [255, 255, 255]];
        }
    } else {
        colors = [[0, 0, 0], [51, 51, 51], [102, 102, 102], [255, 255, 255]];
    }

    // Ensure the first 3 colors are dark
    colors = colors.map((color, index) => {
        if (index == 3) {
            color = [255,255,255]
        }
        if (index>0 && index < 3) {
        return ensureDarkColor(color);
        }
        return color;
    });

    document.getElementById('colorNames').value = rgbToHex(colors[0]);
    document.getElementById('colorFunctions').value = rgbToHex(colors[1]);
    document.getElementById('colorText').value = rgbToHex(colors[2]);
    document.getElementById('colorBackground').value = rgbToHex(colors[3]);
    
    updateCardPreview();
    }

    function ensureDarkColor(color) {
    const luminance = (0.299 * color[0] + 0.587 * color[1] + 0.114 * color[2]) / 255;
    if (luminance > 0.5) {
        // If the color is too light, darken it
        return color.map(c => Math.max(0, c - 100));
    }
    return color;
    }

    function rgbToHex(rgb) {
    return "#" + rgb.map(x => {
        const hex = x.toString(16);
        return hex.length === 1 ? "0" + hex : hex;
    }).join('');
    }

    // Typography Selection
    const fonts = [
      'Inter', 'Lato', 'Merriweather', 'Montserrat', 'Open Sans', 'Oswald', 'Poppins', 'Raleway', 'Roboto'
    ];

    function loadFonts() {
    const fontOptions = document.getElementById('fontOptions');
    fonts.forEach(font => {
        const option = document.createElement('div');
        option.className = 'font-option';
        option.innerHTML = `
        <label class="flex items-center space-x-2">
            <input type="radio" name="font" value="${font}">
            <span style="margin-left:8px; font-family: '${font}', sans-serif;">${font}</span>
        </label>
        `;
        fontOptions.appendChild(option);

        // Dynamically load the font
        const link = document.createElement('link');
        link.href = `https://fonts.googleapis.com/css?family=${font.replace(' ', '+')}:400,700&display=swap`;
        link.rel = 'stylesheet';
        document.head.appendChild(link);
    });
    }

    document.getElementById('fontSearch').addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    document.querySelectorAll('.font-option').forEach(option => {
        const fontName = option.textContent.toLowerCase();
        option.style.display = fontName.includes(searchTerm) ? '' : 'none';
    });
    });

    // Update Card Preview
    function updateCardPreview() {
    const cardPreview = document.getElementById('cardPreview');
    const logoSrc = document.getElementById('uploadedLogo')?.src;
    const colorNames = document.getElementById('colorNames').value;
    const colorFunctions = document.getElementById('colorFunctions').value;
    const colorText = document.getElementById('colorText').value;
    const colorBackground = document.getElementById('colorBackground').value;
    const selectedFont = document.querySelector('input[name="font"]:checked')?.value || 'Inter';

    cardPreview.style.fontFamily = `'${selectedFont}', sans-serif`;
    cardPreview.style.backgroundColor = colorBackground;
    cardPreview.innerHTML = `
        <div class="p-6">
        ${logoSrc ? `<img src="${logoSrc}" alt="Logo" class="mb-4 h-16">` : ''}
        <h2 style="color: ${colorNames};" class="text-xl font-bold">John Doe</h2>
        <p style="color: ${colorFunctions};" class="text-sm">Développeur Web</p>
        <p style="color: ${colorText};" class="mt-2 text-xs">john.doe@example.com</p>
        <p style="color: ${colorText};" class="text-xs">+33 6 12 34 56 78</p>
        </div>
    `;
    }

    // Event listeners for color pickers and font selection
    document.querySelectorAll('.color-picker').forEach(picker => {
    picker.addEventListener('input', updateCardPreview);
    });

    document.getElementById('fontOptions').addEventListener('change', updateCardPreview);

    // Initialize
    loadFonts();
    generateInitialColorScheme(); // Generate default color scheme
    updateCardPreview(); // Initial preview update
});
</script>

</div>


{{ template "footer.html" . }}