@extends('dashboard.body.main')

@section('specificpagestyles')
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
@endsection

@section('container')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <div class="header-title">
                        <h4 class="card-title">Agregar producto</h4>
                    </div>
                </div>

                <div class="card-body">
                    <form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                        <!-- begin: Input Image -->
                        <div class="form-group row align-items-center">
                            <div class="col-md-12">
                                <div class="profile-img-edit">
                                    <div class="crm-profile-img-edit">
                                        <img class="crm-profile-pic rounded-lg shadow-sm" style="width: 100px; height: 100px; object-fit: cover; border-radius: 12px; border: 2px solid #E2E8F0;" id="image-preview" src="{{ asset('assets/images/product/default.webp') }}" alt="profile-pic">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="input-group mb-4 col-lg-6">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input @error('product_image') is-invalid @enderror" id="image" name="product_image" accept="image/*" onchange="previewImage();">
                                    <label class="custom-file-label" for="product_image">Buscar imagen o subir imagen</label>
                                </div>
                                @error('product_image')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <!-- end: Input Image -->
                        <!-- begin: Input Data -->
                        <div class=" row align-items-center">
                            <div class="form-group col-md-6">
                                <label for="product_name">Nombre del producto <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('product_name') is-invalid @enderror" id="product_name" name="product_name" value="{{ old('product_name') }}" required>
                                @error('product_name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="product_code">Código de barras (Opcional - Dejar vacío para autogenerar)</label>
                                <input type="text" class="form-control @error('product_code') is-invalid @enderror" id="product_code" name="product_code" value="{{ old('product_code') }}">
                                @error('product_code')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label for="category_id" class="mb-0">Categoría <span class="text-danger">*</span></label>
                                    <button type="button" class="btn btn-link btn-sm p-0 text-primary font-weight-bold" data-toggle="modal" data-target="#quickCategoryModal">
                                        <i class="fa-solid fa-plus-circle mr-1"></i> + Nueva Categoría
                                    </button>
                                </div>
                                <select class="form-control" id="category_id_select" name="category_id" required>
                                    <option value="" selected disabled>-- Selecciona una categoría --</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="mb-0" for="supplier_id">Proveedor <span class="text-muted">(Opcional - por defecto General)</span></label>
                                    <button type="button" class="btn btn-link btn-sm p-0 text-primary font-weight-bold" id="btn-toggle-quick-sup" style="text-decoration: none; font-size: 11px;">
                                        <i class="fas fa-plus mr-1"></i> + Nuevo
                                    </button>
                                </div>
                                <select class="form-control" name="supplier_id">
                                    <option value="" selected>-- Proveedor General --</option>
                                    @foreach ($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}" {{ old('supplier_id') == $supplier->id ? 'selected' : '' }}>{{ $supplier->name }}</option>
                                    @endforeach
                                </select>

                                {{-- Quick supplier form inline --}}
                                <div id="quick-sup-container" class="mt-2 p-2 bg-light border rounded" style="display: none; border-radius: 8px;">
                                    <div class="input-group input-group-sm">
                                        <input type="text" id="quick-sup-name" class="form-control form-control-sm" placeholder="Nombre de nuevo proveedor" style="border-radius: 6px 0 0 6px;">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary btn-sm font-weight-bold" type="button" id="btn-submit-quick-supplier" style="border-radius: 0 6px 6px 0; background-color: var(--mh-pink); border-color: var(--mh-pink);">Añadir</button>
                                        </div>
                                    </div>
                                </div>

                                @error('supplier_id')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="product_store">Stock / Cantidad de productos</label>
                                <input type="text" class="form-control @error('product_store') is-invalid @enderror" id="product_store" name="product_store" value="{{ old('product_store') }}">
                                @error('product_store')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="min_stock">Stock Mínimo de Alerta <span class="text-muted">(Por defecto 5)</span></label>
                                <input type="number" class="form-control @error('min_stock') is-invalid @enderror" id="min_stock" name="min_stock" value="{{ old('min_stock', 5) }}" min="0" style="border-radius: 8px;">
                                @error('min_stock')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="track_stock">Controlar Inventario</label>
                                <div class="custom-control custom-switch custom-control-inline d-block pt-2">
                                    <input type="checkbox" class="custom-control-input" id="track_stock" name="track_stock" value="1" checked>
                                    <label class="custom-control-label" for="track_stock">Descontar del stock al vender</label>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="expire_date">Fecha de caducidad</label>
                                <input id="expire_date" class="form-control @error('expire_date') is-invalid @enderror" name="expire_date" value="{{ old('expire_date') }}" />
                                @error('expire_date')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="buying_price">Precio de Costo (Compra) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('buying_price') is-invalid @enderror" id="buying_price" name="buying_price" value="{{ old('buying_price') }}" required>
                                @error('buying_price')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="profit_percent">Margen de Ganancia Sugerido (%)</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="profit_percent" placeholder="Ej: 40" min="0" value="40" step="any">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-outline-secondary btn-percent-shortcut" data-value="30">30%</button>
                                        <button type="button" class="btn btn-outline-secondary btn-percent-shortcut" data-value="40">40%</button>
                                        <button type="button" class="btn btn-outline-secondary btn-percent-shortcut" data-value="50">50%</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="selling_price">Precio de Venta <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('selling_price') is-invalid @enderror" id="selling_price" name="selling_price" value="{{ old('selling_price') }}" required>
                                @error('selling_price')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <!-- end: Input Data -->
                        <div class="mt-2">
                            <button type="submit" class="btn btn-primary mr-2">Guardar</button>
                            <a class="btn bg-danger" href="{{ route('products.index') }}">Cancelar</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Page end  -->
</div>

<script>
    $('#expire_date').datepicker({
        uiLibrary: 'bootstrap4',
        format: 'yyyy-mm-dd'
    });

    document.addEventListener('DOMContentLoaded', function() {
        const buyingPriceInput = document.getElementById('buying_price');
        const profitPercentInput = document.getElementById('profit_percent');
        const sellingPriceInput = document.getElementById('selling_price');
        const percentButtons = document.querySelectorAll('.btn-percent-shortcut');

        function calculateSellingPrice() {
            const buyingPrice = parseFloat((buyingPriceInput.value || '').replace(',', '.')) || 0;
            const profitPercent = parseFloat((profitPercentInput.value || '').replace(',', '.')) || 0;
            
            if (buyingPrice > 0) {
                const sellingPrice = Math.round(buyingPrice * (1 + profitPercent / 100) * 100) / 100;
                sellingPriceInput.value = sellingPrice;
            }
        }

        function calculateProfitPercent() {
            const buyingPrice = parseFloat((buyingPriceInput.value || '').replace(',', '.')) || 0;
            const sellingPrice = parseFloat((sellingPriceInput.value || '').replace(',', '.')) || 0;

            if (buyingPrice > 0 && sellingPrice >= 0) {
                const profitPercent = ((sellingPrice - buyingPrice) / buyingPrice) * 100;
                profitPercentInput.value = (Math.round(profitPercent * 10) / 10).toFixed(1);
            }
        }

        buyingPriceInput.addEventListener('input', calculateSellingPrice);
        profitPercentInput.addEventListener('input', calculateSellingPrice);
        sellingPriceInput.addEventListener('input', calculateProfitPercent);

        percentButtons.forEach(button => {
            button.addEventListener('click', function() {
                profitPercentInput.value = this.getAttribute('data-value');
                calculateSellingPrice();
            });
        });
    });
</script>

<!-- Modal para crear categoría al vuelo -->
<div class="modal fade" id="quickCategoryModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 16px; overflow: hidden;">
            <div class="modal-header text-white" style="background-color: var(--mh-pink, #FF2B66);">
                <h5 class="modal-title font-weight-bold text-white"><i class="fa-solid fa-folder-plus mr-2"></i> Crear Nueva Categoría</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4 bg-white text-left">
                <div class="form-group mb-0">
                    <label class="font-weight-bold text-dark font-size-13">Nombre de la Categoría</label>
                    <input type="text" id="quick-category-name" class="form-control" placeholder="Ej: Abarrotes, Lácteos, Bebidas..." style="border-radius: 8px;" required>
                    <small id="quick-cat-error" class="text-danger mt-2 font-weight-bold" style="display:none;"></small>
                </div>
            </div>
            <div class="modal-footer bg-white border-top py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancelar</button>
                <button type="button" id="btn-save-quick-category" class="btn btn-primary btn-sm font-weight-bold px-3">
                    <i class="fa-solid fa-save mr-1"></i> Guardar y Seleccionar
                </button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const btnSaveCat = document.getElementById('btn-save-quick-category');
    const inpCatName = document.getElementById('quick-category-name');
    const errCat = document.getElementById('quick-cat-error');
    const catSelect = document.getElementById('category_id_select');

    if (btnSaveCat) {
        btnSaveCat.addEventListener('click', function() {
            const nameVal = inpCatName.value.trim();
            if (!nameVal) {
                errCat.textContent = 'Por favor ingrese un nombre para la categoría.';
                errCat.style.display = 'block';
                return;
            }
            errCat.style.display = 'none';
            btnSaveCat.disabled = true;
            btnSaveCat.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-1"></i> Guardando...';

            fetch("{{ route('categories.store') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ name: nameVal })
            })
            .then(res => res.json())
            .then(data => {
                btnSaveCat.disabled = false;
                btnSaveCat.innerHTML = '<i class="fa-solid fa-save mr-1"></i> Guardar y Seleccionar';

                if (data.success && data.category) {
                    const opt = document.createElement('option');
                    opt.value = data.category.id;
                    opt.textContent = data.category.name;
                    opt.selected = true;
                    catSelect.appendChild(opt);

                    inpCatName.value = '';
                    if (window.jQuery) {
                        $('#quickCategoryModal').modal('hide');
                    }
                } else {
                    errCat.textContent = data.message || 'La categoría ya existe o no es válida.';
                    errCat.style.display = 'block';
                }
            })
            .catch(err => {
                console.error(err);
                btnSaveCat.disabled = false;
                btnSaveCat.innerHTML = '<i class="fa-solid fa-save mr-1"></i> Guardar y Seleccionar';
                errCat.textContent = 'Ocurrió un error al guardar la categoría.';
                errCat.style.display = 'block';
            });
        });
    }

    // Quick Supplier creation toggle & submit in products/create
    const btnToggleQuickSup = document.getElementById('btn-toggle-quick-sup');
    const quickSupContainer = document.getElementById('quick-sup-container');
    if (btnToggleQuickSup && quickSupContainer) {
        btnToggleQuickSup.addEventListener('click', function(e) {
            e.preventDefault();
            if (quickSupContainer.style.display === 'none' || !quickSupContainer.style.display) {
                quickSupContainer.style.display = 'block';
                document.getElementById('quick-sup-name').focus();
            } else {
                quickSupContainer.style.display = 'none';
            }
        });
    }

    const btnSubmitQuickSup = document.getElementById('btn-submit-quick-supplier');
    if (btnSubmitQuickSup) {
        btnSubmitQuickSup.addEventListener('click', function(e) {
            e.preventDefault();
            const nameVal = document.getElementById('quick-sup-name').value.trim();
            if (!nameVal) {
                alert('Por favor, ingresa el nombre del proveedor.');
                return;
            }

            btnSubmitQuickSup.disabled = true;
            btnSubmitQuickSup.textContent = '...';

            fetch('/suppliers', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ name: nameVal })
            })
            .then(res => res.json())
            .then(data => {
                btnSubmitQuickSup.disabled = false;
                btnSubmitQuickSup.textContent = 'Añadir';

                if (data.success && data.supplier) {
                    const select = document.querySelector('select[name="supplier_id"]');
                    const opt = document.createElement('option');
                    opt.value = data.supplier.id;
                    opt.textContent = data.supplier.name;
                    opt.selected = true;
                    select.appendChild(opt);

                    quickSupContainer.style.display = 'none';
                    document.getElementById('quick-sup-name').value = '';
                } else {
                    alert(data.message || 'Error al guardar el proveedor.');
                }
            })
            .catch(err => {
                console.error(err);
                btnSubmitQuickSup.disabled = false;
                btnSubmitQuickSup.textContent = 'Añadir';
                alert('Ocurrió un error al guardar el proveedor.');
            });
        });
    }
});
</script>

@include('components.preview-img-form')
@endsection