@extends('layouts.web')

@push("styles")
<style>

    .modal {
        display: none;
        position: fixed;
        z-index: 10000000!important;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
    }
    .modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 0!important;
        width: 100vw;
        height: 100vh;
        background-color: #000;
    }

    .btn-close {
       box-sizing: content-box;
        width: 0em;
        height: 0em;
        padding: 0.25em 0.25em;
        color: #000;
        background: transparent url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e) center/1em auto no-repeat;
        border: 0;
        border-radius: 0.25rem;
        opacity: .5;
    }
</style>
@endpush('styles')
@section('content')

<!-- start banner-container -->
<div class="page-banner-container position-relative overflow-hidden" style="background-image: url({{asset('assets/wedding/images/main_2.jpg')}});">
    <div class="bg-overlay position-absolute"></div>
    <div class="container pt-180">
        <div class="row banner-content-area justify-content-center align-items-center pt-80 pb-30 mobile-pb-70">
            <div class="col-12 col-md-12 col-lg-10 col-xl-7 banner-content position-relative">
                <div class="banner-cont-info text-center text-white wow fadeInUp" data-wow-duration="1s" data-wow-delay=".8s">
                    <h5 class="text-white pb-25 mt-10" >Nuestro viaje juntos comienza hoy</h5><!-- style="margin-top: 350px;"--->
                    <h1 class="text-white">Itzel & Rodrigo</h1>
                    <h5 class="text-white mb-20">1° Junio 2024</h5>
                    @if (isset($guest) && !empty($guest))                    
                        @if($guest->status == 'Pendiente')
                        <a class="more-btn text-white" href="#confirmar">Confirmar Asistencia</a>
                        @else
                        @if($guest->status != 'Rechazado')
                        <a class="more-btn text-white btn-descargar" onclick="downloadPDF(`{{$guest->id}}`, `{{$guest->alias}}`)" data-id="{{$guest->id}}" href="javascript:void(0)">Reenviar Acceso</a>
                        @endif
                        @endif
                    @else
                    <br><a id="btnSearch" data-bs-toggle="modal" data-bs-target="#miModal" class="more-btn text-white">¿Eres invitado?</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>


{{-- Modal --}}
<div class="modal" id="miModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Encabezado del modal -->
        <div class="modal-header">
          <h6 class="modal-title">Ingrese su teléfono</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        
        <!-- Cuerpo del modal -->
        <div class="modal-body">
            <small>Ingresa tu número a 10 dígitos sin espacios, ni caracteres especiales.</small>
            <form class="contact-form">
                <div class="">
                    <div class="form-group">
                        <input class="form-control" type="text" id="phone" name="phone" placeholder="Teléfono" required autofocus/>
                    </div>
                </div>
            </form>
        </div>
        
        <!-- Pie del modal -->
        <div class="modal-footer">
          <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Cerrar</button>
          <button type="button" class="btn btn-lg btn-primary btn-search">Buscar</button>
        </div>
        
      </div>
    </div>
  </div>

{{-- Sections --}}
@if (isset($guest) && !empty($guest))

@switch($guest->guestType->name)
    @case('Amigos')
    @component('components.wedding-view', ['guest' => $guest, 'serial' => $serial])@endcomponent
    @case('Familia')
    @component('components.family-view', ['guest' => $guest, 'serial' => $serial])@endcomponent    
    @break
    @case('Otros')
    @component('components.other-view', ['guest' => $guest, 'serial' => $serial])@endcomponent    
    @break
    @default
    @component('components.wedding-view', ['guest' => $guest, 'serial' => $serial])@endcomponent    
    @break
@endswitch
@endif
<!-- //end .banner-container -->
@endsection

@push('scripts')
    <script>
        $('.btn-search').on('click', async function (e) {
            const phone = $('#phone').val()

            if (!phone) {
                alert('Ingrese el número de teléfono')
                return false
            }
            

            try {

                const { data } = await axios.get(`/invitado/search/${phone}`)
                
                if (data.success) {
                    $('#phone').val('')
                    $('#miModal').modal('hide')
                    alert(data.message)

                } else {
                    alert(data.message)
                }
            }catch(e) {
                alert('Error generado, intente de nuevo.')
            }

        })
    </script>
@endpush