@extends('layouts.app')

@section('content')
    <div class="text-center mt-3">
        <h1 class="mb-4">Control de movimientos</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-4">
        <a class="btn btn-success" style="width: 200px;" href="{{ route('movimientos.create') }}">
            <i class="fas fa-plus"></i> Añadir movimiento
        </a>
    </div>
    
    <form action="{{ route('movimientos.filtrar') }}" method="GET" class="mb-2 form-filter">
        <div class="row">

            <div class="col-md-2" style="margin-left: 15px;">
                <label for="articulo">Artículo:</label>
                <select name="articulo" id="articulo" class="form-select">
                    <option value="" disabled {{ !request()->filled('articulo') ? 'selected' : '' }}>Selec
                    </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="tipo_movimiento">Tipo Movim:</label>
                <select name="tipo_movimiento" id="tipo_movimiento" class="form-select">
                    <option value="" disabled {{ !request()->filled('tipo_movimiento') ? 'selected' : '' }}>Seleccione
                    </option>
                    <option value="Ingreso" {{ request('tipo_movimiento') === 'Ingreso' ? 'selected' : '' }}>Ingreso
                    </option>
                    <option value="Egreso" {{ request('tipo_movimiento') === 'Egreso' ? 'selected' : '' }}>Egreso</option>
                </select>
            </div>

            <div class="col-md-2">
                <label for="tipo_opcion">Tipo de Oper:</label>
                <select name="tipo_opcion" id="tipo_opcion" class="form-select">
                    <option value="" disabled {{ !request()->filled('tipo_opcion') ? 'selected' : '' }}>Seleccione</option>
                    @foreach ($tipoOpciones as $id => $tipoOpcion)
                        <option value="{{ $id }}" {{ (string) $id === request('tipo_opcion') ? 'selected' : '' }}>
                            {{ $tipoOpcion }}</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('subrubro') ? 'selected' : '' }}>
                            {{ $nombre }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2" style="margin-left: 15px;">
                <label for="fecha_inicio">Fecha Inicio:</label>
                <input type="date" name="fecha_inicio" id="fecha_inicio" class="form-control"
                    value="{{ request('fecha_inicio') }}">
            </div>

            <div class="col-md-2">
                <label for="fecha_fin">Fecha de Fin:</label>
                <input type="date" name="fecha_fin" id="fecha_fin" class="form-control"
                    value="{{ request('fecha_fin') }}">
            </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('movimientos.index') }}" class="btn btn-success mb-1"><i class="fas fa-eraser"></i>
                    Limpiar filtro</a>
            </div>
        </div>
    </form>



    <div class="d-flex justify-content-center align-items-center" style="min-height: 30vh;">
        @if (count($movimientos) > 0)
            <div class="table-responsive" style="width: 95%;">
                <table class="table table-striped text-center" style="margin-top: 20px;">
                    <thead class="thead-light">
                        <tr>
                            <th>Articulo</th>
                            <th>Tipo de Movimiento</th>
                            <th>Tipo de Opción del movimiento</th>
                            <th>Cantidad</th>
                            <th>Fecha de Movimiento</th>
                            <th>Detalle</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($movimientos as $movimiento)
                            <tr>
                                <td>{{ $movimiento->articulo->articulo }}</td>
                                <td>{{ $movimiento->tipo_movimiento }}</td>
                                <td>{{ $movimiento->tipoOpciones->tipoOpcion }}</td>
                                <td>{{ $movimiento->cantidad }}</td>
                                <td>{{ date('d/m/Y', strtotime($movimiento->fecha_carga)) }}</td>
                                <td>{{ $movimiento->detalle }}</td>
                                <td>
                                    <form action="{{ route('movimientos.revertir', $movimiento) }}" method="POST" id="deleteForm">
                                        @csrf
                                        @method('POST')
                                        <button type="button" onclick="confirmarEliminacion(this.form)" class="btn btn-danger"><i class="fas fa-trash-alt" style="color: #490a0a;"></i> Eliminar</button>
                                    </form>
                                
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="alert alert-warning text-center" style="margin-top: 5px;">
                No se encontraron resultados.
            </div>
        @endif
    </div>
    </div>
@endsection


@section('scripts')
<script>
    function confirmarEliminacion(form) {
        event.preventDefault();

        Swal.fire({
            title: '¿Estás seguro de eliminar este movimiento?',
            text: "¡No podrás revertir esta acción!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Sí, eliminar!',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    }
</script>

@endsection