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

                            <div>
                                <h2 class='page-head-line'>Categoría
                                    <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>Tipo</th>
                                        <th>Tarifa</th>
                                        <th>Uso</th>
                                        <th>Acciones</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($tipo_equipos as $tipo_equipo)
                                        <tr>
                                            <td>{{ $tipo_equipo->nombre }}</td>
                                            <td>{{ $tipo_equipo->tipo }}</td>
                                            <td>{{ $tipo_equipo->tarifa }}</td>
                                            @php
                                                // Construir la cadena de texto para TB-IB-TV-CM
                                                $checks = [];
                                                if ($tipo_equipo->TB) {
                                                    $checks[] = 'TB';
                                                }
                                                if ($tipo_equipo->IB) {
                                                    $checks[] = 'IB';
                                                }
                                                if ($tipo_equipo->TV) {
                                                    $checks[] = 'TV';
                                                }
                                                if ($tipo_equipo->CM) {
                                                    $checks[] = 'CM';
                                                }
                                                $checksString = implode('-', $checks);
                                            @endphp
                                            <td>{{ $checksString }}</td>
                                            <td>
                                                <i style="color:orange;cursor:pointer" title="Editar datos del tipo_equipo"
                                                    class='fa fa-edit icon-editar'
                                                    onclick="abrirModalModificar({{ $tipo_equipo->id }},'{{ $tipo_equipo->nombre }}','{{ $tipo_equipo->tipo }}','{{$tipo_equipo->tarifa}}',{{ $tipo_equipo->TB }},{{ $tipo_equipo->IB }},{{ $tipo_equipo->TV }},{{ $tipo_equipo->CM }})"></i>
                                                <i style="color:red" title="Eliminar tipo_equipo"
                                                    class='fa fa-xmark icon-eliminar'
                                                    onclick="ejecutarBorrar({{ $tipo_equipo->id }})"></i>

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

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



    <!--Modal Agregar TipoEquipo-->
    <div class="modal fade" id="modalAgregar" tabindex="-1" role="dialog" aria-labelledby="modalAgregar"
        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="modalAgregar">
                        Agregar Tipo de 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 row">
                    <form id="frmRegistrar" action="tipo_equipos" method="POST" class="row">
                        @csrf
                        <div class="col-md-12">
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label">Nombre</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"></label>

                                <select id="tipo" name="tipo" type="text" class="form-select"
                                    value="{{ old('tipo') }}">
                                    <option value="Equipo">Equipo</option>
                                    <option value="Accesorio">Accesorio</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label">Tarifa</label>
                                <input id="tarifa" name="tarifa" type="number" class="form-control"
                                    value="{{ old('tarifa') }}">
                            </div>
                        </div>

                        <div class="form-check col-md-6">
                            <input class="form-check-input" type="checkbox" value="1" id="TB" name="TB">
                            <label class="form-check-label" for="flexCheckDefault">
                                TB
                            </label>
                        </div>
                        <div class="form-check col-md-6">
                            <input class="form-check-input" type="checkbox" value="1" id="IB"
                                name="IB">
                            <label class="form-check-label" for="flexCheckDefault">
                                IB
                            </label>
                        </div>
                        <div class="form-check col-md-6">
                            <input class="form-check-input" type="checkbox" value="1" id="TV"
                                name="TV">
                            <label class="form-check-label" for="flexCheckDefault">
                                TV
                            </label>
                        </div>
                        <div class="form-check col-md-6">
                            <input class="form-check-input" type="checkbox" value="1" id="CM"
                                name="CM">
                            <label class="form-check-label" for="flexCheckDefault">
                                CM
                            </label>
                        </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 TipoEquipo-->
    <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 Tipo de 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="tipo_equipos" method="POST" class="row">
                        @csrf
                        @method('PUT')
                        <input id="id_modificar" name="id_modificar" hidden>
                        <div class="col-md-12">
                            <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('nombre_modificar') }}">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3">
                                <select id="tipo_modificar" name="tipo_modificar" type="text" class="form-select"
                                    value="{{ old('tipo_modificar') }}">
                                    <option value="Equipo">Equipo</option>
                                    <option value="Accesorio">Accesorio</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label">Tarifa</label>
                                <input id="tarifa_modificar" name="tarifa_modificar" type="number" class="form-control"
                                    value="{{ old('tarifa_modificar') }}">
                            </div>
                        </div>

                        <div class="form-check col-md-6">
                            <input class="form-check-input" type="checkbox" value="1" id="TB_modificar" name="TB_modificar">
                            <label class="form-check-label" for="flexCheckDefault">
                                TB
                            </label>
                        </div>
                        <div class="form-check col-md-6">
                            <input class="form-check-input" type="checkbox" value="1" id="IB_modificar"
                                name="IB_modificar">
                            <label class="form-check-label" for="flexCheckDefault">
                                IB
                            </label>
                        </div>
                        <div class="form-check col-md-6">
                            <input class="form-check-input" type="checkbox" value="1" id="TV_modificar"
                                name="TV_modificar">
                            <label class="form-check-label" for="flexCheckDefault">
                                TV
                            </label>
                        </div>
                        <div class="form-check col-md-6">
                            <input class="form-check-input" type="checkbox" value="1" id="CM_modificar"
                                name="CM_modificar">
                            <label class="form-check-label" for="flexCheckDefault">
                                CM
                            </label>
                        </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="tipo_equipos" name="frmBorrar" id="frmBorrar" hidden="hidden">
        @method('delete')
        @csrf
        <input hidden id="id_borrar" name="id_borrar">
    </form>
    <form method="POST" action="deshabilitar_tipo_equipo" name="frmDeshabilitar" id="frmDeshabilitar" hidden="hidden">
        @method('put')
        @csrf
        <input hidden id="id_deshabilitar" name="id_deshabilitar">
    </form>
    <form method="POST" action="habilitar_tipo_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,tarifa, TB, IB, TV, CM) {
            $("#id_modificar").val(id);
            $("#nombre_modificar").val(nombre);
            $("#tipo_modificar").val(tipo);
            $("#tarifa_modificar").val(tarifa);
            $('#modalModificar').modal('show');
            if(TB)
            {
                $("#TB_modificar").prop('checked',true);
            }
            else
            {
                $("#TB_modificar").prop('checked',false);

            }
            if(IB)
            {
                $("#IB_modificar").prop('checked',true);
            }
            else
            {
                $("#IB_modificar").prop('checked',false);

            }
            if(TV)
            {
                $("#TV_modificar").prop('checked',true);
            }
            else
            {
                $("#TV_modificar").prop('checked',false);

            }
            if(CM)
            {
                $("#CM_modificar").prop('checked',true);
            }
            else
            {
                $("#CM_modificar").prop('checked',false);

            }
        }

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

        function ejecutarDeshabilitar(id) {
            if (confirm("Al realizar está acción el tipo_equipo no podrá acceder a su cuenta, ¿Desea continuar?") == true) {
                $('#id_deshabilitar').val(id);
                $('#frmDeshabilitar').submit();
            }
        }

        function ejecutarHabilitar(id) {
            if (confirm("Al realizar está acción el tipo_equipo podrá ingresar a su cuenta, ¿Desea continuar?") == true) {
                $('#id_habilitar').val(id);
                $('#frmHabilitar').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