@extends('layouts.app')

@section('content')
    <div class="text-center mt-3">
        <h1>Control de articulos</h1>
    </div>
    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    <div class="d-flex justify-content-center mb-3">
        <a class="btn btn-success" style="width: 200px;" href="{{ route('articulos.create') }}"><i class="fas fa-plus"></i>
            Añadir</a>
    </div>
    
    <form action="{{ route('articulos.filtrar') }}" method="GET" class="mb-3" style="width: 150px; margin-right: 20px;">
        <div class="input-group">
            <select class="form-select" name="ordenar" id="ordenar">
                <option value="alfabetico_asc" {{ request('ordenar') === 'alfabetico_asc' ? 'selected' : '' }}>A-Z</option>
                <option value="alfabetico_desc" {{ request('ordenar') === 'alfabetico_desc' ? 'selected' : '' }}>Z-A
                </option>
                <option value="reciente" {{ request('ordenar') === 'reciente' ? 'selected' : '' }}>Reciente</option>
                <option value="antiguo" {{ request('ordenar') === 'antiguo' ? 'selected' : '' }}>Antiguo</option>
                <option value="precio_asc" {{ request('ordenar') === 'precio_asc' ? 'selected' : '' }}>Menor precio</option>
                <option value="precio_desc" {{ request('ordenar') === 'precio_desc' ? 'selected' : '' }}>Mayor precio
                </option>
                <option value="trazabilidad_si" {{ request('ordenar') === 'trazabilidad_si' ? 'selected' : '' }}>
                    Trazabilidad - Si</option>
                <option value="trazabilidad_no" {{ request('ordenar') === 'trazabilidad_no' ? 'selected' : '' }}>
                    Trazabilidad - No</option>
            </select>
            <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-filter"></i></button>
        </div>
    </form>

    <form action="{{ route('articulos.buscar') }}" method="GET">
        <div class="form-group d-flex justify-content-end mb-3">

            <input type="text" name="q" class="form-control" placeholder="Buscar artículos"
                value="{{ request('q') }}" style="width: 350px;">
            <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Buscar</button>

            @if (request('q'))
                <a href="{{ route('articulos.index') }}" class="btn btn-danger">Borrar</a>
            @endif
        </div>
    </form>


    @if (count($articulos) > 0)
        <div class="table-responsive">
            <table class="table table-striped text-center" style="margin-top: 20px;">
                <thead class="thead-light">
                    <tr>
                        <th>Artículo</th>
                        <th>¿Es trazable?</th>
                        <th>Marca</th>
                        <th>Rubro</th>
                        <th>SubRubro</th>
                        <th>Descripcion</th>
                        <th>Precio</th>
                        <th>Acciones</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach ($articulos as $articulo)
                        <tr>
                            <td>{{ $articulo->articulo }}</td>
                            <td>{{ $articulo->trazabilidad }}</td>
                            <td>{{ $articulo->marca->marca }}</td>
                            <td>{{ $articulo->rubro->rubro }}</td>
                            <td>
                                    @foreach ($articulo->rubro->subrubros as $subrubro)
                                        {{ $subrubro->subrubro }}
                                    @endforeach
                            </td>
                            <td>{{ $articulo->descripcion }}</td>
                            <td>{{ $articulo->precio }}</td>
                            <td>

                                <button class="btn btn-outline-dark show-details" data-id="{{ $articulo->id }}"
                                    data-articulo="{{ $articulo->articulo }}"
                                    data-trazabilidad="{{ $articulo->trazabilidad }}"
                                    data-marca="{{ $articulo->marca->marca }}"
                                    data-rubro="{{ $articulo->rubro->rubro }}" data-rubro-id="{{ $articulo->rubro->id }}"
                                    data-descripcion="{{ $articulo->descripcion }}" data-precio="{{ $articulo->precio }}">
                                    <i class="fas fa-info-circle"></i> Detallar
                                </button>

                                <button class="btn btn-outline-info edit-article-btn" data-bs-toggle="modal"
                                    data-bs-target="#editarModal" data-id="{{ $articulo->id }}"
                                    data-articulo="{{ $articulo->articulo }}"
                                    data-trazabilidad="{{ $articulo->trazabilidad }}"
                                    data-marca="{{ $articulo->marca->marca }}" data-marca-id="{{ $articulo->marca->id }}"
                                    data-descripcion="{{ $articulo->descripcion }}" data-precio="{{ $articulo->precio }}">
                                    Modificar
                                </button>

                                <div class="modal fade" id="editarModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                                    aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">

                                            <div class="modal-header">
                                                <h4 class="modal-title fw-bold" id="exampleModalLabel">Editar artículo</h4>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>

                                            <div class="modal-body">
                                                <form method="POST"
                                                    action="{{ route('articulos.update', ['articulo' => $articulo->id]) }}"
                                                    enctype="multipart/form-data">
                                                    @csrf
                                                    @method('PUT')

                                                    <div class="form-row" style="text-align: left;">
                                                        <label>Artículo: </label>
                                                        <input class="form-control" type="text" name="articulo"
                                                            value="{{ old('articulo') ?? $articulo->articulo }}" required>
                                                    </div>

                                                    <div class="form-group mt-3" style="text-align: left;">
                                                        <label for="tipo_movimiento">¿Es trazable?: </label>
                                                        <select class="form-select" name="trazabilidad" required>
                                                            <option value="Si"
                                                                @if (old('trazabilidad', $articulo->trazabilidad) === 'Si') selected @endif>Si
                                                            </option>
                                                            <option value="No"
                                                                @if (old('trazabilidad', $articulo->trazabilidad) === 'No') selected @endif>No
                                                            </option>
                                                        </select>
                                                    </div>

                                                    <div class="form-group mt-3" style="text-align: left;">
                                                        <label for="marca_id">Marca: </label>
                                                        <select id="marca_id" name="marca_id"
                                                            class="form-select @error('marca_id') is-invalid @enderror"
                                                            required>
                                                            @foreach ($marcas as $marca)
                                                                <option value="{{ $marca->id }}"
                                                                    @if ($marca->id == old('marca_id', $articulo->marca_id)) selected @endif>
                                                                    {{ $marca->marca }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        @error('marca_id')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>

                                                    <div class="form-row mt-3" style="text-align: left;">
                                                        <label>Descripción: </label>
                                                        <input class="form-control" type="text" name="descripcion"
                                                            value="{{ old('descripcion') ?? $articulo->descripcion }}"
                                                            required>
                                                    </div>
                                                    <div class="form-row mt-3" style="text-align: left;">
                                                        <label>Precio: </label>
                                                        <input class="form-control" type="number" step="0.01"
                                                            name="precio"
                                                            value="{{ old('precio') ?? $articulo->precio }}">
                                                    </div>

                                                    <div class="modal-footer">
                                                        <button type="submit" class="btn btn-primary btn-lg"
                                                            style="padding: 6px 16px; font-size: 14px;"><i
                                                                class="fa fa-save"></i> Guardar cambios</button>

                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Cerrar</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <form method="POST" class="d-inline"
                                    action="{{ route('articulos.destroy', ['articulo' => $articulo->id]) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger"> Baja</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
            </table>
        </div>
    @else
        <div class="alert alert-warning text-center">
            No se encontraron resultados.
        </div>
    @endif

    <div class="modal fade" id="articuloModal" tabindex="-1" role="dialog" aria-labelledby="articuloModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="articuloModalLabel">Detalles del Artículo</h5>
                </div>
                <div class="modal-body">
                    <h2 class="mb-4">Detalle del Artículo</h2>
                    <h3>Artículo: <span id="modalArticulo"></span></h3>
                    <h3>Trazabilidad: <span id="modalTrazabilidad"></span></h3>
                    <h3>Marca: <span id="modalMarca"></span></h3>
                    <h3>Rubro: <span id="modalRubro"></span></h3>
                    <h3>Descripción: <span id="modalDescripcion"></span></h3>
                    <h3>Precio: <span id="modalPrecio"></span></h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"><i
                            class="fas fa-window-close"></i> Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@endsection



@section('scripts')
    <script>
        $(document).ready(function() {
            $('.show-details').click(function() {
                var id = $(this).data('id');
                var articulo = $(this).data('articulo');
                var trazabilidad = $(this).data('trazabilidad');
                var marca = $(this).data('marca');
                var rubro = $(this).data('rubro');
                var descripcion = $(this).data('descripcion');
                var precio = $(this).data('precio');

                $('#modalId').text(id);
                $('#modalArticulo').text(articulo);
                $('#modalTrazabilidad').text(trazabilidad);
                $('#modalMarca').text(marca);
                $('#modalRubro').text(rubro);
                $('#modalDescripcion').text(descripcion);
                $('#modalPrecio').text(precio);

                $('#articuloModal').modal('show');
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('.close, [data-dismiss="modal"]').on('click', function() {
                $('#articuloModal').modal('hide');
            });
        });
    </script>


    <script>
        $(document).ready(function() {
            $('.edit-article-btn').click(function() {
                var id = $(this).data('id');
                var articulo = $(this).data('articulo');
                var trazabilidad = $(this).data('trazabilidad');
                var marcaId = $(this).data('marca-id');
                var descripcion = $(this).data('descripcion');
                var precio = $(this).data('precio');

                $('#editarModal').find('input[name="articulo"]').val(articulo);
                $('#editarModal').find('select[name="trazabilidad"]').val(trazabilidad);
                $('#editarModal').find('select[name="marca_id"]').val(marcaId);
                $('#editarModal').find('input[name="descripcion"]').val(descripcion);
                $('#editarModal').find('input[name="precio"]').val(precio);

                var actionUrl = "{{ route('articulos.update', ['articulo' => ':id']) }}".replace(':id',
                    id);
                $('#editarModal').find('form').attr('action', actionUrl);

                $('#editarModal').modal('show');
            });
        });
    </script>
@endsection