@extends('appAdmin.appAdmin')

@section('contenido')
    <div class="row">
        <div class="col-12">
            <div class="card shadow-lg p-3 bg-body-tertiary">
                <div class="card-header">
                    <div class="d-flex align-items-center">
                        <h4 class="card-title">Jabones</h4>

                        <button class="btn btn-primary ms-auto" data-bs-toggle="modal" data-bs-target="#addRowModal">
                            <i class="fa fa-plus me-2"></i> Añadir
                        </button>
                    </div>

                    <!-- Modal para crear un nuevo jabón -->
                    <div class="modal fade" id="addRowModal" tabindex="-1" role="dialog"
                        aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Nuevo Jabón</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>

                                <!-- Formulario de creación -->
                                <form action="{{ route('jabones.store') }}" id="formulario_store" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <div class="modal-body">
                                        <div class="form-group">
                                            <label class="fw-bold">Nombre del Jabón</label>
                                            <input type="text" class="form-control mb-3" name="nombre" id="nombre" placeholder="Nombre del jabón..." required>
                                        </div>
                                        <div class="form-group">
                                            <label class="fw-bold">Descripción</label>
                                            <textarea class="form-control mb-3" name="descripcion" id="descripcion" placeholder="Descripción del jabón..." required></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label class="fw-bold">Imagen</label>
                                            <input type="file" class="form-control uploader_img" name="img" id="img" accept="image/*" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="fw-bold">Precio Base</label>
                                            <input type="number" class="form-control mb-3" name="precio_base" id="precio_base" placeholder="Precio base..." required>
                                        </div>
                                        <div class="container auto my-3 text-center">
                                            <img class="img-fluid img-thumbnail imagen_jabon w-75" src="">
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                                        <button type="submit" class="btn btn-success">Guardar</button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                    <!-- Fin Modal para crear un nuevo jabón -->
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tabla" class="display table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>Imagen</th>
                                    <th>Nombre</th>
                                    <th>Descripción</th>
                                    <th>Precio Base</th>
                                    <th>Editar</th>
                                    <th>Eliminar</th>
                                </tr>
                            </thead>

                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para editar un jabón -->
    <div class="modal fade" id="modal_update" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"> Editar Jabón: <span class="fw-bold show_nombre">XXX</span> </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Formulario de edición -->
                <form action="" method="POST" id="form_update" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="fw-bold">Nombre del Jabón</label>
                            <input type="text" class="form-control" name="nombre" id="nombre_update" placeholder="Nombre del jabón..." required>
                        </div>
                        <div class="form-group">
                            <label class="fw-bold">Descripción</label>
                            <textarea class="form-control" name="descripcion" id="descripcion_update" placeholder="Descripción del jabón..." required></textarea>
                        </div>
                        <div class="form-group">
                            <label class="fw-bold">Imagen</label>
                            <input type="file" class="form-control uploader_img" name="img" id="img_update" accept="image/*">
                        </div>
                        <div class="form-group">
                            <label class="fw-bold">Precio Base</label>
                            <input type="number" class="form-control" name="precio_base" id="precio_base_update" placeholder="Precio base..." required>
                        </div>
                        <div class="container auto my-3 text-center">
                            <img class="img-fluid img-thumbnail imagen_jabon" id="imagen_update" src="">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-warning">Actualizar</button>
                    </div>
                </form>


            </div>
        </div>
    </div>
    <!-- Fin Modal para editar un jabón -->

    <!-- Modal para eliminar un jabón -->
    <div class="modal fade" id="modal_destroy" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Eliminar Jabón: <span class="fw-bold show_nombre">XXX</span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Formulario de eliminación -->
                <form action="" method="POST" id="form_destroy">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body text-center my-3">
                        <h3>¿Desea eliminar el jabón <b><span class="show_nombre"></span></b>?</h3>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-danger">Eliminar</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <!-- Fin Modal para eliminar un jabón -->
@endsection

@section('js')
    <script>
      $(document).ready(function () {
    var ruta_update = "{{ route('jabones.update', 'x') }}";
    var ruta_destroy = "{{ route('jabones.destroy', 'x') }}";

    // Inicializar DataTable
    var tabla = $('#tabla').DataTable({
        data: @json($data),
        columns: [
            { data: 'img' },
            { data: 'nombre' },
            { data: 'descripcion' },
            { data: 'precio_base' },
            { data: null, orderable: false },
            { data: null, orderable: false },
        ],
        columnDefs: [
            {
                targets: 0,
                render: function (data, type, row) {
                    return `<img src="${row.img}" class="img-fluid w-25" style="width:50px !important">`;
                },
            },
            {
                targets: 4,
                render: function (data, type, row) {
                    return `
                        <button type="button" data-bs-toggle="modal" data-json='${JSON.stringify(row)}'
                            data-bs-target="#modal_update" class="btn btn-link btn-warning btn-lg btn-edit">
                            <i class="fa fa-edit"></i>
                        </button>`;
                },
            },
            {
                targets: 5,
                render: function (data, type, row) {
                    return `
                        <button type="button" data-bs-toggle="modal" data-json='${JSON.stringify(row)}'
                            data-bs-target="#modal_destroy" class="btn btn-link btn-danger btn-lg btn-destroy">
                            <i class="fa fa-times"></i>
                        </button>`;
                },
            },
        ],
    });

    // Botón Editar
    $(document).on('click', '.btn-edit', function () {
        const data = $(this).data('json');
        const ruta = ruta_update.replace('x', data.id_jabon);

        $('#form_update').attr('action', ruta);
        $('#nombre_update').val(data.nombre);
        $('#descripcion_update').val(data.descripcion);
        $('#precio_base_update').val(data.precio_base);
        $('#imagen_update').attr('src', data.img);
        $('#modal_update .show_nombre').html(data.nombre);
    });

    // Botón Eliminar
    $(document).on('click', '.btn-destroy', function () {
        const data = $(this).data('json');
        const ruta = ruta_destroy.replace('x', data.id_jabon);

        $('#form_destroy').attr('action', ruta);
        $('#modal_destroy .show_nombre').html(data.nombre);
    });

    // Ver Imagen Cargada
    $('.uploader_img').change(function () {
        if (this.files && this.files[0]) {
            const reader = new FileReader();
            reader.onload = function (e) {
                $('.imagen_jabon').attr('src', e.target.result);
            };
            reader.readAsDataURL(this.files[0]);
        }
    });
});

    </script>
@endsection