@extends('construction.admin.master.master')

@section('css')
    <link rel="stylesheet" href="{{url(asset('admin/assets/vendor/datatables/media/css/dataTables.bootstrap5.css'))}}" />

    <style>
        .containerCard {
            position: relative;
            width: 100%;
            height: 800px;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
        }

        .responsive-iframe {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
@endsection


@section('content')
    <div class="row">
        <div class="col">
            <section class="card">
                <header class="card-header">
                    <div class="card-actions">
                        <a href="#" class="card-action card-action-toggle" data-card-toggle></a>
                        <a href="#" class="card-action card-action-dismiss" data-card-dismiss></a>
                    </div>
                    <h4 class="card-title">{{$pageName}}</h4>
                </header>
                <div class="card-body">
                    <div class="containerCard">
                        <iframe class="responsive-iframe" src="https://adiau.com.br/embed/?hash={{$apiVelorio->token}}"></iframe>
                        <!--<iframe class="responsive-iframe" src="https://www.adiau.net/validacao/index.php?ipc=3001709500&id={{$apiVelorio->client}}&token={{$apiVelorio->token}}&color1={{str_replace('#','',$siteConfig->Detail)}}&color2={{str_replace('#','',$siteConfig->Gradient1)}}&color3=******&color4=******&color5=******#"></iframe>-->
                    </div>
                </div>
            </section>
        </div>
    </div>
    <div class="row justify-content-center">
        <div id="velorioOnline" class="container py-5 my-5-5">
            <div class="row">
                <div class="col">
                    <h2 class="text-color-dark font-weight-bold text-7 line-height-1 mb-3-5">Salas disponíveis</h2>
                </div>
            </div>
            <div class="row justify-content-center">
                @foreach($salas as $sala)
                    <div class="col-md-4 col-lg-4 mb-5 mb-lg-0 appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" style="animation-delay: 200ms;">
                        <div class="card">
                            <img class="card-img-top" src="{{$sala->capa}}" alt="Card Image">
                            <div class="card-body">
                                <h4 class="card-title mb-1 text-4 font-weight-bold">{{$sala->nome}}</h4>
                                {{--
                                <p class="card-text mb-2 pb-1">Lorem ipsum dolor sit amet, consectetur adipiscing onsectetur adipiscing elit elit onsectetur adipiscing lit onsectetur adipiscing elit.</p>--}}
                                <a href="/" class="read-more text-color-primary font-weight-semibold text-2">Acessar <i class="fas fa-angle-right position-relative top-1 ms-1"></i></a>
                            </div>
                        </div>
                    </div>
                @endforeach

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


@section('js')
    <script src="{{url(asset('admin/assets/vendor/datatables/media/js/jquery.dataTables.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/media/js/dataTables.bootstrap5.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/dataTables.buttons.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.bootstrap4.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.html5.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.print.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/JSZip-2.5.0/jszip.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/pdfmake-0.1.32/pdfmake.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/pdfmake-0.1.32/vfs_fonts.js'))}}"></script>
    <!-- Examples -->
    <script src="{{url(asset('admin/assets/js/examples/examples.datatables.default.js'))}}"></script>
    <script src="{{url(asset('admin/assets/js/examples/examples.datatables.row.with.details.js'))}}"></script>
    {{--    <script src="{{url(asset('admin/assets/js/examples/examples.datatables.tabletools.js'))}}"></script>--}}

    <script>

        (function($) {

            'use strict';

            var datatableInit = function() {
                var $table = $('#datatable-tabletools');

                var table = $table.dataTable({
                    sDom: '<"text-right mb-md"T><"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
                    buttons: [
                        // {
                        // 	extend: 'print',
                        // 	text: 'Print'
                        // },
                        {
                            extend: 'excel',
                            text: 'Excel'
                        },
                        {
                            extend: 'pdf',
                            text: 'PDF',
                            customize : function(doc){
                                var colCount = new Array();
                                $('#datatable-tabletools').find('tbody tr:first-child td').each(function(){
                                    if($(this).attr('colspan')){
                                        for(var i=1;i<=$(this).attr('colspan');$i++){
                                            colCount.push('*');
                                        }
                                    }else{ colCount.push('*'); }
                                });
                                doc.content[1].table.widths = colCount;
                            }
                        }
                    ],

                    responsive: true,
                    "order": [[ 0, "asc" ]],
                    "pageLength": 10,
                    "language": {
                        "sEmptyTable": "Nenhum registro encontrado",
                        "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                        "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                        "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                        "sInfoPostFix": "",
                        "sInfoThousands": ".",
                        "sLengthMenu": " Exibir _MENU_ entradas",
                        "sLoadingRecords": "Carregando...",
                        "sProcessing": "Processando...",
                        "sZeroRecords": "Nenhum registro encontrado",
                        "sSearch": "Pesquisar",
                        "oPaginate": {
                            "sNext": "Próximo",
                            "sPrevious": "Anterior",
                            "sFirst": "Primeiro",
                            "sLast": "Último"
                        },
                        "oAria": {
                            "sSortAscending": ": Ordenar colunas de forma ascendente",
                            "sSortDescending": ": Ordenar colunas de forma descendente"
                        }
                    }
                });

                $('<div />').addClass('dt-buttons mb-2 pb-1 text-end').prependTo('#datatable-tabletools_wrapper');

                $table.DataTable().buttons().container().prependTo( '#datatable-tabletools_wrapper .dt-buttons' );

                $('#datatable-tabletools_wrapper').find('.btn-secondary').removeClass('btn-secondary').addClass('btn-default');
            };

            $(function() {
                datatableInit();
            });

        }).apply(this, [jQuery]);
    </script>
@endsection
@section('modais')

@endsection