@extends('layouts.admin-layout.main')
@section('GestionPage')
    @include('sweetalert::alert')
    <style>
        .titre-produit-whole {
            font-size: 25px;
        }

        .form-check-input:checked {
            background-color: blue;
            border-color: blue;
        }

        .form-check-input:focus {
            box-shadow: 0 0 0 0.25rem rgba(0, 0, 255, 0.25);

        }

        .cursor-product {
            cursor: pointer;
        }

        .pointer-event {
            cursor: pointer;
            padding: 10px;
            border: 1px solid transparent;
            transition: background-color 0.3s, border-color 0.3s;
            position: relative;
        }

        .pointer-event:hover {
            background-color: rgba(0, 123, 255, 0.1);
            /* Lighter blue for hover */
            color: #007bff;
            /* Bootstrap primary color */
        }

        .pointer-event.active {
            background-color: rgba(0, 123, 255, 0.2);
            /* Slightly darker blue for active */
            color: #0056b3;
            /* Darker blue for active text */
            border-right: 3px solid #0056b3;
            /* Vertical line for active state */
        }

            .image-preview {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            object-fit: cover;
        }

        .image-container {
            display: flex;
            align-items: center;
        }

        .image-container img {
            margin-right: 10px;
        }
    </style>



    <section class="section">
        <form action="{{ route('update-Produits') }}" data-toggle="validator" role="form" method="POST"
            enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="container mt-4">
                <div class="card">
                    <div class="card-body mt-4">
                        <div class="card-title titre-produit-whole">Modifier le produit</div>
                        <div class="row">
                            <div class="col-md-12">
                                <label class="mb-1">Nom du produit</label>
                                <input type="text" class="form-control" id="nomProduit" name="nomProduit"
                                    value="{{ $produit->nomProduit }}" required>
                                     <input type="hidden" id="id" value="{{ $produit->id }}" name="id" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mt-2">
                                <label class="mb-1">Description</label>
                                <textarea id="text" class="form-control" name="descriptionProduit" id="descriptionProduit" required>{{ $produit->descriptionProduit }}</textarea>

                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mt-2">
                                <label class="mb-1">Catégorie</label>
                                <select class="form-control" name="categorieId" id="categorieId" required>
                                    <option value="{{ $produit->categorieId }}">{{ $produit->nomCategorie }}</option>
                                    @foreach ($categories as $categorie)
                                        <option value="{{ $categorie->id }}"
                                            {{ $categorie->id == $produit->categorieId ? 'selected' : '' }}>
                                            {{ $categorie->nomCategorie }}</option>
                                    @endforeach
                                </select>

                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-md-2">
                                <!--choisir une image -->
                                <svg width="100" height="100" viewBox="0 0 100 100" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect width="100" height="100" rx="5" fill="#E2E6EC" />
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M28.667 36.9998C28.667 34.6066 30.6071 32.6665 33.0003 32.6665H67.0003C69.3936 32.6665 71.3337 34.6066 71.3337 36.9998V63.6665C71.3337 66.0597 69.3936 67.9998 67.0003 67.9998H33.0003C30.6071 67.9998 28.667 66.0597 28.667 63.6665V36.9998ZM33.0003 34.6665C31.7117 34.6665 30.667 35.7112 30.667 36.9998V63.6665C30.667 64.9552 31.7117 65.9998 33.0003 65.9998H67.0003C68.289 65.9998 69.3337 64.9552 69.3337 63.6665V36.9998C69.3337 35.7112 68.289 34.6665 67.0003 34.6665H33.0003Z"
                                        fill="#B2B9C4" />
                                    <ellipse cx="38.6673" cy="41.9998" rx="4.33333" ry="4.33333" fill="#B2B9C4" />
                                    <path
                                        d="M34.334 60.333V58.3567C34.334 57.9147 34.5096 57.4907 34.8221 57.1782L40.2103 51.7901C40.8393 51.161 41.8516 51.1369 42.5099 51.7353L43.8412 52.9456C44.4928 53.538 45.4928 53.5212 46.1241 52.9074L55.8224 43.4786C56.4758 42.8433 57.5183 42.8506 58.1627 43.495L65.8458 51.1782C66.1584 51.4907 66.334 51.9147 66.334 52.3567V60.333C66.334 61.2535 65.5878 61.9997 64.6673 61.9997H36.0007C35.0802 61.9997 34.334 61.2535 34.334 60.333Z"
                                        fill="#B2B9C4" />
                                </svg>
                            </div>
                            <div class="col-md-9">
                                <span>Veuillez télécharger 5 images au maximum et une image au minimum, d'une taille
                                    inférieure à 100 Ko.</span>
                                <div class="mt-2">
                                    <button type="button" class="btn btn-outline-primary"
                                        onclick="document.getElementById('fileInput').click();">Choisir une image</button>
                                </div>
                                <input type="file" id="fileInput" name="images[]" class="d-none"  multiple
                                    accept="image/*" onchange="handleFiles(event)" >
                                <div class="mt-2">
                                    <span class="text-primary" id="fileCount">Aucune image sélectionnée</span>
                                     <div class="image-container mt-2">
                                    @foreach (json_decode($produit->images) as $image)
                                        <div class="image-wrapper">
                                            <img src="{{ asset('img/'. $image) }}" class="image-preview"
                                                alt="Image du produit">
                                        </div>
                                    @endforeach
                                </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>

            <!-- Separation  -->
            <div class="container mt-4">
                <div class="card">
                    <div class="card-body mt-4">
                        <div class="card-title titre-produit-whole">Données du produit</div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="mb-3 pointer-event" data-bs-toggle="tab" data-bs-target="#tarif-overview"
                                    onclick="showTarif()">Tarif</div>
                                <div class="mb-3 pointer-event" data-bs-toggle="tab" data-bs-target="#inventaire-overview"
                                    onclick="showInventaire()">Inventaire</div>
                                <div class="mb-3 pointer-event" data-bs-toggle="tab" data-bs-target="#avance-overview"
                                    onclick="showAvance()">Avancé</div>
                            </div>
                            <div class="col-md-9">

                                <!-- Tqrif logic here -->
                                <div id="tarif-overview">
                                    <!-- Tarif logic here -->
                                    <div class="col-sm ">
                                        <label class="mb-1">Tarif régulier (CFA)</label>
                                        <input type="text" class="form-control" id="tarifRegulier" name="tarifRegulier"
                                            value="{{ $produit->tarifRegulier }}" required>

                                    </div>
                                    <div class="col-sm mt-2 mb-2">
                                        <label class="mb-1">Tarif promo (CFA)</label>
                                        <input type="text" class="form-control" id="tarifPromo" name="tarifPromo"
                                            value="{{ $produit->tarifPromo }}">

                                    </div>
                                    <div class="col-sm mt-3 mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value=""
                                                id="planifierCheckbox">
                                            <label class="form-check-label size-whole-text text-success"
                                                for="planifierCheckbox">
                                                Planifier
                                            </label>
                                        </div>
                                    </div>
                                    <div id="datePromoFields" style="display: none;">
                                        <span class="fw-bold">Date Promo</span>
                                        <div class="col-sm mt-3">
                                            <div class="row">
                                                <label class="mb-1 col-sm-1">Du</label>
                                                <input type="date" class="form-control col" id="dateDebut"
                                                    name="dateDebut" value="{{ $produit->dateDebut }}">
                                            </div>
                                        </div>
                                        <div class="col-sm mt-2">
                                            <div class="row">
                                                <label class="mb-1 col-sm-1">Au</label>
                                                <input type="date" class="form-control col" id="dateFin"
                                                    name="dateFin" value="{{ $produit->dateFin }}">
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <!-- Tarif Fin -->


                                <!-- Inventaire logic here -->
                                <div id="inventaire-overview" style="display: none;">
                                    <!-- -->
                                    <label class="mb-1">Gestions des stocks </label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value=""
                                            id="stockCheckbox">
                                        <label class="form-check-label size-whole-text" for="stockCheckbox">
                                            Suivre la quantité en stock pour ce produit
                                        </label>
                                    </div>
                                    <!-- -->
                                    <div id="stockFields" style="display: none;">
                                        <div class="col-sm mt-2">
                                            <label class="mb-1">Quantité</label>
                                            <input type="number" class="form-control" id="quantiteEnStock"
                                                name="quantiteEnStock" value="{{ $produit->quantiteEnStock }}">
                                        </div>
                                        <label class="mt-2">Autorisé les commande en réapprovisionnement</label>
                                        <div class="col-sm mt-3">
                                            <!-- Radio buttons -->
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" value="0"
                                                    id="flexCheckNoAutorise" name="etatCommande"
                                                    {{ $produit->etatCommande == 0 ? 'checked' : '' }}>
                                                <label class="form-check-label size-whole-text" for="flexCheckNoAutorise">
                                                    Ne pas autorisé
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" value="1"
                                                    id="flexCheckNotification" name="etatCommande"
                                                    {{ $produit->etatCommande == 1 ? 'checked' : '' }}>
                                                <label class="form-check-label size-whole-text"
                                                    for="flexCheckNotification">
                                                    Autorisé, mais avec notification du client
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" value="2"
                                                    id="flexCheckAutorise" name="etatCommande">
                                                <label class="form-check-label size-whole-text" for="flexCheckAutorise"
                                                    {{ $produit->etatCommande == 2 ? 'checked' : '' }}>
                                                    Autorisé
                                                </label>
                                            </div>
                                            <!-- Input field: Seuil de stock faible -->
                                            <div class="col-sm mt-2">
                                                <label class="mb-1" for="seuilStockFaible">Seuil de stock faible</label>
                                                <input type="number" class="form-control" id="seuilStockFaible"
                                                    name="seuilStockFaible" value="{{ $produit->seuilStockFaible }}">
                                            </div>
                                        </div>
                                        <input type="hidden" id="etatCommandeValue" name="etatCommandeValue">


                                    </div>
                                    <div class="col-sm mt-3">
                                        <!-- État du stock -->
                                        <label class="mb-1" for="etatStock">État du stock</label>
                                        <div class="form-check">
                                            <input class="form-check-input " type="radio" value="0"
                                                id="etatStockEnStock" name="etatStock" checked>
                                            <label class="form-check-label size-whole-text" for="etatStockEnStock"
                                                {{ $produit->etatStock == 0 ? 'checked' : '' }}>
                                                En stock
                                            </label>
                                        </div>
                                        <!-- Rupture de stock -->
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" value="1"
                                                id="etatStockRupture" name="etatStock">
                                            <label class="form-check-label size-whole-text" for="etatStockRupture"
                                                {{ $produit->etatStock == 1 ? 'checked' : '' }}>
                                                Rupture de stock
                                            </label>
                                        </div>
                                        <!-- En réapprovisionnement -->
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" value="2"
                                                id="etatStockReappro" name="etatStock">
                                            <label class="form-check-label size-whole-text" for="etatStockReappro"
                                                {{ $produit->etatStock == 2 ? 'checked' : '' }}>
                                                En réapprovisionnement
                                            </label>
                                        </div>
                                        <input type="hidden" id="etatStockValue" name="etatStockValue">
                                    </div>
                                </div>


                                <!-- Inventaire logic here -->
                                <div id="avance-overview" style="display: none;">


                                    <div class="col-sm mt-2">
                                        <!-- -->
                                        <label class="mb-1">Avis</label>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="1"
                                                name="autoriserAvis" id="avisCheckDefault"
                                                {{ $produit->autoriserAvis ? 'checked' : '' }}>

                                            <label class="form-check-label size-whole-text" for="avisCheckDefault">
                                                Autorisé les avis
                                            </label>
                                        </div>
                                        <!-- -->
                                    </div>

                                </div>
                                <!-- Inventaire Fin-->
                                <!-- ... rest of inventaire logic ... -->
                            </div>
                            <!-- Inventaire Fin-->



                        </div>
                    </div>
                    <div class="d-grid gap-2 d-md-block mt-5 p-4">
                        <button type="submit" class="btn btn-primary" type="button">Publier</button>
                    </div>
                </div>
            </div>
            </div>
        </form>
    </section>

    <!-- End #main -->
