@extends('layout')
<link rel="stylesheet" href="{{ asset('spid/vendors/select2/select2.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ asset('spid/vendors/select2/select2-materialize.css') }}" type="text/css">
<link rel="stylesheet" type="text/css" href="{{ asset('spid/css/pages/form-select2.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('spid/css/pages/data-tables.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('spid/vendors/data-tables/css/select.dataTables.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('spid/vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('spid/vendors/data-tables/css/jquery.dataTables.min.css') }}">
{{--<link rel="stylesheet" type="text/css" href="{{ asset('spid/vendors/lector/bootstrap-min.css') }}">--}}
{{--<link rel="stylesheet" type="text/css" href="{{ asset('spid/vendors/lector/app.css') }}">--}}
<meta name="csrf-token" content="{{ csrf_token() }}">
@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col s12"><br><br>
                            <div class="col s11"></div>
                            <div class="col s1">
                                <a  href="{{route('diputados.create')}}">
                                    <button type="button" class="btn btn-submit text-light" style="background-color:rgb(150,0,72); border-radius: 25px;">
                                        <i class="btn-icon-prepend" data-feather="plus-circle"></i>
                                        Agregar
                                    </button>
                                </a><br><br>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12">
                            <table id="data-table-simple" class="display" style="width: 100%!important;">
                                <thead>
                                <tr>
                                    <th style="width: 40%">Diputado</th>
                                    <th style="width: 40%">Correo institucional</th>
                                    <th style="width: 10%">Grupo parlamentario</th>
                                    <th style="text-align: center; width: 10%" >Acciones</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($diputados as $item)
                                    @if($item->status == 1)
                                        <tr>
                                    @else
                                        <tr style="background-color: #dba9a9">
                                    @endif
                                        <td> {{$item->nombre_completo}}</td>
                                        <td> {{$item->username}}</td>
                                        <td> {{$item->g_parlamentario}}</td>
                                        <td>
                                            @if($item->status == 1)
                                                <div class="row">
{{--                                                    <div class="input-field col s12">--}}
                                                        <div class="form-group">
                                                    <div class="input-field col s3">
                                                        <a onclick="bajaDip({{$item->id}})"><i class="material-icons" title="Baja" style="color: #ff2e0f">delete_forever</i></a>
                                                    </div>
                                                    <div class="input-field col s3">
                                                        <a href="{{ route('diputados.edit', [$item->id])}}"><i class="material-icons" title="Editar" style="color: #ff2e0f">create</i></a>
                                                    </div>
                                                    <div class="input-field col s3">
                                                        @if($item->userD)
                                                            @if($item->userD->huella_izq != '' || $item->userD->huella_izq != null)
                                                                <a onclick="huellaDip({{$item->id}})"><i class="material-icons" title="Reemplazar huella" style="color: #257405">fingerprint</i></a>
                                                            @else
                                                                <a onclick="huellaDip({{$item->id}})"><i class="material-icons" title="Registrar huella" style="color: #ff2e0f">fingerprint</i></a>
                                                            @endif
                                                        @endif
                                                    </div>
                                                    <div class="input-field col s3">
                                                    @if($item->pass == 1)
                                                        <a onclick="psw({{$item->id}})"><i class="material-icons" title="Reestablecer psw">security</i></a>
                                                    @endif
                                                    </div>
                                                </div>
                                                </div>
                                            @else
                                                <a onclick="altaDip({{$item->id}})"><i class="material-icons" title="Activar" style="color: #468916">check_circle</i></a>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div id="modal1" class="modal" style="width: 100%; height: 800%">
        <input type="hidden" name="idDip" id="idDip">
        <div class="modal-content">
            <h4>Registro de huella</h4>
            <br>

        </div>
        <div id="Container">
            <div class="card-tabs">
                <ul class="tabs tabs-fixed-width">
                    <li class="tab"><a href="#content-reader">Lector</a></li>
                    <li class="tab"><a href="#content-capture">Captura</a></li>
                </ul>
            </div>
                {{--            <div id="Scores">--}}
                {{--                <h5>Scan Quality : <input type="text" id="qualityInputBox" size="20" style="background-color:#DCDCDC;text-align:center;"></h5>--}}
                {{--            </div>--}}
            <div id="content-capture" style="display : none;">
                <div class="row">
                    <div class="col s12">
                        <center>
                            <div id="status"></div>
                        </center>
                    </div>
                    <div class="row">
                        <div class="col s12">
                            <center>
                                <div id="imagediv" style="width: 660px;height: 660px;overflow: hidden;border: 1px solid rgba(51, 122, 183, 0.39);"></div>
                            </center>
                        </div>
                    </div>
                </div>

                <div id="contentButtons">
                    <table>
                        <tr>
                            <td>
                                <p>
                                    <label>
                                        <input class="with-gap" name="lado" id="izquierda" value="1" type="radio"/>
                                        <span>Izquierda</span>
                                    </label>
                                </p>
                            </td>
                            <td>
                                <p>
                                    <label>
                                        <input class="with-gap" name="lado" id="derecha" value="2" type="radio"/>
                                        <span>Derecha</span>
                                    </label>
                                </p>
                            </td>
                        </tr>
                    </table>
                    <table width=70% align="center">
                        <tr>
                            <td>
                                <input type="button" class="btn btn-primary" id="clearButton" value="Limpiar" onclick="Javascript:onClear()">
                            </td>

                            <td>
                                <input type="button" class="btn btn-primary" id="start" value="Escanear" onclick="Javascript:onStart()">
                            </td>
                            <td data-toggle="tooltip" title="Will work with the .png format.">
                                <input type="button" class="btn btn-primary" id="save" value="Guardar">
                            </td>
{{--                            <td>--}}
{{--                                <input type="button" class="btn btn-primary" id="stop" value="Stop" onclick="Javascript:onStop()">--}}
{{--                            </td>--}}
                    </table>
                </div>

                <div id="imageGallery">
                </div>
                <div id="deviceInfo">
                </div>

                <div id="saveAndFormats" style="display: none">
                    <form name="myForm" style ="border : solid grey;padding:5px;">
                        <b>Acquire Formats :</b><br>
                        <table>
                            <tr data-toggle="tooltip" title="Will save data to a .raw file.">
                                <td>
                                    <label>
                                        <input type="checkbox" name="Raw" value="1" onclick="checkOnly(this)">
                                        <span>RAW</span>
                                    </label>
{{--                                    <input type="checkbox" name="Raw" value="1" onclick="checkOnly(this)"> RAW  <br>--}}
                                </td>
                            </tr>
                            <tr data-toggle="tooltip" title="Will save data to a Intermediate file">
                                <td>
                                    <label>
                                        <input type="checkbox" name="Intermediate" value="2" onclick="checkOnly(this)">
                                        <span>Feature Set</span>
                                    </label>
                                </td>
                            </tr>
                            <tr data-toggle="tooltip" title="Will save data to a .wsq file.">
                                <td>
                                    <label>
                                        <input type="checkbox" name="Compressed" value="3"  onclick="checkOnly(this)">
                                        <span>WSQ</span>
                                    </label>
                                </td>
                            </tr>
                            <tr data-toggle="tooltip" title="Will save data to a .png file.">
                                <td>
                                    <label>
                                        <input type="checkbox" name="PngImage" checked="true" value="4"  onclick="checkOnly(this)">
                                        <span>PNG</span>
                                    </label>
                                </td>
                            </tr>
                        </table>
                    </form>
                    <br>
                    <input type="button" class="btn btn-primary" id="saveImagePng" value="Export" onclick="Javascript:onImageDownload()">
                </div>
            </div>

            <div id="content-reader">
                <div class="row">
                    <div class="col s8">
                        <div class="form-group">
                            <label class="control-label"><strong>Lector: </strong></label>
                            <select class ="form-control browser-default" id="readersDropDown" name="readersDropDown" onchange="selectChangeEvent()">
                            </select>
                        </div>
                    </div>
                    <div class="col s4">
                        <br>
                        <input type="button" class="btn btn-primary" id="refreshList" value="Actualizar" onclick="readersDropDownPopulate(false)">
                    </div>
                </div>
                <br>
                <div id="readerDivButtons">
                    <table width=70% align="center">
                        <tr>
{{--                            <td>--}}
{{--                                <input type="button" class="btn btn-primary" id="refreshList" value="Refresh List" onclick="readersDropDownPopulate(false)">--}}
{{--                            </td>--}}
{{--                            <td>--}}
{{--                                <input type="button" class="btn btn-primary" id="capabilities" value="Capabilities"--}}
{{--                                       data-toggle="modal" data-target="#myModal" onclick="Javascript:populatePopUpModal()">--}}
{{--                            </td>--}}
                        </tr>
                    </table>

                    <!-- Modal - Pop Up window content-->
                    <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog">

                            <!-- Modal content -->
                            <div class="modal-content" id="modalContent" >
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title">Reader Information</h4>
                                </div>
                                <div class="modal-body" id="ReaderInformationFromDropDown">

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
{{--        <div class="modal-footer">--}}
{{--            <button class="waves-effect waves-dark btn btn-primary" type="submit" id="guardar_huella">--}}
{{--                Guardar Huella--}}
{{--            </button>--}}
{{--        </div>--}}
    </div>

    @endsection
    @section('vendor-script')
        <script src="{{ asset('spid/app-assets/vendors/data-tables/js/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('spid/app-assets/vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js') }}"></script>
        <script src="{{ asset('spid/app-assets/vendors/data-tables/js/dataTables.select.min.js') }}"></script>
        <script src="{{ asset('spid/app-assets/js/scripts/data-tables.js') }}"></script>

            <script src="{{'spid/js/scripts/fingerprint.sdk.min.js'}}"></script>
            <script src="{{'spid/js/scripts/app.js'}}"></script>
            <script src="{{'spid/js/scripts/es6-shim.js'}}"></script>
            <script src="{{'spid/js/scripts/websdk.client.bundle.min.js'}}"></script>

    @endsection
    @push('scripts')
            <script src="{{'spid/js/scripts/fingerprint.sdk.min.js'}}"></script>
            <script src="{{'spid/js/scripts/app.js'}}"></script>
            <script src="{{'spid/js/scripts/es6-shim.js'}}"></script>
            <script src="{{'spid/js/scripts/websdk.client.bundle.min.js'}}"></script>


        <script type="text/javascript">
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            function bajaDip(id) {
                swal({
                    title: "¡Atención!",
                    text: "¿Dar baja de diputado?",
                    icon: 'warning',
                    dangerMode: true,
                    confirmButtonText: 'Eliminar',
                    cancelButton: false,
                }).then(function (willDelete) {
                    if (willDelete) {
                        $.ajax({
                            url: "{{ url('bajaDip') }}",
                            type: 'GET',
                            data: {
                                'id': id
                            },
                            success: function (response) {
                                swal({
                                    title: "",
                                    text: "Baja satisfactoria",
                                    icon: 'success',
                                    timer: 4000,
                                    buttons: false
                                });
                                location.reload();
                            },
                            error: function (xhr, status, error) {
                            }
                        });
                    }
                });
            }

            function altaDip(id) {
                swal({
                    title: "¡Atención!",
                    text: "¿Activar diputado?",
                    icon: 'warning',
                    dangerMode: true,
                    confirmButtonText: 'Eliminar',
                    cancelButton: false,
                }).then(function (willDelete) {
                    if (willDelete) {
                        $.ajax({
                            url: "{{ url('bajaDip') }}",
                            type: 'GET',
                            data: {
                                'id': id
                            },
                            success: function (response) {
                                swal({
                                    title: "",
                                    text: "Activación satisfactoria",
                                    icon: 'success',
                                    timer: 4000,
                                    buttons: false
                                });
                                location.reload();
                            },
                            error: function (xhr, status, error) {
                            }
                        });
                    }
                });
            }

            function psw(id) {
                swal({
                    title: "¡Atención!",
                    text: "¿Reestablecer contraseña de diputado?",
                    icon: 'warning',
                    dangerMode: true,
                    confirmButtonText: 'Eliminar',
                    cancelButton: false,
                }).then(function (willDelete) {
                    if (willDelete) {
                        $.ajax({
                            url: "{{ url('cambioPsw') }}",
                            type: 'GET',
                            data: {
                                'id': id
                            },
                            success: function (response) {
                                swal({
                                    title: "",
                                    text: "Se reestablecio contraseña satisfactoria",
                                    icon: 'success',
                                    timer: 4000,
                                    buttons: false
                                });
                                location.reload();
                            },
                            error: function (xhr, status, error) {
                            }
                        });
                    }
                });
            }
            $(document).ready(function(){
                $('.modal').modal();
            });

            function huellaDip(id){
                $('#modal1').modal('open');
                $('#idDip').val(id);
            }
        </script>
    @endpush