@php
    $backgroundImage = $invitations->count() == 0 ? asset('img/fondo-black.svg') : asset('img/fongo.svg');
@endphp
<div class="col-sm-10 py-5 px-sm-5 image-bg" id="business-invitations" style="background-image: url({{$backgroundImage}});" x-data="section">
    <div class="container">
        <div class="content">
            @if(session('successMessage'))
            <div class="alert alert-info"><i class="bi bi-check-circle"></i>
                {{ session('successMessage') }}
            </div>
            @endif
            <h3 class="fw-800 my-4 px-sm-0 px-0 pt-sm-0 pt-5">Mis invitaciones<span style="color: #F1B20A;">.</span></h3>
            <div class="px-4 py-4 bg-white search shadow rounded-3 mb-5">
                <div class="fw-600 fs-sm-18 mb-2 d-none">Todas las invitaciones</div>
                <form action="#" class="d-flex gap-3 formulario-custom">
                    <div class="position-relative ">
                        <input wire:model="title" type="text" placeholder="Buscar" class="form-control rounded-5 bg-gray-light border-0 py-3 pe-5 ps-4 fs-sm-12">
                        <button class="position-absolute end-0 top-0 border-0 bg-transparent mt-2 me-3" wire:click="search"><img src="{{asset('img/search.svg')}}" alt=""></button>
                    </div>
                    <div>
                        <select wire:model="invitationTypeId" id="" class="form-control form-select rounded-5 bg-gray-light border-0 py-3 pe-5 ps-4 fs-sm-12" wire:change="search">
                            <option value="">Tipo de Evento</option>
                            @foreach ($types as $type)
                                <option value="{{$type['code']}}">{{ $type['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    @if(!empty($title) || !empty($invitationTypeId))
                    <div>
                        <a wire:model="invitationTypeId" class="btn bg-danger text-white rounded-5 py-2 mt-2 px-4 border-0 fs-sm-14 fw-bold" wire:click="removeFilter">
                            Borrar Filtro
                        </a>
                    </div>
                    @endif
                    @if(auth()->user()->role_id == \App\Models\User::BUSINESS_ROL_ID)
                    <div>
                        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                            <button x-on:click="view = 'gallery'"
                                :disabled="view == 'gallery'"
                                class="btn"
                                >
                                <i class="bi bi-grid-3x3-gap-fill"></i>
                            </button>
                            <button x-on:click="view = 'list'"
                                :disabled="view == 'list'"
                                class="btn"
                                >
                                <i class="bi bi-card-list"></i>
                            </button>
                        </div>
                    </div>
                    @endif
                    @if(auth()->user()->role_id != \App\Models\User::BUSINESS_ROL_ID)
                    <div style="margin-left: auto">
                        <a href="/home" class="btn btn-primary bg-primary rounded-5 py-2 mt-2 px-5 border-0 fs-sm-14 fw-bold btnBuild" wire:navigate>
                            Crear Invitación
                        </a>
                    </div>
                    @endif
                </form>
            </div>
            @if(auth()->user()->businessConfig && auth()->user()->businessConfig->isExpired())
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                Parece que te has quedado sin invitaciones o que tu plan ha expirado. Contáctanos para obtener un nuevo plan y continuar utilizando nuestros servicios.
                <a class="btn btn-primary" href="https://wa.link/7uooxv" target="_blank"><i class="bi bi-whatsapp"></i> Contactar</a>
            </div>
            @elseif(auth()->user()->businessConfig && !is_null(auth()->user()->businessConfig))
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <strong>Hola {{auth()->user()->name}}!</strong> Te quedan <b>{{ auth()->user()->businessConfig->invitation_count }} </b>invitacion/es disponible/s 
                @if(!is_null(auth()->user()->businessConfig->expiration_date))
                , expiran el {{auth()->user()->businessConfig->expiration_date->format('d-m-Y')}}
                @endif
            </div>
            @endif
            <div class="templates" x-show="view == 'gallery'" x-transition>
                @forelse ($invitations as $invitation)
                <div class="item">
                    <div class="tab bg-black text-white rounded-4 fw-bold d-inline-block py-2 px-4 pb-4">
                        {{ $invitation->type->name }}
                        @if($invitation->plan->name == 'FREE')
                        <span style="background-color: #707070" class="rounded-pill px-2 ms-2">
                            <span style="font-size: 12px;">GRATIS</span>
                        </span>
                        @elseif($invitation->plan->name == 'PREMIUM')
                        <span style="background-color: #707070" class="rounded-pill px-2 ms-2">
                            <span><img src="{{asset('img/home-panel/star.svg')}}" width="12" height="12" alt=""></span>
                            <span style="font-size: 12px;">PREMIUM</span>
                        </span>
                        @else
                        <span style="background-color: #707070" class="rounded-pill px-2 ms-2">
                            <span><img src="{{asset('img/home-panel/corona.svg')}}" width="12" height="12" alt=""></span>
                            <span style="font-size: 12px;">VIP</span>
                        </span>
                        @endif
                    </div>
                    <div class="content-template bg-white p-2 rounded-4 position-relative " style="margin-top: -20px;">
                        <div class="position-relative">
                            @if(!$invitation->demo && auth()->user()->role_id != \App\Models\User::BUSINESS_ROL_ID)
                            <a class="d-block position-absolute end-0 top-0 bg-danger p-2 rounded-2 mt-2 me-2"
                                wire:click="delete({{$invitation->id}})"
                                wire:confirm.prompt="Seguro que desea eliminar la invitación?\n\nEscriba BORRAR para confirmar|BORRAR"
                                wire:key="{{ uniqid() }}">
                                <img src="{{asset('img/delete-forever.svg')}}" alt="">
                            </a>
                            @endif
                            <a href="#" class="d-block ">
                                @php
                                    $backgroundImage = ($invitation->variables->where('name', 'backgroundImage')->first());
                                    $cover = $backgroundImage ? Storage::url($backgroundImage['value']) : asset('img/templates/'.strtolower($invitation->template->name).'/cover.jpg');
                                @endphp
                                <img src="{{ $cover }}" alt="" class="img-fluid w-100 rounded-3 mb-2" style="height: 200px; object-fit: cover;">
                            </a>
                        </div>
                        <div class="d-flex gap-2 ">
                            <div class="w-100 bg-gray-light py-1 px-4 rounded-pill">
                                <strong>{{ $invitation->title }}</strong> <br>
                                {{ $invitation->template->name }}
                            </div>
                            <div>
                                <a href="/invitations/{{$invitation->id}}/overview" wire:navigate>
                                    <img src="{{asset('img/arrow-forward-circle-sharp.svg')}}" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <p>Aún no tienes una invitación creada</p>
                @endforelse
            </div>

            <div class="table-responsive" x-show="view == 'list'" x-transition>
                <table class="table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Título</th>
                            <th>Plan</th>
                            <th>Tipo de Evento</th>
                            <th>Plantilla</th>
                            <th>Cliente</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach ($invitations as $invitation)
                    <tr>
                        <td>{{ $invitation->id }}</td>
                        <td>{{ $invitation->title }}</td>
                        <td>
                            @if($invitation->plan->name == 'FREE')
                            <span class="badge bg-secondary">FREE</span>
                            @elseif($invitation->plan->name == 'PREMIUM')
                            <span class="badge bg-primary">PREMIUM</span>
                            @else
                            <span class="badge bg-dark">VIP</span>
                            @endif
                        </td>
                        <td>{{ $invitation->type->name}}</td>
                        <td>{{ $invitation->template ? $invitation->template->name : null}}</td>
                        @if(auth()->user()->role_id == \App\Models\User::BUSINESS_ROL_ID)
                        <td>{{ $invitation->customer ? $invitation->customer->email : '' }}</td>
                        @endif
                        <td>
                            @if(!$invitation->demo && auth()->user()->role_id != \App\Models\User::BUSINESS_ROL_ID)
                            <a class="btn btn-danger"
                                title="Eliminar"
                                wire:click="delete({{$invitation->id}})"
                                wire:confirm.prompt="Seguro que desea eliminar la invitación?\n\nEscriba BORRAR para confirmar|BORRAR"
                                wire:key="{{ uniqid() }}">
                                <img src="{{asset('img/delete-forever.svg')}}" alt="">
                            </a>
                            @endif
                            <a class="btn btn-primary rounded-pill" wire:navigate href='/invitations/{{ $invitation->id }}/overview'>
                                <i class="bi bi-arrow-right"></i>
                            </a>
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            @if($invitations->count() > 0)
                <div class="container text-center">
                    {!! $invitations->links('custom-pagination-links') !!}
                </div>
            @endif
        </div>
    </div>
</div>
@script
<script>
    Alpine.data('section', () => ({
        view: "{{auth()->user()->role_id == \App\Models\User::BUSINESS_ROL_ID ? 'list' : 'gallery'}}"
    }))
</script>
@endscript