@extends('layouts.admin')
@section('modelos', 'active bg-gradient-primary')


@section('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">

@endsection
@section('contenido')

    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize ps-3">
                            <i class="fa fa-wifi"></i>
                            Modelos
                        </h6>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <div class="container">
                        <div class="row">

                            <div>
                                <h2 class='page-head-line'>Modelos
                                    <button class='btn btn-primary' data-bs-toggle="modal"
                                        data-bs-target="#modalAgregar">Agregar</button>
                                </h2>
                            </div>
                            @if (Session::has('mensaje'))
                    <p class="alert alert-success2 col-10 offset-1" align="center">
                        <strong>{{ Session::get('mensaje') }}</strong>
                        <button type="button" class="close2" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </p>
                @endif
                            <table id="table_id" class="display config-table">
                                <thead>
                                    <tr>
                                        <th>Categoria</th>
                                        <th>Marca</th>
                                        <th>Modelo</th>
                                        <th>Condición</th>
                                        <th>Acciones</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($modelos as $modelo)
                                        <tr>
                                            <td>{{ $modelo->tipoEquipo->nombre}}</td>
                                            <td>{{ $modelo->marca}}</td>
                                            <td>{{ $modelo->nombre }}</td>
                                            <td>{{ $modelo->condicion}}</td>
                                            <td>
                                                <i style="color:orange" title="Editar datos del modelo"
                                                    class='fa fa-edit icon-editar'
                                                    onclick="abrirModalModificar('{{ $modelo->id }}','{{ $modelo->nombre }}','{{ $modelo->tipo_equipo_id }}','{{$modelo->marca}}','{{$modelo->condicion}}')"></i>
                                                <i style="color:red" title="Eliminar modelo"
                                                    class='fa fa-xmark icon-eliminar'
                                                    onclick="ejecutarBorrar({{ $modelo->id }})"></i>

                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>



                            <!--Modal Agregar Modelo-->
                            <div class="modal fade" id="modalAgregar" tabindex="-1" role="dialog"
                                aria-labelledby="modalAgregar" aria-hidden="true">
                                <div class="modal-dialog modal-lg" role="document">
                                    <div class="modal-content col-md-12">

                                        <div class="modal-header col-md-12">
                                            <h5 class="modal-title" id="modalAgregar">
                                                Agregar modelo
                                                <button type="button" class="close" data-bs-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </h5>
                                        </div>

                                        <div class="modal-body col-md-12">
                                            <form id="frmRegistrar" action="modelos" method="POST" class="row">
                                                @csrf
                                                <div class="col-md-6">
                                                    <div class="input-group input-group-outline my-3  is-focused">
                                                        <label class="form-label">Categoria</label>
                                                        <select id="tipo_equipo_id" name="tipo_equipo_id" type="text"
                                                            class="form-select" value="{{ old('tipo_equipo_id') }}">
                                                            @foreach ($tipo_equipos as $tipo_equipo)
                                                                <option value="{{ $tipo_equipo->id }}">
                                                                    {{ $tipo_equipo->nombre }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="input-group input-group-outline my-3">
                                                        <label class="form-label">Modelo</label>
                                                        <input id="nombre" name="nombre" type="text"
                                                            class="form-control" value="{{ old('nombre') }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="input-group input-group-outline my-3">
                                                        <label class="form-label">Marca</label>
                                                        <input id="marca" name="marca" type="text"
                                                            class="form-control" value="{{ old('marca') }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="input-group input-group-outline my-3  is-focused">
                                                        <label class="form-label">Condición</label>
                                                        <select id="condicion" name="condicion" type="text"
                                                            class="form-select" value="{{ old('condicion') }}">
                                                                <option value="Vigente">Vigente</option>
                                                                <option value="Obsoleto">Obsoleto</option>

                                                        </select>
                                                    </div>
                                                </div>



                                            </form>

                                        </div>


                                        <div class="modal-footer col-md-12">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                                                aria-label="Close">Cerrar</button>
                                            <button type="submit" form="frmRegistrar"
                                                class="btn btn-primary">Aceptar</button>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <!--Modal Editar Modelo-->
                            <div class="modal fade" id="modalModificar" tabindex="-1" role="dialog"
                                aria-labelledby="modalModificar" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content col-md-12">
                                        <div class="modal-header col-md-12">
                                            <h5 class="modal-title" id="exampleModalLabel">
                                                Editar modelo
                                                <button type="button" class="close" data-bs-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </h5>
                                        </div>
                                        <div class="modal-body col-md-12">
                                            <form id="frmEditar" action="modelos" method="POST" class="row">
                                                @csrf
                                                @method('PUT')
                                                <input id="id_modificar" name="id_modificar" hidden>
                                                <div class="col-md-6">
                                                    <div class="input-group input-group-outline my-3  is-focused">
                                                        <label class="form-label">Categoría</label>
                                                        <select id="tipo_equipo_id_modificar"
                                                            name="tipo_equipo_id_modificar" type="text"
                                                            class="form-select" value="{{ old('tipo_equipo_id') }}">
                                                            @foreach ($tipo_equipos as $tipo_equipo)
                                                                <option value="{{ $tipo_equipo->id }}">
                                                                    {{ $tipo_equipo->nombre }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="input-group input-group-outline my-3   is-focused">
                                                        <label class="form-label">Modelo</label>
                                                        <input id="nombre_modificar" name="nombre_modificar"
                                                            type="text" class="form-control"
                                                            value="{{ old('nombre_modificar') }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="input-group input-group-outline my-3">
                                                        <label class="form-label">Marca</label>
                                                        <input id="marca_modificar" name="marca_modificar" type="text"
                                                            class="form-control" value="{{ old('marca_modificar') }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="input-group input-group-outline my-3  is-focused">
                                                        <label class="form-label">Condición</label>
                                                        <select id="condicion_modificar" name="condicion_modificar" type="text"
                                                            class="form-select" value="{{ old('condicion_modificar') }}">
                                                                <option value="Vigente">Vigente</option>
                                                                <option value="Obsoleto">Obsoleto</option>

                                                        </select>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer col-md-12">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                                                aria-label="Close">Cerrar</button>
                                            <button type="submit" form="frmEditar"
                                                class="btn btn-primary">Aceptar</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <form method="POST" action="modelos" name="frmBorrar" id="frmBorrar" hidden="hidden">
                                @method('delete')
                                @csrf
                                <input hidden id="id_borrar" name="id_borrar">
                            </form>
                            <form method="POST" action="deshabilitar_modelo" name="frmDeshabilitar"
                                id="frmDeshabilitar" hidden="hidden">
                                @method('put')
                                @csrf
                                <input hidden id="id_deshabilitar" name="id_deshabilitar">
                            </form>
                            <form method="POST" action="habilitar_modelo" name="frmHabilitar" id="frmHabilitar"
                                hidden="hidden">
                                @method('put')
                                @csrf
                                <input hidden id="id_habilitar" name="id_habilitar">
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>



@endsection

@section('js')

    <!-- datatable-->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <script src="js/config_table.js"></script>

    <script>
        function abrirModalActualizarPassword(id) {
            $('#id_password').val(id);
            $("#modalActualizarPassword").modal('show');

            // $('#frmActualizarPassword').submit();
        }

        function abrirModalModificar(id, nombre, tipo_equipo,marca, condicion) {

            $('#id_modificar').val(id);
            $('#nombre_modificar').val(nombre);
            $('#tipo_equipo_id_modificar').val(tipo_equipo);
            $('#marca_modificar').val(marca);
            $('#condicion_modificar').val(marca);

            $('#modalModificar').modal('show');
        }

        function ejecutarBorrar(id) {
            if (confirm(
                    "Al realizar está acción se eliminará de forma permanente el modelo, ¿Desea continuar?") ==
                true
            ) {
                $('#id_borrar').val(id);
                $('#frmBorrar').submit();
            }
        }

    </script>

    <script>
        $(document).ready(function() {
            $('#table_id').DataTable();

            @if (session('error_modal') == 'agregar')
                $("#modalAgregar").modal('show');
            @endif

            @if (session('error_modal') == 'modificar')
                $("#modalModificar").modal('show');
            @endif

            @if (session('error_modal') == 'password')
                $("#modalActualizarPassword").modal('show');
            @endif

        });
    </script>

@endsection