@extends('layouts.app')
@section('content')
    <div class="page-header">
        <div class="add-item d-flex">
            <div class="page-title">
                <h4>Nouveau Produit</h4>
                <h6>Créer un nouveau produit</h6>
            </div>
        </div>
        <ul class="table-top-head">
            <li>
                <div class="page-btn">
                    <a href="{{ route('inventory.products') }}" class="btn btn-secondary"><i data-feather="arrow-left"
                            class="me-2"></i>Retour aux produits</a>
                </div>
            </li>
            <li>
                <a data-bs-toggle="tooltip" data-bs-placement="top" title="Réduire" id="collapse-header"><i
                        data-feather="chevron-up" class="feather-chevron-up"></i></a>
            </li>
        </ul>
    </div>
    <form action="{{ route('inventory.products.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="card">
            <div class="card-body add-product pb-0">
                <div class="accordion-card-one accordion" id="accordionExample">
                    <div class="accordion-item">
                        <div class="accordion-header" id="headingOne">
                            <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                                aria-controls="collapseOne">
                                <div class="addproduct-icon">
                                    <h5><i data-feather="info" class="add-info"></i><span>Informations sur le produit</span>
                                    </h5>
                                    <a href="javascript:void(0);"><i data-feather="chevron-down"
                                            class="chevron-down-add"></i></a>
                                </div>
                            </div>
                        </div>
                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <div class="row">
                                    @if ($magasins->count() > 1)
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="mb-3">
                                                <label class="form-label">Magasin</label>
                                                <input type="text" class="form-control"
                                                    value="{{ $magasin->name ?? '' }}" disabled>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="col-lg-8 col-sm-6 col-12">
                                        <div class="mb-3 add-product">
                                            <label class="form-label">Nom du produit (optionnel)</label>
                                            <input type="text" class="form-control" name="name"
                                                value="{{ old('name') }}">
                                            @error('name')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4 col-sm-6 col-12">
                                        <div class="mb-3 add-product">
                                            <label class="form-label">Catégorie (optionnel)</label>
                                            <select class="form-control" name="category_id">
                                                <option value="">Choisir</option>
                                                @foreach ($categories as $category)
                                                    <option value="{{ $category->id }}"
                                                        {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                                        {{ str_repeat('— ', $category->depth) }}{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('category_id')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-sm-6 col-12">
                                        <div class="mb-3 add-product">
                                            <label class="form-label">Unité de produit (optionnel)</label>
                                            <select class="form-control" name="unit_id">
                                                <option value="">Choisir</option>
                                                @foreach ($units as $unit)
                                                    <option value="{{ $unit->id }}"
                                                        {{ old('unit_id') == $unit->id ? 'selected' : '' }}>
                                                        {{ $unit->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('unit_id')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-sm-6 col-12">
                                        <div class="mb-3 add-product">
                                            <label class="form-label">Fournisseur (optionnel)</label>
                                            <select class="form-control" name="fournisseur_id">
                                                <option value="">Choisir</option>
                                                @foreach ($fournisseurs as $fournisseur)
                                                    <option value="{{ $fournisseur->id }}"
                                                        {{ old('fournisseur_id') == $fournisseur->id ? 'selected' : '' }}>
                                                        {{ $fournisseur->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('fournisseur_id')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-sm-6 col-12">
                                        <div class="mb-3 add-product">
                                            <label class="form-label">Type de vente (optionnel)</label>
                                            <select class="form-control" name="type">
                                                <option value="">Choisir</option>
                                                @foreach (\App\Models\Product::TYPES as $productType)
                                                    <option value="{{ $productType }}"
                                                        {{ old('type') == $productType ? 'selected' : '' }}>
                                                        {{ $productType }}</option>
                                                @endforeach
                                            </select>
                                            @error('type')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-sm-6 col-12">
                                        <div class="mb-3 add-product">
                                            <label>Code-barres (optionnel)</label>
                                            <div class="d-flex">
                                                <input type="text" class="form-control" name="barcode" id="barcode"
                                                    value="{{ old('barcode') }}">
                                            </div>
                                            @error('barcode')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3 add-product">
                                        <label>Description (optionnel)</label>
                                        <textarea class="form-control h-100" rows="5" name="description">{{ old('description') }}</textarea>
                                        <p class="mt-1">Maximum 60 caractères</p>
                                        @error('description')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordion-card-one accordion" id="accordionExample2">
                    <div class="accordion-item">
                        <div class="accordion-header" id="headingTwo">
                            <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
                                aria-controls="collapseTwo">
                                <div class="text-editor add-list">
                                    <div class="addproduct-icon list icon">
                                        <h5><i data-feather="life-buoy" class="add-info"></i><span>Prix & Stocks</span>
                                        </h5>
                                        <a href="javascript:void(0);"><i data-feather="chevron-down"
                                                class="chevron-down-add"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo"
                            data-bs-parent="#accordionExample2">
                            <div class="accordion-body">
                                <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                        aria-labelledby="pills-home-tab">
                                        <div class="row">
                                            <div class="col-lg-4 col-sm-6 col-12">
                                                <div class="mb-3">
                                                    <label class="form-label">Quantité (optionnel)</label>
                                                    <input type="number" class="form-control" id="quantity"
                                                        name="quantity" value="{{ old('quantity') }}">
                                                    @error('quantity')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6 col-12">
                                                <div class="input-blocks add-product">
                                                    <label class="form-label">Prix d'achat (optionnel)</label>
                                                    <input type="number" class="form-control" name="wholesale_price"
                                                        value="{{ old('wholesale_price') }}">
                                                    @error('wholesale_price')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6 col-12">
                                                <div class="input-blocks add-product">
                                                    <label class="form-label">Prix de vente (optionnel)</label>
                                                    <input type="number" class="form-control" name="price"
                                                        value="{{ old('price') }}">
                                                    @error('price')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-4 col-sm-6 col-12">
                                                <div class="mb-3">
                                                    <label class="form-label">Seuil alerte (optionnel)</label>
                                                    <input type="number" class="form-control" id="seuil_alert"
                                                        name="seuil_alert" value="{{ old('seuil_alert') }}">
                                                    <span id="alert-message" class="text-danger d-none">Le seuil ne peut
                                                        pas dépasser la quantité</span>
                                                    @error('seuil_alert')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6 col-12">
                                                <div class="input-blocks">
                                                    <label>Date de fabrication (optionnel)</label>
                                                    <div class="input-groupicon calender-input">
                                                        <i data-feather="calendar" class="info-img"></i>
                                                        <input type="text" class="datetimepicker"
                                                            placeholder="Choisir une Date" name="date_fabrication"
                                                            value="{{ old('date_fabrication') }}">
                                                        @error('date_fabrication')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-6 col-12">
                                                <div class="input-blocks">
                                                    <label>Date d'expiration (optionnel)</label>
                                                    <div class="input-groupicon calender-input">
                                                        <i data-feather="calendar" class="info-img"></i>
                                                        <input type="text" class="datetimepicker"
                                                            placeholder="Choisir une Date" name="date_expiration"
                                                            value="{{ old('date_expiration') }}">
                                                        @error('date_expiration')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-card-one accordion" id="accordionExample3">
                                            <div class="accordion-item">
                                                <div class="accordion-header" id="headingThree">
                                                    <div class="accordion-button" data-bs-toggle="collapse"
                                                        data-bs-target="#collapseThree" aria-controls="collapseThree">
                                                        <div class="addproduct-icon list">
                                                            <h5><i data-feather="image"
                                                                    class="add-info"></i><span>Images</span></h5>
                                                            <a href="javascript:void(0);"><i data-feather="chevron-down"
                                                                    class="chevron-down-add"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="collapseThree" class="accordion-collapse collapse show"
                                                    aria-labelledby="headingThree" data-bs-parent="#accordionExample3">
                                                    <div class="accordion-body">
                                                        <div class="text-editor add-list add">
                                                            <div class="col-lg-12">
                                                                <div class="add-choosen">
                                                                    <div class="input-blocks">
                                                                        <div class="image-upload">
                                                                            <input type="file" name="image"
                                                                                accept="image/*"
                                                                                onchange="previewImage(event)">
                                                                            <div class="image-uploads">
                                                                                <i data-feather="plus-circle"
                                                                                    class="plus-down-add me-0"></i>
                                                                                <h4>Ajouter une Image</h4>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div>
                                                                        <div class="mt-2 position-relative d-none"
                                                                            id="image-container">
                                                                            <img id="imagePreview" src="#"
                                                                                class="img-thumbnail"
                                                                                style="max-width: 120px; margin-left: 10px">
                                                                            <button type="button"
                                                                                class="btn btn-danger btn-sm position-absolute top-0 end-0"
                                                                                onclick="removeImage()">&times;</button>
                                                                        </div>
                                                                        @error('image')
                                                                            <span
                                                                                class="text-danger">{{ $message }}</span>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @include('inventory.products.partials.variants-builder', ['attributes' => $attributes])
            </div>
        </div>

        <div class="col-lg-12">
            <div class="btn-addproduct mb-4">
                <button type="button" class="btn btn-cancel me-2">Annuler</button>
                <button type="submit" class="btn btn-submit">Enregistrer</button>
            </div>
        </div>
    </form>
    <script>
        function generateBarcode() {
            document.getElementById('barcode').value = 'BAR-' + Math.random().toString(36).substring(2, 8).toUpperCase();
        }
        document.getElementById('seuil_alert').addEventListener('input', function() {
            let seuil = parseInt(this.value);
            let quantity = parseInt(document.getElementById('quantity').value);
            let message = document.getElementById('alert-message');

            if (seuil > quantity) {
                message.classList.remove('d-none');
            } else {
                message.classList.add('d-none');
            }
        });

        function previewImage(event) {
            let reader = new FileReader();
            reader.onload = function() {
                let output = document.getElementById('imagePreview');
                output.src = reader.result;
                document.getElementById('image-container').classList.remove('d-none');
            }
            reader.readAsDataURL(event.target.files[0]);
        }

        function removeImage() {
            document.getElementById('imagePreview').src = '';
            document.getElementById('image-container').classList.add('d-none');
            document.querySelector('input[name="image"]').value = '';
        }
    </script>
@endsection