@extends('layouts.cola')

@push('plugin-styles')
    <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet"/>
    <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet"/>
@endpush

@section('content')
    <div class="row" style="width: 100%">
        <div class="col-md-12">
            {{--            <div class="card" >--}}
            {{--                <div class="card-body">--}}
            {{--                    <div class="table-responsive-xxl">--}}
            <table class="table" style="width: 100%">
                <tr>
                    <th style="width: 10%;">Nombre</th>
                    <th style="width: 40%;">Fotografía</th>
                    <th style="width: 30%;">Asignación</th>
                </tr>
                <tbody id="content-table"></tbody>
            </table>
            {{--                    </div>--}}
            {{--                </div>--}}
            {{--            </div>--}}
        </div>
    </div>
@endsection

@push('plugin-scripts')
    <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/inputmask/jquery.inputmask.bundle.min.js') }}"></script>
@endpush

@push('custom-scripts')
    <script src="{{ asset('assets/js/data-table.js') }}"></script>

    <script type="text/javascript">
        setInterval(function () {
            $.ajax({
                type: "POST",
                url: "{{route("colam.get")}}",
                data: {
                    {{--"id": "{{$id}}",--}}
                    "_token": "{{ csrf_token() }}",
                },
                success: function (data) {
                    $("#content-table").find("tr").remove()
                    let html = "";
                    i = 1;
                    $.each(data, function (key, value) {
                        console.log(value)
                        // let caracter = value.asignacion.asiento.charAt(0)
                        // if(caracter == 'C' || caracter == 'D' || caracter == 'E'){
                        //     caracter = 'ACCESO'
                        // }else{
                        //     caracter = value.asignacion.asiento
                        // }
                        html += '<tr class="trFirst'+i+'" style="height:80px; width:400px;" >'
                        html += '<td style="font-size:25px; width: 20% !important;">'
                            + value.invitado.nombre
                            + '<br>'+value.invitado.cargo+'</td>';

                        if (value.invitado.path_foto === null) {
                            html += '<td style="font-size:40px; text-align:left !important;">'
                                + '<img src="{{ asset('storage/assets/img/sintitulo.png') }}" class="img-fluid" alt="..." style="height:150px; width:auto; border-radius:12px;">'
                                + '</td>';
                        } else {
                            html += '<td style="font-size:40px; text-align:left;">'
                                + '<img src="{{ asset('') }}' + value.invitado.path_foto + '" class="img-fluid" alt="..." style="height:150px; width:auto; border-radius:12px;">'
                                + '</td>';
                        }

                        html += '<td style="font-size:30px">'
                            + (value.invitado.asignacion ? value.invitado.asignacion.posicion : 'No asignado')
                            + '</td>';
                        html += '</tr>';
                        i++
                    });
                    $("#content-table").append(html);

                    $(".trFirst1").attr('bgcolor','#adadad');
                }
            })
        }, 1000);
    </script>

@endpush