@extends('app')

@push('css')
    <style> 
    .container {
        max-width: 1350px !important;
        }
    </style>
@endpush

@section('container')
<h1>Jeanette y Carlos</h1>

@if (session()->has('message'))
    <div class="alert alert-success alert-dismissible fade show" style="display:none;" role="alert">
        {{ session('message') }}
    </div>
@endif

@if(auth()->user()->name == 'Admin')
    <div class="d-flex justify-content-start">
        <a href="/excel-charge" class="btn btn-info ml-auto">Carga Masiva</a>    
    </div>
@endif

<div class="d-flex justify-content-end">
  <a href="/create-guest" class="btn btn-success ml-auto">Agregar Invitado</a>
</div>

<section class="intro" style="margin-top: 30px;">
    <div class="gradient-custom-2 h-100">
        <div class="mask d-flex align-items-center h-100">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12">
                        <div class="table-responsive n6-table">
                            <table class="table table-dark table-bordered mb-0" id="guests-table">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">INVITADO</th>
                                        <th scope="col">N TICKETS</th>
                                        <th scope="col">C TICKETS</th>
                                        <th scope="col">GENRE</th>
                                        <th scope="col">LINK</th>
                                        <th scope="col">N_CONFIRMED</th>
                                        <th scope="col">C_CONFIRMED</th>
                                        <th scope="col">STATUS</th>
                                        <th scope="col">ACTIONS</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($guests as $guest)    
                                        <tr>
                                            <th scope="row">{{ $guest->id }}</th>
                                            <td>{{ $guest->name }}</td>
                                            <td>{{ $guest->normal_tickets }}</td>
                                            <td>{{ $guest->child_tickets }}</td>
                                            <td>{{ $guest->genre }}</td>
                                            <td><a class="n6-a" href="#" link="{{ $guest->invitation_link }}" onclick="copyLink(this)">Copiar Link</a></td>
                                            <td>{{ $guest->normal_confirmed_tickets }}</td>
                                            <td>{{ $guest->child_confirmed_tickets }}</td>
                                            @switch($guest->status)
                                                @case('1')
                                                    <td style="color: #8d8d8d">Sin Responder</td>
                                                @break

                                                @case('2')
                                                    <td style="color: #32ff00d4">Confirmado</td>
                                                @break

                                                @case('3')
                                                    <td style="color: #fff900d4">Parcial</td>
                                                @break

                                                @case('4')
                                                    <td style="color: #bb2ba8">No Confirmo</td>
                                                @break
                                            
                                                @default
                                                    <td style="color: #aa2222">Baja</td>
                                                @break
                                            @endswitch
                                            <td>
                                                <a class="n6-a" href="{{ route('jeanette.carlos.edit.guest',$guest->id) }}"> EDITAR</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
    <script>
        function copyLink(that) {
            var link = $(that).attr('link');        
            $('<textarea>').val(link).appendTo('body').select();
            document.execCommand('copy');
            $('textarea').remove();
            console.log(">> DONE");
        }
    </script>
    <script src="{{ asset('js/functions.js') }}"></script>

    @if (session()->has('message'))
        <script>
            $(document).ready(function() {
                $('.alert').css('display','block');

                setTimeout(() => {
                    $('.alert').css('display','none');
                }, 5000)
            });
        </script>
    @endif
@endpush