@php
    $backgroundImage = $invitations->count() == 0 ? asset('img/fondo-black.svg') : asset('img/fongo.svg');
    $isBusiness = auth()->user()->role_id == \App\Models\User::BUSINESS_ROL_ID;
@endphp
<div class="col-sm-10 py-5 px-sm-5 image-bg" id="business-invitations" style="background-image: url({{$backgroundImage}});" 
     x-data="{ 
        view: '{{ $isBusiness ? "list" : "gallery" }}',
        init() {
            // Intentar recuperar de localStorage
            const saved = localStorage.getItem('invitations-view');
            if (saved && {{ $isBusiness ? 'true' : 'false' }}) {
                this.view = saved;
            }
        }
     }"
     x-init="$watch('view', value => localStorage.setItem('invitations-view', value))">
    <div class="container">
        <div class="content">
            <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>
            <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 }}
                        @php
                            $planName = $invitation->plan ? $invitation->plan->name : 'Free';
                            $isFreePlan = $invitation->plan && $invitation->plan->is_free;
                            $isVipPlan = $invitation->plan && stripos($invitation->plan->name, 'vip') !== false;
                        @endphp
                        @if($isFreePlan)
                        <span style="background-color: #707070" class="rounded-pill px-2 ms-2">
                            <span style="font-size: 12px;">{{ strtoupper($planName) }}</span>
                        </span>
                        @elseif($isVipPlan)
                        <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;">{{ strtoupper($planName) }}</span>
                        </span>
                        @else
                        <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;">{{ strtoupper($planName) }}</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>Fecha del Evento</th>
                            <th>Cliente</th>
                            @if(auth()->user()->role_id == \App\Models\User::BUSINESS_ROL_ID)
                            <th>Cambiar Plan</th>
                            @endif
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach ($invitations as $invitation)
                    <tr wire:key="invitation-row-{{ $invitation->id }}">
                        <td>{{ $invitation->id }}</td>
                        <td>{{ $invitation->title }}</td>
                        <td>
                            @php
                                $planName = $invitation->plan ? $invitation->plan->name : 'Free';
                                $isFreePlan = $invitation->plan && $invitation->plan->is_free;
                                $isVipPlan = $invitation->plan && stripos($invitation->plan->name, 'vip') !== false;
                            @endphp
                            <span 
                                x-data="{ 
                                    planId: {{ $invitation->plan_id ?? 'null' }},
                                    updateBadge(newPlanId) {
                                        const plan = {{ json_encode($allowedPlans->keyBy('id')) }}[newPlanId];
                                        if (!plan) {
                                            this.$el.className = 'badge bg-secondary';
                                            this.$el.textContent = 'Free';
                                            return;
                                        }
                                        const isVip = plan.name.toLowerCase().includes('vip');
                                        const isFree = plan.is_free;
                                        if (isFree) {
                                            this.$el.className = 'badge bg-secondary';
                                        } else if (isVip) {
                                            this.$el.className = 'badge bg-dark';
                                        } else {
                                            this.$el.className = 'badge bg-primary';
                                        }
                                        this.$el.textContent = plan.name;
                                        this.planId = newPlanId;
                                    }
                                }"
                                @plan-updated-{{ $invitation->id }}.window="updateBadge($event.detail)"
                                class="badge {{ $isFreePlan ? 'bg-secondary' : ($isVipPlan ? 'bg-dark' : 'bg-primary') }}">{{ $planName }}</span>
                        </td>
                        <td>{{ $invitation->type->name}}</td>
                        <td>{{ $invitation->template ? $invitation->template->name : null}}</td>
                        <td>
                            @if($invitation->event_date)
                                {{ $invitation->event_date->format('d/m/Y') }}
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        @if(auth()->user()->role_id == \App\Models\User::BUSINESS_ROL_ID)
                        <td>{{ $invitation->customer ? $invitation->customer->email : '' }}</td>
                        <td>
                            @if($allowedPlans->count() > 0)
                            <select class="form-select form-select-sm" 
                                    @change="
                                        const newPlanId = $event.target.value;
                                        $wire.updateInvitationPlan({{ $invitation->id }}, newPlanId);
                                        $dispatch('plan-updated-{{ $invitation->id }}', newPlanId);
                                    "
                                    wire:key="plan-select-{{ $invitation->id }}"
                                    style="min-width: 150px;">
                                @foreach($allowedPlans as $plan)
                                    <option value="{{ $plan->id }}" 
                                            {{ $invitation->plan_id == $plan->id ? 'selected' : '' }}>
                                        {{ $plan->name }}
                                    </option>
                                @endforeach
                            </select>
                            @else
                            <span class="text-muted small">Sin planes disponibles</span>
                            @endif
                        </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>