@extends('layouts.app')
@section('content')

<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Modifier le Produit</h4>
            <h6>Mettre à jour les informations du 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.update', $product->id) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    <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">
                                <div class="col-lg-4 col-sm-6 col-12">
                                    <div class="mb-3 add-product">
                                        <label class="form-label">Magasin</label>
                                        <input type="text" class="form-control" value="{{ $magasin->name ?? $product->magasin->name ?? '' }}" disabled>
                                    </div>
                                </div>
                                <div class="col-lg-8 col-sm-6 col-12">
                                    <div class="mb-3 add-product">
                                        <label class="form-label">Nom du produit</label>
                                        <input type="text" class="form-control" name="name" value="{{ old('name', $product->name) }}">
                                        @error('name')<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 list">
                                        <label>SKU</label>
                                        <div class="d-flex">
                                            <input type="text" class="form-control list" name="sku" id="sku" value="{{ old('sku', $product->sku) }}" disabled>
                                        </div>
                                        @error('sku')<span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>
                                -->
                            </div>
                            <div class="row">
                                <div class="col-lg-8 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', $product->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">Marques</label>
                                        <select class="form-control" name="brand_id">
                                            <option value="">Choisir</option>
                                            @foreach($brands as $brand)
                                            <option value="{{ $brand->id }}" {{ $product->brand_id == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('brand_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</label>
                                        <select class="form-control" name="unit_id">
                                            <option value="">Choisir</option>
                                            @foreach($units as $unit)
                                                <option value="{{ $unit->id }}" {{ $product->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</label>
                                        <select class="form-control" name="fournisseur_id">
                                            <option value="">Choisir</option>
                                            @foreach($fournisseurs as $fournisseur)
                                                <option value="{{ $fournisseur->id }}" {{ $product->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', $product->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="input-blocks add-product list">
                                        <label>Code-barres</label>
                                        <div class="d-flex">
                                            <input type="text" class="form-control list" name="barcode" id="barcode" value="{{ old('barcode',  $product->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</label>
                                    <textarea class="form-control h-100" rows="5" name="description">{{ old('description', $product->description) }}</textarea>
                                    @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é</label>
                                                <input type="number" class="form-control" id="quantity" name="quantity" value="{{ old('quantity', $product->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</label>
                                                <input type="number" class="form-control" name="wholesale_price" value="{{ old('wholesale_price', $product->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</label>
                                                <input type="number" class="form-control" name="price" value="{{ old('price', $product->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</label>
                                                <input type="number" class="form-control" id="seuil_alert" name="seuil_alert" value="{{ old('seuil_alert', $product->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</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', $product->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</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', $product->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>
                                                                @if($product->image)
                                                                <div class="mt-2 position-relative" id="image-container">
                                                                    <img id="imagePreview" src="{{ asset('images/products/'.$product->image) }}" 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>
                                                                @endif
                                                                
                                                                @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, 'existingVariants' => $existingVariants])
        </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 generateSKU() {
        document.getElementById('sku').value = 'SKU-' + Math.random().toString(36).substring(2, 8).toUpperCase();
    }
    function generateBarcode() {
        document.getElementById('barcode').value = 'BAD-' + 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