@extends('admin.layouts.app')
  <!-- Plugins css -->
  @section('head')
  <link href="{{asset('assets_admin/libs/dropzone/dropzone.css')}}" rel="stylesheet" type="text/css" />
  <style>
    .gallery-item {
        border: 2px solid #ddd;
        padding: 5px;
        background-color: #fff;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease-in-out;
    }

    .gallery-item:hover {
        transform: scale(1.05);
    }

    .gallery-item img {
        max-width: 100%;
        max-height: 200px;
        object-fit: cover;
    }
  </style>
  @endsection

@section('content')
    <div class="container-fluid">

        <!-- start page title -->
        <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">{{$title}}</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            {{-- <li class="breadcrumb-item"><a href="{{route('admin.service.index')}}">{{$title}}</a></li> --}}
                            <li class="breadcrumb-item active">{{$subtitle}}</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->

        <form id="createservice-form" action="{{route('admin.products.update', $product->id)}}" class="needs-validation" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label" for="product-title-input">Nombre del producto</label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" id="product-title-input" value="{{ $product->name }}" placeholder="Ingrese el nombre del producto">
                                @error('name')
                                    <div class="invalid-feedback" style="color: red">El nombre es requerido</div>
                                @enderror
                            
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="product-title-input">Link de venta</label>
                                <input type="text" class="form-control @error('link') is-invalid @enderror" name="link" id="product-title-input" value="{{ $product->link }}" placeholder="Introduzca el link de venta" >
                                @error('link')
                                    <div class="invalid-feedback" style="color: red">EL link es requerido y debe ser una url</div>
                                @enderror
                            </div>
                            <div>
                                <label>Descripción</label>
                                <textarea name="description" id="" cols="10" rows="5" class="form-control @error('description') is-invalid @enderror">{{ $product->description }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback" style="color: red">La descripcion es requerida</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
              
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Página Web</h5>
                        </div>
                        <div class="card-body">
                            <div>
                                <label for="choices-publish-visibility-input" class="form-label">Estado</label>
                                <select class="form-select" name="estado" id="choices-publish-visibility-input" data-choices data-choices-search-false>
                                    <option value="1" {{ $product->status == 1 ? 'selected' : '' }}>Activo</option>
                                    <option value="0" {{ $product->status == 0 ? 'selected' : '' }}>Inactivo</option>
                                </select>
                            </div>
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->
                </div>
            
               
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Galeria del proyecto</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <h5 class="fs-14 mb-1">Imagen principal</h5>
                                <p class="text-muted">Agregue una imagen con (1920 * 750)px aproximadamente para mantener el formato de la web.</p>
                                <div class="text-center">
                                    <div class="position-relative d-inline-block">
                                        <div class="position-absolute top-200 start-200 translate-middle">
                                            <label for="product-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Seleccionar imagen">
                                                <div class="avatar-xs">
                                                    <div class="avatar-title bg-light border rounded-circle text-muted cursor-pointer">
                                                        <i class="ri-image-fill"></i>
                                                    </div>
                                                </div>
                                            </label>
                                            <input class="form-control d-none @error('image') is-invalid @enderror" name="image" value="{{$product->image}}" id="product-image-input" type="file" accept="image/png, image/gif, image/jpeg" onchange="previewImage(event)">
                                        </div>
                                        <div class="avatar-lg" style="margin-left: calc(50% - 200px);"> <!-- Alineación mediante margen izquierdo -->
                                            <div class="avatar-title bg-light rounded" style="width: 400px; height: 170px;">
                                                @php
                                                    use Illuminate\Support\Str;
                                                    $slug = Str::slug($product->name, '_');
                                                @endphp
                                                <img src="{{asset('imagenes/products/product_'.$product->id."/".$product->image)}}" id="product-img" class="h-auto" style="width: 150px; height: 30px;" />
                                            </div>
                                        </div>
                                     
                                    </div>
                                    @error('image')
                                        <div class="invalid-feedback" style="color: red">La imagen es requerida</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        {{-- <div class="card-body">
                            <div class="mb-4">
                                <h5 class="fs-14 mb-1">Galería (Imágenes o Videos)</h5>
                        
                                <!-- Selector para elegir entre imagen o video -->
                                <div class="row mb-3">
                                    <div class="col-4">
                                        <select id="mediaType" class="form-select" onchange="toggleMediaInput()">
                                            <option value="" selected>Seleccionar tipo</option>
                                            <option value="image">Imagen</option>
                                            <option value="video">Video</option>
                                        </select>
                                    </div>
                                    
                                    <!-- Input para agregar imágenes o videos -->
                                    <div id="imageInputContainer" class="col-8 d-none">
                                        <input type="file" id="mediaImageInput" name="mediaImages[]" class="form-control" accept="image/*" multiple>
                                    </div>
                            
                                    <div id="videoInputContainer" class="col-8 d-none">
                                        <input type="text" id="mediaVideoInput" name="mediaVideos[]" class="form-control" placeholder="Pegar enlace de video (YouTube, Vimeo)">
                                    </div>
                                </div>
                               
                        
                                <div class="row">
                                    <div class="col-2">
                                        <button type="button" class="btn btn-primary" onclick="addMedia()">Agregar</button>
                                    </div>
                                </div>
                                
                            </div>
                        
                            <!-- Contenedor donde se mostrará la lista de imágenes o videos -->
                            <div id="mediaList" class="row">
                                <!-- Se agregan imágenes o videos aquí -->
                            </div>
                            <!-- Inputs ocultos que se generarán dinámicamente -->
                            <div id="hiddenInputs"></div>
                        </div> --}}
                    </div>
                </div>
                <div class="text-end mb-3">
                    <button type="submit" class="btn btn-warning w-sm">Actualizar</button>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->

        </form>

    </div>
    @section('scripts')
    <script src="{{asset('assets_admin/libs/dropzone/dropzone-min.js')}}"></script>
    <script src="{{asset('assets_admin/js/pages/ecommerce-product-create.init.js')}}"></script>
    <script src="{{asset('assets_admin/js/app.js')}}"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
    {{-- previzualizar imagenes  --}}
    <script>
        function previewImage(event) {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function(){
                var imgElement = document.getElementById('product-img');
                imgElement.src = reader.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    </script>

    @endsection
@endsection