@extends('template.layout')

@section('styles')
    <link href="{{asset('css/icheck/skins/all.css')}}" rel="stylesheet" type="text/css"/>
    <style>
        option {
            background-color: white;
        }

        table.dataTable.dtr-inline.collapsed > tbody > tr > td.details-control:first-child:before {
            display: none;
        }

        .filter-none {
            display: none;
        }

        .dataTables_filter, .dataTables_info {
            display: none;
        }
    </style>
@endsection

@section('content')
    <h1 class="page-title">
        Configuración
    </h1>
    <div class="portlet light bordered">
        <div class="portlet-title">
            <h1 class="page-title">
                <a href="{{ url('/') }}"><i class="icon-action-undo"></i></a>
                Número de serie
            </h1>
        </div>
        <div class="portlet-body">
            <div class="row" id="hidden-filter" style="padding-bottom: 2%">
                <table class="table table-hover nowrap dataTable dtr-inline collapsed tbPersonal"
                       id="tb-gestionpagos"
                       width="100%" role="grid" aria-describedby="tbPersonal_info">
                    <thead class="thead-default">
                    <tr>
                        <th><input name="select_all" value="1" type="checkbox"></th>
                        <th>Número de serie</th>
                        <th>Opciones</th>
                    </tr>
                    </thead>
                    <tbody>
                        @foreach($numeroserie as $nserie)
                            <tr>
                                <td>{{ $nserie->numero }}</td>
                                <td>
                                    <button style="max-width: 250px;"
                                    class="btn btn-outline btn-circle btn-sm purple editar" data-toggle="modal" data-id="{{ $nserie->id }}"  >
                                    <i class="fa fa-pencil"></i> Editar  </button>
                                    <button style="max-width: 250px;"
                                    class="btn btn-outline btn-circle btn-sm dark eliminar" data-toggle="modal" data-id="{{ $nserie->id }}" >
                                    <i class="fa fa-trash"></i> Eliminar  </button>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div id="editar" class=""></div>
@endsection
@section('scripts')
    <script>
        $('#tb-gestionpagos').on('click','.editar', function () {
            var aux = $(this);
            var id = aux.data('id');
            aux.prop('disabled', true);
            aux.blur();
            $.ajax({
                url: "{{ route('tramite.numerotramite.editar') }}",
                type: 'POST',
                data: {
                    id: id
                },
                cache: false,
                success: function (result) {
                    $('#editar').html(result).find('.modal').modal({
                        show: true
                    });
                },
                complete: function () {
                    aux.removeAttr("disabled");
                    aux.prop('disabled', false);
                }
            });
            return false;
        });

        $('#tb-gestionpagos').on('click','.eliminar', function () {
            var id = $(this).data('id');
            swal({
                    title: '¿Está seguro de eliminar este registro?',
                    text: "Una vez borrada no se podrá recuperar",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí',
                    cancelButtonText: 'Cancelar'
                },
                function (isConfirm) {
                    if (isConfirm) {
                        EliminarResult(id);
                    }
                })
        });
    </script>
@endsection