@extends('layouts.admin')
@section('equipos', '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>
                            Equipos
                        </h6>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <div class="container">
                        <div class="row">

                            <div>
                                <h2 class='page-head-line'>Equipos
                                    <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>ID</th>
                                        <th>Modelo</th>
                                        <th>Cantidad</th>
                                        <th></th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($equipos as $equipo)
                                        <tr>
                                            <td>{{ $equipo->id }}</td>
                                            <td>{{ $equipo->modelo->nombre }}</td>
                                            <td>{{ $equipo->cantidad }}</td>
                                            <td>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>



                        </div>
                    </div>

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


    <!--Modal Agregar Equipo-->
    <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 equipo
                        <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="equipos" 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">Modelo</label>
                                <select id="modelo_id" name="modelo_id" type="text" class="form-select"
                                    value="{{ old('modelo_id') }}">
                                    @foreach ($modelos as $modelo)
                                        <option value="{{ $modelo->id }}">
                                            {{ $modelo->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label">Cantidad</label>
                                <input id="cantidad" name="cantidad" type="number" class="form-control"
                                    value="{{ old('cantidad') }}">
                            </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 Equipo-->
    <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 equipo
                        <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="equipos" 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">Tipo de Equipo</label>
                                <select id="tipo_equipo_id_modificar" name="tipo_equipo_id_modificar" type="text"
                                    class="form-select" value="{{ old('tipo_equipo_id') }}">
                                    @foreach ($modelos as $modelo)
                                        <option value="{{ $modelo->id }}">
                                            {{ $modelo->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">Nombre</label>
                                <input id="nombre_modificar" name="nombre_modificar" type="text" class="form-control"
                                    value="{{ old('email') }}">
                            </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="equipos" name="frmBorrar" id="frmBorrar" hidden="hidden">
        @method('delete')
        @csrf
        <input hidden id="id_borrar" name="id_borrar">
    </form>

    <form method="POST" action="deshabilitar_equipo" name="frmDeshabilitar" id="frmDeshabilitar" hidden="hidden">
        @method('put')
        @csrf
        <input hidden id="id_deshabilitar" name="id_deshabilitar">
    </form>

    <form method="POST" action="habilitar_equipo" name="frmHabilitar" id="frmHabilitar" hidden="hidden">
        @method('put')
        @csrf
        <input hidden id="id_habilitar" name="id_habilitar">
    </form>

@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) {

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

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

        function ejecutarBorrar(id) {
            if (confirm(
                    "Al realizar está acción se eliminará de forma permanente el equipo, ¿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