@extends('layout.master',['activePage' => 'mantenimiento_tablas', 'menuParent' => 'Configuración', 'titlePage' => __('Mantenimiento a Tablas'),])

@push('plugin-styles')
    {!! Html::style('assets/css/loader.css') !!}
    {!! Html::style('plugins/apex/apexcharts.css') !!}
    {!! Html::style('assets/css/dashboard/dashboard_1.css') !!}
    {!! Html::style('plugins/flatpickr/flatpickr.css') !!}
    {!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
    {!! Html::style('assets/css/elements/tooltip.css') !!}
    {!! Html::style('plugins/table/datatable/datatables.css') !!}
    <style>
        .btn-icon-top:hover {
            background-color: #E8C552 !important;
            color: black !important;
            border-color: #E8C552 !important;
            transform: translateY(-3px);
        }

        .btn-icon-top {
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.3s ease !important;
        }

        .btn-icon-top .icon {
            margin-bottom: 5px;
            font-size: 4em !important;
        }
    </style>
@endpush

@section('content')

    <!--  Navbar Starts / Breadcrumb Area Starts -->
    <div class="sub-header-container">
        <header class="header navbar navbar-expand-sm">
            <ul class="navbar-nav flex-row">
                <li>
                    <div class="page-header">
                        <nav class="breadcrumb-one" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{ __('CR') }}</a></li>
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{ __('Reportes') }}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span> {{ __('Mantenimiento a Tablas') }}</span>
                                </li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>
    <!--  Navbar Ends / Breadcrumb Area Ends -->

    <div class="col-md-8 m-auto">

        <div class="statbox widget box box-shadow mb-2 mt-5">
            <div class="widget-content widget-content-area">

                <div class="container">
                    @foreach($tablas as $index => $elemento)
                        @if($index % 3 == 0)
                            <div class="row justify-content-center">
                        @endif
                        <div class="col-sm-4 mb-3">
                            <a class="btn btn-secondary btn-lg btn-block btn-icon-top" href="{{ $ruta_maestra . $elemento['categoria'] }}">
                                <span class="icon"><i class="las la-{{ $elemento['icono'] }}"></i></span>
                                <span class="text"> {{ strtoupper($elemento['categoria']) }} </span>
                            </a>
                        </div>
                        @if($index % 3 == 2 || $index == count($tablas) - 1)
                            </div>
                        @endif
                    @endforeach
                </div>

            </div>
        </div>
    </div>

@endsection

@push('plugin-scripts')
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
    {!! Html::script('assets/js/apps/companies.js') !!}
    {!! Html::script('assets/js/basicui/sweet_alerts.js') !!}
    {!! Html::script('assets/js/custom.js') !!}
    {!! Html::script('plugins/notification/snackbar/snackbar.min.js') !!}
    {!! Html::script('plugins/flatpickr/flatpickr.js') !!}
    {!! Html::script('plugins/flatpickr/custom-flatpickr.js') !!}
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/table/datatable/datatables.js') !!}
    <!--  The following JS library files are loaded to use Copy CSV Excel Print Options-->
    {!! Html::script('plugins/table/datatable/button-ext/dataTables.buttons.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/jszip.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/buttons.html5.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/buttons.print.min.js') !!}
    <!-- The following JS library files are loaded to use PDF Options-->
    {!! Html::script('plugins/table/datatable/button-ext/pdfmake.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/vfs_fonts.js') !!}
@endpush

@push('custom-scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
    <script>
        $(document).ready(() => {
            console.log('object');
        });
    </script>
@endpush