{{-- extend layout --}}
@extends('layouts.contentLayoutMaster')

{{-- page title --}}
@section('title','Usuarios')
{{-- vendor styles --}}
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css"
  href="{{asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/dataTables.checkboxes.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/sweetalert/sweetalert.css')}}">
@endsection

{{-- page styles --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/app-invoice.css')}}">
@endsection
{{-- page content --}}
@section('content')
                <!-- Modal Trigger -->
                <div id="add_bussines" class="modal" style="height: auto !important; max-height: none; ">
                    @include('pages.users._form')
                </div>
                <div id="edit_bussines" class="modal"></div>
                <div id="load_progress" class="progress" style="display: none">
                    <div class="indeterminate"></div>
                </div>
<div class="breadcrumbs-dark pb-0 pt-0" id="breadcrumbs-wrapper">
  <!-- Search for small screen-->
  <div class="container">
    <div class="row">
      <div class="col s10 m6 l6">
        <h5 class="breadcrumbs-title mt-0 mb-0"><span>Usuarios </span></h5>

              </div>
    </div>
  </div>
</div>
<section class="invoice-list-wrapper section col s12">

  <div class="invoice-create-btn">
    <a href="#add_bussines" class="btn waves-effect waves-light invoice-create border-round z-depth-4 modal-trigger">
      <i class="material-icons">add</i>
      <span class="hide-on-small-only">Usuarios</span>
    </a>
  </div>
  <div class="filter-btn">
    <a class='dropdown-trigger btn waves-effect waves-light purple darken-1 border-round' href='#'
      data-target='btn-filter'>
      <span class="hide-on-small-only">Filtrar</span>
      <i class="material-icons">keyboard_arrow_down</i>
    </a>

        <ul id='btn-filter' class='dropdown-content'>
            <form action="{{ route('users.index') }}" method="GET" id="myForm">
                <li><a href="#" onclick="submitFilter(1)">Activos</a></li>
                <li><a href="#" onclick="submitFilter(0)">Inactivos</a></li>
            </form>
        </ul>

  </div>
  <div class="responsive-table">
    <table class="table invoice-data-table white border-radius-4 pt-1">
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th>TIPO IDENTIFICACI&Oacute;N</th>
          <th>IDENTIFICACI&Oacute;N</th>
          <th>NOMBRE/APELLIDO</th>
          <th>USERNAME</th>
          <th>GENERO</th>
          <th>CELULAR</th>
          <th>ACCIONES</th>
        </tr>
      </thead>

      <tbody>

          @forelse ($users['content'] as $usuario)
          <div id="edit_users_{{ $usuario->uuidKey }}" class="modal">
            @include('pages.users._form')
        </div>
            <tr>
                <td></td>
                <td></td>
                <td>{{ $usuario->identificationType }}</td>
                <td>{{ $usuario->identification }}</td>
                <td>{{ $usuario->fullName }}</td>
                <td>{{ $usuario->username }}</td>
                <td>{{ ($usuario->gender == 1) ? 'Masculino' : 'Femenino'  }}</td>
                <td>{{ ($usuario->cellPhone == null) ? 'Sin Celular' : $usuario->cellPhone  }}</td>

                <td>
                    <div class="invoice-action">
                    <a href="#edit_user_{{ $usuario->uuidKey }}"
                        class="invoice-action-edit modal-trigger" data-id="{{ $usuario->uuidKey }}">
                        <i class="material-icons">edit</i>
                    </a>
                    <a href="#" class="invoice-action-view mr-4 detele" data-id="{{ $usuario->uuidKey }}">
                        <i class="material-icons">clear</i>
                    </a>
                    {{-- <a href="{{ route('users.edit', ['user' => $usuario->uuidKey]) }}" class="invoice-action-edit"  data-id="{{ $usuario->uuidKey }}">
                        <i class="material-icons">edit</i>
                    </a> --}}
                    
                    </div>
                </td>
            </tr>
          @empty

          @endforelse

      </tbody>
    </table>
  </div>
</section>
@endsection

{{-- vendor scripts --}}
@section('vendor-script')
<script src="{{asset('vendors/data-tables/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/js/datatables.checkboxes.min.js')}}"></script>
<script src="{{asset('vendors/jquery-validation/jquery.validate.js')}}"></script>
<script src="{{asset('vendors/sweetalert/sweetalert.min.js')}}"></script>
<script src="{{asset('js/custom/custom-script.js')}}"></script>
@endsection

{{-- page scripts --}}
@section('page-script')
<script src="{{asset('js/scripts/form-validation.js')}}"></script>
<script src="{{asset('js/scripts/app-users.js')}}"></script>
<script>
    $(function() {
    $('.modal').modal();
    $('#modal3').modal('open');
    $('#modal3').modal('close');

  });
 const buttons = document.querySelectorAll(".invoice-action-edit");
  const addButton = document.getElementById("addButton");
    const progress = document.getElementById('load_progress');

    addButton.addEventListener('click', function(event) {
        addButton.classList.add("disabled")


        progress.style.display = 'block';
        setTimeout(() => {
                progress.style.display = 'none';
                addButton.classList.remove("disabled");
        }, 1000);
    })
for (const button of buttons) {
    button.addEventListener('click', function (event) {
        const progress = document.getElementById('load_progress');
        progress.style.display = 'block';

        let bussine_id = this.getAttribute('data-id');
        const routeedit = `{{ route('bussines.edit', ['bussine' => ':id']) }}`;
        url = routeedit.replace(':id', bussine_id);
        fetch(url)
            .then(response => {
                return response.text();
            })
            .then(response => {
                const edit_bussines = document.getElementById('edit_bussines');
                edit_bussines.innerHTML = response
                $('#edit_bussines').modal('open');
                $(document).ready(function() {
                    M.updateTextFields();
                });
                progress.style.display = 'none';
            })
            .catch(error => console.log(error));
    })
}
const buttons_delete = document.querySelectorAll(".invoice-action-view");
for (const button_delete of buttons_delete) {
    button_delete.addEventListener('click', function (event) {
        const progress = document.getElementById('load_progress');
        progress.style.display = 'block';

        let bussine_id = this.getAttribute('data-id');
         swal({
            title: "Eliminar?",
            text: "Desea usted eliminar esta empresa!",
            icon: 'warning',
            dangerMode: true,
            buttons: {
            cancel: 'No!',
            delete: 'Si, eliminar!'
            }
        }).then(function (willDelete) {
            if (willDelete) {
                const routeedit = `{{ route('bussines.destroy', ['bussine' => ':id']) }}`;
                    url = routeedit.replace(':id', bussine_id);
                    const fetchOptions = {
                        method: "delete",
                         body: JSON.stringify({
                                    id: bussine_id,
                                    _method: 'DELETE',
                                }),
                    };
                    fetch(url, fetchOptions)
                        .then(response => {
                            return response.text();
                        })
                        .then(response => {
                            progress.style.display = 'none';
                            setTimeout(() => {
                                window.location.reload()
                            }, 1000);
                        })
                        .catch(error => console.log(error));
            } else {
                 progress.style.display = 'none';
            swal("A cancelado el proceso", {
                title: 'Proceso cancelado',
                icon: "error",
            });
            }
        });
    })
}
document.onload = (() => {
    let keyListener = document.querySelector('.search');
    keyListener.addEventListener('keypress', (e) => {
        if(e.keyCode === 13){
            let text = e.target.value;
            console.log(text);
        }else{
            console.log(`e.keyCode = ${e.keyCode}`);
        }
    });
})();
function submitFilter(frm){

    var url = `{{ route('users.index') }}`;
        if(url.indexOf('?') != -1)
            var addon = '&stateName='+frm;
        else
            var addon = '?stateParam='+frm;


    window.location.app(url+addon);
}
</script>
@endsection