@extends('layouts.dashboard')
@section('css')
@endsection

@section('content')
    <div class="app-page-title d-xs-none">
        <div class="page-title-wrapper">
            <div class="col-sm-4">
                <div class="page-title-heading">
                    <div>Sellos digitales
                        <div class="page-title-subheading">
                            Listado de sellos de digitales
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-8">
                <div class="page-header float-right">
                    <nav class="" aria-label=" breadcrumb">
                        <ol class="breadcrumb text-right">
                            <li class="breadcrumb-item"><a href="{{ route('sellos.index') }}">Sellos digitales</a></li>
                            <li class="active breadcrumb-item" aria-current="page">Listado</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    @if (session('message'))
        <div class="alert alert-success alert-dismissable col-lg-4 col-md-12"
            style="text-align: center;margin: auto;margin-bottom: 1rem;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>{{ session('message') }}</strong>
        </div>
    @endif
    @can('conceptos.create')
        <div style="text-align: end;">
            <button type="button" onclick="window.location='{{ route('sellos.create') }}'" class="btn btn-primary">
                <i class="fa fa-plus"></i> Nuevo sello
            </button>
        </div>
    @endcan

    <br>

    <div class="main-card mb-3 card">
        <div class="card-body">
            <div id="example_wrapper" class="dataTables_wrapper dt-bootstrap4">
                <div class="row">
                    <div class="col-sm-12">
                        <table style="width: 100%;" id="tbl_sellos"
                            class="table table-hover table-striped table-bordered dataTable dtr-inline" role="grid"
                            aria-describedby="example_info">
                            <thead style="font-size: 14px;">
                                <tr role="row">
                                    <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1"
                                        colspan="1" style="width: 261.2px;" aria-sort="ascending"
                                        aria-label="Name: activate to sort column descending">Número de serie</th>


                                    <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                        style="width: 102.2px;" aria-label="Age: activate to sort column ascending">
                                        Fecha Alta</th>

                                    <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                        style="width: 102.2px;" aria-label="Age: activate to sort column ascending">
                                        Estado del sello digital </th>

                                    <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                        style="width: 102.2px;" aria-label="Age: activate to sort column ascending">
                                        Vigencia de </th>

                                    <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                        style="width: 102.2px;" aria-label="Age: activate to sort column ascending">
                                        Vigencia a </th>

                                    <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                        style="width: 102.2px;" aria-label="Age: activate to sort column ascending">
                                        Ultima Modificación</th>

                                    <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                        style="width: 194.2px;" aria-label="Start date: activate to sort column ascending">
                                        Acciones</th>
                                </tr>
                            </thead>
                            <tbody style="font-size: 14px;">

                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ asset('js/sellos/main.js') }}"></script>
    <script>
        var __sellos__ = '';
       const _meses_= {
           '01':'enero',
            '02':'febrero',
            '03':'marzo',
            '04':'abril',
            '05':'mayo',
            '06':'junio',
            '07':'julio',
            '08':'agosto',
            '09':'septiembre',
            '10':'octubre',
            '11':'noviembre',
            '12':'diciembre'
        };

        $(document).ready(function() {
            __sellos__ = $('#tbl_sellos').DataTable({
                "processing": true,
                "serverSide": true,
                "responsive": true,
                "ajax": base_url + "/sellos",
                "dataType": "JSON",
                "type": "POST",
                buttons: [
                    { extend: 'copy', className: 'btn buttom_datatables' },
                    { extend: 'excel', className: 'btn buttom_datatables' },
                    { extend: 'colvis', className: 'btn buttom_datatables' },
                ],
                "columns": [{
                        "data": "serie"
                    },
                    {
                        "data": "fecha_alta",
                        render: function name(_fecha_) {
                            _fecha_=_fecha_.split(' ')
                            _fecha_mes_=(_fecha_[0]).split('-')
                            _fecha_mes_=_fecha_mes_[0]+' de '+_meses_[_fecha_mes_[1]]+' de '+_fecha_mes_[2]
                            return '<p><i class="lnr-calendar-full"> </i>'+_fecha_mes_+'</p>'+
                                    '<p> <i class="lnr-clock"> </i>'+_fecha_[1]+' '+_fecha_[2]+'</p>';
                        }
                    },
                    {
                        "data": 'status_csd',
                        render: function(data){
                            if(data=='A'){
                                return '<span style="color: green">Activo</span>';
                            }if(data=='C'){
                                return '<span style="color: red">Caducado</span>';
                            }
                        }
                    },
                    {
                        "data": 'vigencia_inicio',
                        render: function name(_fecha_) {
                            _fecha_=_fecha_.split(' ')
                            _fecha_mes_=(_fecha_[0]).split('-')
                            _fecha_mes_=_fecha_mes_[0]+' de '+_meses_[_fecha_mes_[1]]+' de '+_fecha_mes_[2]
                            return '<p><i class="lnr-calendar-full"> </i>'+_fecha_mes_+'</p>'+
                                    '<p> <i class="lnr-clock"> </i>'+_fecha_[1]+' '+_fecha_[2]+'</p>';
                        }
                    },
                    {
                        "data": "vigencia_fin",
                        render: function name(_fecha_) {
                            _fecha_=_fecha_.split(' ')
                            _fecha_mes_=(_fecha_[0]).split('-')
                            _fecha_mes_=_fecha_mes_[0]+' de '+_meses_[_fecha_mes_[1]]+' de '+_fecha_mes_[2]
                            return '<p><i class="lnr-calendar-full"> </i>'+_fecha_mes_+'</p>'+
                                    '<p> <i class="lnr-clock"> </i>'+_fecha_[1]+' '+_fecha_[2]+'</p>';
                        }
                    },
                    {    
                        "data": "fecha_update",
                        render: function name(_fecha_) {
                            _fecha_=_fecha_.split(' ')
                            _fecha_mes_=(_fecha_[0]).split('-')
                            _fecha_mes_=_fecha_mes_[0]+' de '+_meses_[_fecha_mes_[1]]+' de '+_fecha_mes_[2]
                            return '<p><i class="lnr-calendar-full"> </i>'+_fecha_mes_+'</p>'+
                                    '<p> <i class="lnr-clock"> </i>'+_fecha_[1]+' '+_fecha_[2]+'</p>';
                        }
                    },
                    {
                        data: 'action',
                        name: 'Acciones',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
@endsection