@php
    $giftTitle = $_giftTitle ?? 'Mesa de regalos';
    $giftDescription = $_giftDescription ?? 'Tu presencia es el regalo más grande que podrías darme, pero si deseas hacerme un regalo adicional, puedes hacerlo a través del siguiente medio';
    $icon = "/img/templates_v2/{$templateName}/icon-gifts.svg";
@endphp
<section id="gifts">
    <div class="formaTop">
        <div class="position-relative">
            <span class="formaUno"></span>
            <span class="formaDos"></span>
            <span class="formaTres"></span>
        </div>
    </div>
    <div class="container">
        <div class="icon">
            <img src="{{ asset($icon) }}" alt="" />
        </div>
        <h3 class="title">{{ $giftTitle }}</h3>
        <div class="row">
            <div class="col-sm-11">
                <p class="text">{{ $giftDescription }}</p>
            </div>
        </div>

        @if(($_enableBankDetails ?? false) || ($_enableGiftList ?? false))
        <div class="pills">
            <div class="border border-4 border-white rounded-pill p-2 mb-5">
                <ul class="nav nav-pills " id="pills-tab" role="tablist">
                    @if($_enableBankDetails ?? false)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link px-sm-5 px-sm-4 fs-sm-16 text-uppercase rounded-pill fw-600" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-info" type="button" role="tab" aria-controls="pills-info" aria-selected="false">Ver datos</button>
                    </li>
                    @endif
                    @if($_enableGiftList ?? false)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link px-sm-5 px-sm-4 fs-sm-16 text-uppercase rounded-pill fw-600" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-list" type="button" role="tab" aria-controls="pills-list" aria-selected="false">Ver lista</button>
                    </li>
                    @endif
                </ul>
            </div>
        </div>
        @endif


        @if($_enableBankDetails ?? false)
        <div class="tab-content">
            <div class="tab-pane hidden fade show " id="pills-info" role="tabpanel" aria-labelledby="pills-info-tab" tabindex="0">
                <div class="bank"  id="infoDetails">
                {!! nl2br(e($_giftBankDetails ?? '')) !!}
                </div>
            </div>
        </div>
        @endif

        <div class="tab-content">
            <div class="tab-pane fade" id="pills-list" role="tabpanel" aria-labelledby="pills-list-tab" tabindex="0">
                <div class="ps-5 pe-4 position-relative">
                    <div class="gifts">
                    @forelse ($invitation->gifts as $gift)
                        <div class="col-sm">
                            <div class="bg-white p-3">
                                <img src="{{ $gift->photo }}" class="img-fluid d-block mb-3" loading="lazy">
                                <h3 class="title-product">{{ $gift->name }}</h3>
                                <p class="ellipsis-2 ">{{ $gift->description }}</p>
                                @if (($_showGiftPrice ?? false))
                                    <h4>$ {{$gift->price}}</h4>
                                @endif
                                <a href="{{$gift->link}}">Comprar</a>
                            </div>
                        </div>
                    @empty
                        <div class="col-sm">
                            <div class="bg-white p-3">
                                <img src="{{asset('/img/templates/mochila.jpg')}}" class="img-fluid d-block mb-3" loading="lazy">
                                <h3 class="title-product">Mochila con piercings</h3>
                                <p class="ellipsis-2 ">Mochila de material deportivo con bolsillo frontal.</p>
                                <h4>$ 9.240</h4>
                                <a href="#">Comprar</a>
                            </div>
                        </div>
                        <div class="col-sm">
                            <div class="bg-white p-3">
                                <img src="{{asset('/img/templates/auriculares.jpg')}}" class="img-fluid d-block mb-3" loading="lazy">
                                <h3 class="title-product">Auriculares CON peluche</h3>
                                <p class="ellipsis-2 ">Auriculares vincha con peluche</p>
                                <h4>$2.415</h4>
                                <a href="#">Comprar</a>
                            </div>
                        </div>
                        <div class="col-sm">
                            <div class="bg-white p-3">
                                <img src="{{asset('/img/templates/case.jpg')}}" class="img-fluid d-block mb-3" loading="lazy">
                                <h3 class="title-product">Case de celular</h3>
                                <p class="ellipsis-2 ">Case de celular con correa desmontable con diseño.</p>
                                <h4>$1.190</h4>
                                <a href="#">Comprar</a>
                            </div>
                        </div>
                        <div class="col-sm">
                            <div class="bg-white p-3">
                                <img src="{{asset('/img/templates/planchit.jpg')}}" class="img-fluid d-block mb-3" loading="lazy">
                                <h3 class="title-product">Set Planchita Y Secador</h3>
                                <p class="ellipsis-2 ">Philips</p>
                                <h4>$22.000</h4>
                                <a href="#">Comprar</a>
                            </div>
                        </div>
                    @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="formaDown">
        <div class="position-relative">
            <span class="formaUno"></span>
            <span class="formaDos"></span>
            <span class="formaTres"></span>
        </div>
    </div>
    <style>
        #gifts .tns-inner{
            margin: 0;
        }
        #gifts .tns-controls [data-controls="prev"]{
            left: 0;
        }
        #gifts .tns-controls [data-controls="next"]{
            right: 0;
        }
    </style>
</section>

<script>
    if ( $('.gifts').length > 0 ) {
        var slider2 = tns({
            container: '.gifts',
            items: 1,
            gutter: 30,
            controlsText: ['', ''],
            nav: false,
            autoplayButtonOutput: false,
            mouseDrag: true,
            slideBy: 1,
            autoplay: true,
            items: 1,
            responsive: {
                640: {
                    items: 2
                },
                900: {
                    items: 4
                }
            }
        });
    }
</script>