@extends('admin.layouts.app')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Crear Producto</h4>
                <div class="page-title-right">
                    <a href="{{ route('products.index') }}" class="btn btn-primary">Volver</a>
                </div>
            </div>
        </div>
    </div>
        <form action="" method="post" id="productForm" name="productForm">
                <div class="row">
                    <div class="col-md-8">
                        <div class="card mb-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="title">Titulo</label>
                                            <input type="text" name="title" id="title" class="form-control" placeholder="Título">
                                            <p class="error"></p>
                                        </div>
                                    </div>
                                    <div class="col-md-12 text-end mb-3">
                                        <button type="button" class="btn btn-info" onclick="generateMetaFields()">Generar Metadatos</button>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="meta_title">Meta Titulo</label>
                                            <input type="text" name="meta_title" id="meta_title" class="form-control" placeholder="Meta Título">
                                            <p class="error"></p>
                                            <input type="text" id="suggested_meta_title" class="form-control mt-2" placeholder="Meta Título Sugerido" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="meta_description">Meta Descripci�n</label>
                                            <textarea name="meta_description" id="meta_description" cols="30" rows="4" class="form-control" placeholder="Meta Descripción"></textarea>
                                            <p class="error"></p>
                                            <textarea id="suggested_meta_description" class="form-control mt-2" placeholder="Meta Descripción Sugerida" readonly></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="meta_keywords">Meta Keywords</label>
                                            <textarea name="meta_keywords" id="meta_keywords" cols="30" rows="3" class="form-control" placeholder="Meta Palabras Clave"></textarea>
                                            <p class="error"></p>
                                            <textarea id="suggested_meta_keywords" class="form-control mt-2" placeholder="Meta Palabras Clave Sugeridas" readonly></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="short_description">Descripcion Corta</label>
                                            <textarea name="short_description" id="short_description" cols="30" rows="5" class="summernote" placeholder="Descripción Corta"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="description">Descripcion</label>
                                            <textarea name="description" id="description" cols="30" rows="10" class="summernote" placeholder="Descripción"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="shipping_returns">Envios y Devoluciones</label>
                                            <textarea name="shipping_returns" id="shipping_returns" cols="30" rows="10" class="summernote" placeholder="Shipping & Returns"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mb-3">
                            <div class="card-body">
                                <h2 class="h4 mb-3">Precios</h2>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="price">Precio</label>
                                            <input type="text" name="price" id="price" class="form-control" placeholder="Precio">
                                            <p class="error"></p>
                                            <input type="text" id="suggested_price" class="form-control mt-2" placeholder="Precio Sugerido" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-12 text-end mb-3">
                                        <button type="button" class="btn btn-info" onclick="getSuggestedPrice()">Obtener Precio Sugerido</button>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="compare_price">Comparar con el Precio</label>
                                            <input type="text" name="compare_price" id="compare_price" class="form-control" placeholder="Precio Comparativo">
                                            <p class="text-muted mt-3">
                                                Para mostrar un precio reducido, modifique el precio original del producto a Comparar con el Precio. Ingrese un valor m�s bajo en Precio.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Aqu� sigue el resto del formulario -->
                    </div>
                </div>
                <div class="pb-5 pt-3">
                    <button type="submit" class="btn btn-primary">Crear</button>
                    <a href="{{ route('products.index') }}" class="btn btn-outline-dark ms-3">Cancelar</a>
                </div>
        </form>
    
</div>
@endsection

@section('customJs')
<script>
    // Funci�n para generar metadatos basados en el t�tulo
    function generateMetaFields() {
        var title = $("#title").val();
        if (title) {
            $.ajax({
                url: '{{ route("metaData.suggest") }}',
                type: 'post',
                data: {
                    title: title,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    if (response.status) {
                        $("#suggested_meta_title").val(response.meta_title);
                        $("#suggested_meta_description").val(response.meta_description);
                        $("#suggested_meta_keywords").val(response.meta_keywords);
                    }
                }
            });
        }
    }

    // Funci�n para obtener el precio sugerido
    function getSuggestedPrice() {
        var price = $("#price").val();
        if (price) {
            $.ajax({
                url: '{{ route("price.suggest") }}',
                type: 'post',
                data: {
                    price: price,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    if (response.status) {
                        $("#suggested_price").val(response.suggested_price);
                    }
                }
            });
        }
    }
</script>
@endsection