@props(['title', 'description', 'inagural_staff'])
@php
    $p = [
            [
                'link'=>'devchulimunhospital.com',
                'title' => 'Hospital Content Management System (CMS)',
                '$description' => 'Engineered a responsive, localized CMS for a healthcare institution to streamline patient communication and public news updates. Built an intuitive administration panel allowing staff to manage dynamic site listings, publish announcements, and maintain high-resolution photo galleries.',
                'tech_stack' => ['Laravel', 'MySQL', 'Tailwindcss', ],
            ],
            [
                'link'=>'nabinpdl.com.np',
                'title' => 'Devchuli Secondary School\'s Website',
                '$description' => 'Engineered a responsive, localized CMS for a healthcare institution to streamline patient communication and public news updates. Built an intuitive administration panel allowing staff to manage dynamic site listings, publish announcements, and maintain high-resolution photo galleries.',
                'tech_stack' => ['Laravel', 'MySQL', 'Tailwindcss', ],
            ],
    ];
@endphp
<div>
    <flux:card class="space-y-4">
        <div class="flex justify-between">
            <div>
                <flux:heading size="lg">{{$title}}</flux:heading>
                <flux:text>{{$description}}</flux:text>
            </div>

            <div class="flex gap-4">
                <flux:button
                    icon="arrow-left"
                    onclick="carousel.slidePrev()"
                />

                <flux:button
                    icon="arrow-right"
                    onclick="carousel.slideNext()"
                />
            </div>
        </div>

        <div>
            <div class="swiper carouselSwiper">
                <div class="swiper-wrapper">

                    @foreach($p as $portfolio)
                        <div class="swiper-slide">
                            <flux:card class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">

                                <div class="rounded-lg overflow-hidden ring-1 ring-neutral-500/30 shadow-md w-[250px] mx-auto sm:mx-0">
                                    <div class="flex items-center gap-1.5 px-3 py-2 dark:bg-neutral-900/60 border-b border-neutral-500/10">
                                        <span class="w-2 h-2 rounded-full bg-red-500/70"></span>
                                        <span class="w-2 h-2 rounded-full bg-amber-500/70"></span>
                                        <span class="w-2 h-2 rounded-full bg-lime-500/70"></span>
                                        <span class="font-mono text-[10px] text-neutral-500 truncate ml-1">{{$portfolio['link']}}</span>
                                    </div>

                                    <div class="relative w-[300px] h-[200px] overflow-hidden">
                                        <iframe
                                            src="{{'https://'. $portfolio['link']}}"
                                            class="w-[1000px] h-[800px] border-0 origin-top-left scale-[0.25] pointer-events-none"
                                            loading="lazy"
                                        ></iframe>
                                    </div>
                                </div>

                                <div class="text-start space-y-2">
                                    <flux:text></flux:text>
                                    <flux:heading size="lg">{{$portfolio['title']}}</flux:heading>
                                    <flux:text class="dark:text-neutral-300 text-neutral-500">
                                        {{$portfolio['$description']}}
                                    </flux:text>
                                    <div class="gap-1 flex">
                                        @foreach($portfolio['tech_stack'] as $stack)
                                            <flux:badge color="lime">{{$stack}}</flux:badge>
                                        @endforeach

                                    </div>
                                    <flux:button href="https://devchulimunhospital.com" target="blank" icon-trailing="arrow-up-right" class="font-mono">./view website</flux:button>
                                </div>
                            </flux:card>
                        </div>
                    @endforeach



                </div>
            </div>
        </div>
    </flux:card>

    <script>
        var carousel = new Swiper('.carouselSwiper', {
            slidesPerView: 3,

            spaceBetween: 30,
            grabCursor: true,
            breakpoints: {
                0: {
                    slidesPerView: 1,
                },
                640: {
                    slidesPerView: 2,
                },
                1024: {
                    slidesPerView: 2,
                },
            },
        });
    </script>
</div>