@extends('layouts.app')

@section('content')
    <div class="text-center mt-3">
        <h1 class="mb-5">Control de Stock</h1>
    </div>

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

    <!-- Filtro -->
    <div class="mb-2 form-filter" style="margin-left: 15px;">
        <form action="{{ route('stocks.lista') }}" method="GET">
            <div class="row">
                <div class="col-md-2">
                    <label for="articulo">Artículo:</label>
                    <select name="articulo" id="articulo" class="form-select">
                        <option value="" disabled {{ !request()->filled('articulo') ? 'selected' : '' }}>Seleccione
                        </option>
                        @foreach ($articulos as $id => $nombre)
                            <option value="{{ $id }}" {{ (string) $id === request('articulo') ? 'selected' : '' }}>
                                {{ $nombre }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label for="orden_cantidad">Ordenar cantidad:</label>
                    <select name="orden_cantidad" id="orden_cantidad" class="form-select">
                        <option value="" disabled {{ !request()->filled('orden_cantidad') ? 'selected' : '' }}>Seleccione</option>
                        <option value="asc" {{ request('orden_cantidad') === 'asc' ? 'selected' : '' }}>Ascendente</option>
                        <option value="desc" {{ request('orden_cantidad') === 'desc' ? 'selected' : '' }}>Descendente</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <label for="marca">Marca:</label>
                    <select name="marca" id="marca" class="form-select">
                        <option value=""  disabled {{ !request()->filled('marca') ? 'selected' : '' }}>Seleccione </option>
                        @foreach ($marcas as $id=> $nombre)
                        <option value="{{ $id }}" {{ (string) $id === request('marca') ? 'selected' : '' }}>
                            {{ $nombre }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="rubro">Rubro:</label>
                    <select name="rubro" id="rubro" class="form-select">
                        <option value="" disabled {{ !request()->filled('rubro') ? 'selected' : '' }}>Seleccione </option>
                        @foreach ($rubros as $id=> $nombre)
                        <option value="{{ $id }}" {{ (string) $id === request('rubro') ? 'selected' : '' }}>
                            {{ $nombre }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="subrubro">SubRubro:</label>
                    <select name="subrubro" id="subrubro" class="form-select">
                        <option value="" disabled {{ !request()->filled('subrubro') ? 'selected' : '' }}>Seleccione </option>
                        @foreach ($subrubros as $id=> $nombre)
                        <option value="{{ $id }}" {{ (string) $id === request('subrubros') ? 'selected' : '' }}>
                            {{ $nombre }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 mt-4">
                    <button type="submit" class="btn btn-primary mb-1 mr-2"><i class="fas fa-filter"></i> Filtrar</button>
                    <a href="{{ route('stocks.lista') }}" class="btn btn-success mb-1"><i class="fas fa-eraser"></i>
                        Limpiar filtro</a>
                </div>
            </div>
        </form>
    </div>

    <div class="d-flex justify-content-center align-items-center" style="min-height: 50vh;">
        @if (count($stocks) > 0)
            <div class="table-responsive" style="width: 70%;">
                <table class="table table-striped text-center">
                    <thead class="thead-light">
                        <tr>
                            <th>Articulo</th>
                            <th>Cantidad</th>
                            <th>Marca</th>
                            <th>Rubro</th>
                            <th>SubRubro</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($stocks as $stock)
                            <tr>
                                <td>{{ $stock->articulo->articulo }}</td>
                                <td>{{ $stock->cantidad }}</td>
                                <td>{{ $stock->articulo->marca->marca }}</td>
                                <td>{{ $stock->articulo->rubro->rubro }}</td>
                                <td>
                                    @foreach ($stock->articulo->rubro->subRubros as $subrubro)
                                        {{ $subrubro->subrubro }}
                                    @endforeach
                                </td>

                                <td>
                                    <button class="btn btn-dark show-details" data-id="{{ $stock->id }}"
                                        data-cantidad="{{ $stock->cantidad }}"
                                        data-articulo="{{ $stock->articulo->articulo }}"
                                        data-rubro="{{ $stock->articulo->rubro->rubro }}"
                                        data-subrubro= 
                                        "@foreach ($stock->articulo->rubro->subRubros as $subrubro)
                                        {{ $subrubro->subrubro }} @endforeach ">
                                        <i class="fas fa-info-circle"></i> Detallar
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="alert alert-warning text-center" style="margin-top: 20px;">
                No se encontraron resultados.
            </div>
        @endif
    </div>

    <!-- Modal -->
    <div class="modal fade" id="stockModal" tabindex="-1" role="dialog" aria-labelledby="stockModalLabel"
        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="stockModalLabel">Detalles de Stock</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h2 class="mb-4">Control de Stock</h2>
                    <h3>Cantidad: <span id="modalCantidad"></span></h3>
                    <h3>Articulo: <span id="modalArticulo"></span></h3>
                    <h3>Rubro: <span id="modalRubro"></span></h3>
                    <h3>SubRubro: <span id="modalSubRubro"></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 cantidad = $(this).data('cantidad');
                var articulo = $(this).data('articulo');
                var rubro = $(this).data('rubro');
                var subrubro = $(this).data('subrubro');

                $('#modalId').text(id);
                $('#modalCantidad').text(cantidad);
                $('#modalArticulo').text(articulo);
                $('#modalRubro').text(rubro);
                $('#modalSubRubro').text(subrubro);

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

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