@endsection
@section('script')
    <script>
        function showTarif() {
            document.getElementById("tarif-overview").style.display = "block";
            document.getElementById("inventaire-overview").style.display = "none";
            document.getElementById("avance-overview").style.display = "none";
        }

        function showInventaire() {
            document.getElementById("tarif-overview").style.display = "none";
            document.getElementById("avance-overview").style.display = "none";
            document.getElementById("inventaire-overview").style.display = "block";
        }

        function showAvance() {
            document.getElementById("tarif-overview").style.display = "none";
            document.getElementById("inventaire-overview").style.display = "none";
            document.getElementById("avance-overview").style.display = "block";
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const items = document.querySelectorAll('.pointer-event');

            items.forEach(item => {
                item.addEventListener('click', () => {
                    // Remove 'active' class from all items
                    items.forEach(i => i.classList.remove('active'));
                    // Add 'active' class to the clicked item
                    item.classList.add('active');
                });
            });
        });
    </script>

    <script>
        function handleFiles(event) {
            const files = event.target.files;
            const fileCount = files.length;

            if (fileCount < 1 || fileCount > 5) {
                alert('Veuillez sélectionner entre 1 et 5 images.');
                event.target.value = ''; // Clear the input
                document.getElementById('fileCount').innerText = 'Aucune image sélectionnée';
                return;
            }

            let totalSize = 0;
            for (let i = 0; i < fileCount; i++) {
                totalSize += files[i].size;
                if (files[i].size > 100 * 1024) { // 100 Ko
                    alert('Chaque image doit être inférieure à 100 Ko.');
                    event.target.value = ''; // Clear the input
                    document.getElementById('fileCount').innerText = 'Aucune image sélectionnée';
                    return;
                }
            }

            document.getElementById('fileCount').innerText = `${fileCount} image(s) sélectionnée(s)`;
        }
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Récupérer la case à cocher et les champs de date
            const planifierCheckbox = document.getElementById('planifierCheckbox');
            const datePromoFields = document.getElementById('datePromoFields');

            // Écouter les changements d'état de la case à cocher
            planifierCheckbox.addEventListener('change', function() {
                // Si la case à cocher est cochée, afficher les champs de date, sinon les masquer
                if (planifierCheckbox.checked) {
                    datePromoFields.style.display = 'block';
                } else {
                    datePromoFields.style.display = 'none';
                }
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Récupérer la case à cocher et les champs liés au stock
            const stockCheckbox = document.getElementById('stockCheckbox');
            const stockFields = document.getElementById('stockFields');

            // Écouter les changements d'état de la case à cocher
            stockCheckbox.addEventListener('change', function() {
                // Si la case à cocher est cochée, afficher les champs liés au stock, sinon les masquer
                if (stockCheckbox.checked) {
                    stockFields.style.display = 'block';
                } else {
                    stockFields.style.display = 'none';
                }
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Récupérer les boutons radio et le champ caché
            const radioButtons = document.querySelectorAll('input[type="radio"][name="etatCommande"]');
            const etatCommandeValue = document.getElementById('etatCommandeValue');

            // Écouter les changements d'état des boutons radio
            radioButtons.forEach(function(radioButton) {
                radioButton.addEventListener('change', function() {
                    // Affecter la valeur du bouton radio sélectionné au champ caché
                    etatCommandeValue.value = this.value;
                });
            });
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Récupérer les boutons radio et le champ caché
            const radioButtons = document.querySelectorAll('input[type="radio"][name="etatStock"]');
            const etatStockValue = document.getElementById('etatStockValue');

            // Écouter les changements d'état des boutons radio
            radioButtons.forEach(function(radioButton) {
                radioButton.addEventListener('change', function() {
                    // Affecter la valeur du bouton radio sélectionné au champ caché
                    etatStockValue.value = this.value;
                });
            });
        });
    </script>
@endsection
