@extends('layouts.base')
@push('css')
    <!-- Switchery -->
    <link href="{{URL::to('vendors/switchery/dist/switchery.min.css')}}" rel="stylesheet">
    <!-- Datatables -->
    <link href="{{URL::to('vendors/datatables.net-bs/css/dataTables.bootstrap.min.css')}}" rel="stylesheet">
    <link href="{{URL::to('vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css')}}" rel="stylesheet">
    <link href="{{URL::to('vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css')}}"
          rel="stylesheet">
    <link href="{{URL::to('vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css')}}" rel="stylesheet">
    <link href="{{URL::to('vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css')}}" rel="stylesheet">
@endpush
@section('content')
    <!--<div class="x_panel">
        <div class="x_content">
            <br/>
            <form action="{{route('users.store')}}" method="post" id="form-create" data-parsley-validate class="form-horizontal form-label-left input_mask">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback @if($errors->get('first_name')) has-error @endif">
                        <input type="text" class="form-control has-feedback-left" id="first_name"
                               placeholder="Nombre" name="first_name" required value="{{old('first_name')}}">
                        <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback @if($errors->get('last_name')) has-error @endif">
                        <input type="text" class="form-control" id="last_name" value="{{old('last_name')}}" placeholder="Apellido" name="last_name">
                        <span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback @if($errors->get('email')) has-error @endif">
                        <input type="email" class="form-control has-feedback-left" id="email" value="{{old('email')}}" placeholder="Email" name="email" required>
                        <span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback @if($errors->get('password')) has-error @endif">
                        <input type="password" class="form-control" id="password" placeholder="Contraseña" name="password" required>
                        <span class="fa fa-key form-control-feedback right" aria-hidden="true"></span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input type="password" class="form-control has-feedback-left" id="password_confirmation" placeholder="Confirmación" name="password_confirmation" data-parsley-equalto="#password" required>
                        <span class="fa fa-key form-control-feedback left" aria-hidden="true"></span>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12 form-group">
                        <label>
                            <input type="checkbox" class="js-switch" name="admin" /> Admin
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12 form-group @if($errors->get('role_id')) has-error @endif">
                        <label for="role_id">Rol</label>
                        <select name="role_id" id="role_id" class="form-control">
                            <option value="">Seleccione Rol</option>
                            @foreach($roles as $role)
        <option value="{{$role->id}}">{{$role->name}} - {{$role->description}}</option>
                            @endforeach
            </select>
        </div>
    </div>
    <div class="ln_solid"></div>
    <div class="form-group">
        <div class="col-md-5 col-sm-9 col-xs-12 col-md-offset-5">
            <button id="create" type="submit" class="btn btn-success">Submit</button>
        </div>
    </div>
    <input type="hidden" name="_token" value="{{csrf_token()}}">

            </form>
        </div>
    </div>-->
    <div class="row">
        <div class="x_panel">
            <div class="x_content">
                <table id="users" class="table table-stripped table-hovered">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nombre</th>
                        <th>Apellido</th>
                        <th>Email</th>
                        <th>Ebits</th>
                        <th></th>
                        <!-- <th></th> -->
                    </tr>
                    </thead>
                    <tbody>

                    @foreach($users as $user)
                        <tr>
                            <td>{{$user->id}}</td>
                            <td>{{$user->first_name}}</td>
                            <td>{{$user->last_name}}</td>
                            <td>{{$user->email}}</td>
                            <td>{{$user->ebits}}</td>
                            <td>
                                <a class="edit btn btn-success float-left" href="{{route('users.show', ['id'=>$user->id])}}">
                                    Ver
                                </a>
                                <a class="edit btn btn-info float-left" href="{{route('users.edit', ['id'=>$user->id])}}">
                                    Editar
                                </a>
                            </td>
                            <!-- <td>
                                <form action="{{route('users.destroy', ['id'=>$user->id])}}" method="POST" class="float-left">
                                    <input type="hidden" name="_method" value="DELETE">
                                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                                    <div>

                                        <a data-accounts="{{$user->accounts}}" class="accounts btn btn-primary"
                                           href="#">Cuentas</a>
                                        <a class="delete btn btn-danger" href="#">Eliminar</a>
                                    </div>
                                </form>
                            </td> -->
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="accounts" tabindex="-1" role="dialog" aria-labelledby="details">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Cuentas del Usuario</h4>
                </div>
                <div class="modal-body">
                    <table id="banks" class="table table-stripped table-bordered table-responsive">
                        <thead>
                        <tr>
                            <th>Banco</th>
                            <th>Tipo</th>
                            <th>Número</th>
                            <th>Email</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <!-- Parsley -->
    <script src="{{URL::to('vendors/parsleyjs/dist/parsley.min.js')}}"></script>
    <!-- Switchery -->
    <script src="{{URL::to('vendors/switchery/dist/switchery.min.js')}}"></script>
    <!-- Datatables -->
    <script src="{{URL::to('vendors/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{URL::to('vendors/datatables.net-bs/js/dataTables.bootstrap.min.js')}}"></script>
    <script src="{{URL::to('vendors/datatables.net-buttons/js/dataTables.buttons.min.js')}}"></script>
    <script src="{{URL::to('vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js')}}"></script>
    <script src="{{URL::to('vendors/datatables.net-buttons/js/buttons.flash.min.js')}}"></script>
    <script src="{{URL::to('vendors/datatables.net-buttons/js/buttons.html5.min.js')}}"></script>
    <script src="{{URL::to('vendors/datatables.net-buttons/js/buttons.print.min.js')}}"></script>
    <script src="{{URL::to('vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js')}}"></script>
    <script src="{{URL::to('vendors/datatables.net-keytable/js/dataTables.keyTable.min.js')}}"></script>
    <script src="{{URL::to('vendors/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
    <script src="{{URL::to('vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js')}}"></script>
    <script src="{{URL::to('vendors/datatables.net-scroller/js/dataTables.scroller.min.js')}}"></script>
    <script>
        $(document).ready(function () {
            $("#users").dataTable({
                "order": [[0, "desc"]]
            });
        });
        $('#form-create').parsley().on('field:validated', function () {
            var ok = $('.parsley-error').length === 0;
            $('.bs-callout-info').toggleClass('hidden', !ok);
            $('.bs-callout-warning').toggleClass('hidden', ok);
        });
        $(document).on("click", "#create", function (e) {
            if (!confirm('¿Está seguro de crear el registro?')) {
                e.preventDefault();
                return;
            }
            $(this).closest('form').submit();
        });
        $(document).on("click", ".delete", function (e) {
            if (!confirm('¿Está seguro de eliminar éste registro?')) {
                e.preventDefault();
                return;
            }
            $(this).closest('form').submit();
        });
        $(document).on('click', '.accounts', function (e) {
            $("#banks tbody").html("");
            var accounts = $(this).data('accounts');
            e.preventDefault();
            if (accounts && accounts.length) {
                var strAccounts = "";
                accounts.forEach(function (v, k) {
                    var tipo = (v.account_type === "c") ? "Corriente" : "Ahorro";
                    strAccounts += "<tr>";
                    strAccounts += "<td>" + v.bank.name + "</td>";
                    strAccounts += "<td>" + tipo + "</td>";
                    strAccounts += "<td>" + v.account_number + "</td>";
                    strAccounts += "<td>" + v.email + "</td>";
                    strAccounts += "</tr>";
                });
                $("#banks tbody").html(strAccounts);
                $("#accounts").modal();
            } else {
                alert('No tiene cuentas asociadas!');
            }
        });
    </script>
@endpush