@extends('visitor.template.layout')

@section('slider')
    <style>
        /* Add this style section to your template */
        .slider-container {
            position: relative;
            width: 100%;
            /* This maintains exact 1600:800 ratio (800/1600 = 0.5) */
            padding-bottom: 50%;
            overflow: hidden;
        }

        .my-slider {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .slide-item {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
        }

        /* For very small screens, adjust minimum height */
        @media (max-width: 576px) {
            .slider-container {
                min-height: 250px;
            }
        }
    </style>

    <div class="slider-container">
        <div class="my-slider">
            <div class="slide-item" style="background-image: url('{{ asset('media/stock/1600x800/img-1.jpg') }}');">
            </div>
            <div class="slide-item" style="background-image: url('{{ asset('media/stock/1600x800/img-2.jpg') }}');">
            </div>
            <div class="slide-item" style="background-image: url('{{ asset('media/stock/1600x800/img-3.jpg') }}');">
            </div>
        </div>
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;">
            <div class="controls d-flex justify-content-between px-4" id="customize-controls"
                aria-label="Carousel Navigation" tabindex="0">
                <div class="prev btn btn-icon btn-sm btn-outline" aria-controls="customize" tabindex="-1"
                    data-controls="prev">
                    <i class="ki-duotone ki-arrow-left fs-1 text-white">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                </div>
                <div class="next btn btn-icon btn-sm btn-outline" aria-controls="customize" tabindex="-1"
                    data-controls="next">
                    <i class="ki-duotone ki-arrow-right fs-1 text-white">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
    <script>
        var slider = tns({
            container: '.my-slider',
            "items": 1,
            "controlsContainer": "#customize-controls",
            "autoplay": false,
            "autoplayTimeout": 1000,
            "swipeAngle": false,
            "speed": 400,
            "nav": false,
        });
    </script> <!--begin::Wrapper-->
@endsection



@section('toolbar')
    <!--begin::Toolbar-->
    <div id="kt_app_toolbar" class="app-toolbar" style="background-image: url('{{ asset('media/landing-page/bg-card-custom.png') }}'); background-size: cover; background-position: center;">
        <!--begin::Toolbar container-->
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex align-items-start">
            <!--begin::Toolbar container-->
            <div class="d-flex flex-column flex-row-fluid">
                <!--begin::Toolbar wrapper=-->
                <div class="d-flex flex-stack flex-wrap flex-lg-nowrap gap-4 gap-lg-10 pt-13 pb-10">
                    <div class="d-flex text-white fw-bold fs-2x flex-column justify-content-center my-0 flex-grow-1">
                        <span class="fs-2hx">Selamat Datang</span>
                        <span class="fs-2hx">di {{ $data->full_name }}</span>
                        <!--begin::Description-->
                        <span class="page-desc text-gray-600 fw-semibold fs-6 pt-3 pb-10 pb-md-0">
                            {{ $data->about }}
                        </span>
                        <!--end::Description-->
                    </div>
                
                    <!-- Image container with flex column alignment -->
                    <div class="d-flex align-items-center justify-content-center mb-5 flex-grow-1">
                        <img src="{{ asset('media/illustrations/sigma-1/17.png') }}" alt="img" class="mh-250px" />
                    </div>
                </div>
                               
                <!--end::Toolbar wrapper=-->
            </div>
            <!--end::Toolbar container=-->
        </div>
        <!--end::Toolbar container-->
    </div>
    <!--end::Toolbar-->
@endsection

@section('content')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div class="row g-5 g-xl-8">
                <!--begin::Search Card-->
                <div class="card mb-5 mb-xl-8">
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-6">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="fw-bold fs-3 mb-1">Cari Program Pelatihan Atau Keahlian</span>
                        </h3>
                    </div>
                    <!--end::Card header-->

                    <!--begin::Card body-->
                    <div class="card-body py-4">
                        <!--begin::Search Form-->
                        <form id="search-form" class="mb-7">
                            <div class="row g-5 mb-5">
                                <div class="col-md-11">
                                    <input type="text" class="form-control form-control-solid"
                                        placeholder="Cari nama program atau keahlian" />
                                </div>
                                <div class="col-md-1 d-flex align-items-end">
                                    <button type="submit" class="btn btn-icon btn-dark d-flex align-items-center">
                                        <i class="ki-outline ki-magnifier fs-2 "></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                        <!--end::Search Form-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Search Card-->
            </div>
            <!--begin::Row-->
            <div class="row g-5 g-xl-8 pt-5">
                <!--begin::Regulation Information-->
                <div class="mb-1 mb-xl-3">
                    <div class="d-flex align-items-center justify-content-between pb-5">
                        <!--begin::Card header-->
                        <div class="pt-0">
                            <h3 class="mb-3">
                                <span class="fw-bolder fs-1 text-dark">Program Unggulan </span>
                            </h3>
                            <p class="fs-6 text-gray-600">Berbagai Program Unggulan yang tersedia</p>
                        </div>
                        <!--end::Card header-->
                        <a class="btn btn-primary btn-sm" href="#">
                            Selengkapnya
                            <i class="ki-outline ki-arrow-right fs-2 ms-2"></i>
                        </a>
                    </div>
                    <!--begin::Tab Content-->
                    <div class="tab-content" id="peraturanTabContent">
                        <!-- Peraturan Terbaru -->
                        <div class="tab-pane fade show active" id="terbaru" role="tabpanel" aria-labelledby="terbaru-tab">
                            <div class="row g-5">
                                <!-- Dummy Card 1 -->
                                <!--begin::Col-->
                                <div class="col-md-6 col-lg-3">
                                    <div
                                        class="card h-100 shadow-sm transition-all hover-scale-105 hover-shadow-lg hover-elevate-up border border-hover-primary cursor-pointer">
                                        <!--begin::Header-->
                                        <div class="card-header p-0 h-200px"
                                            style="background-image: url(https://i.pinimg.com/736x/8c/2b/f9/8c2bf95c0616949f9b010fe0eb326454.jpg); background-size: cover; background-position: center;">
                                        </div>
                                        <!--end::Header-->

                                        <!--begin::Body-->
                                        <div class="card-body p-8 d-flex flex-column">

                                            <h3 class="fs-2 fw-bold text-dark mb-4">Teknik Otomotif</h3>

                                            <p class="text-gray-700 fs-6 mb-7 flex-grow-1">Deskripsi
                                            </p>

                                            <div class="mb-2">
                                                <span class="badge badge-outline badge-primary fw-semibold px-2">2025</span>
                                                <span
                                                    class="badge badge-outline badge-primary fw-semibold px-2">Teknik</span>
                                            </div>

                                            <div
                                                class="d-flex align-items-center mt-auto pt-4 border-top justify-content-end">
                                                <a href="" class="btn btn-primary btn-sm">Selengkapnya</a>
                                            </div>
                                        </div>
                                        <!--end::Body-->
                                    </div>
                                </div>
                                <!--end::Col-->
                                <!--begin::Col-->
                                <div class="col-md-6 col-lg-3">
                                    <div
                                        class="card h-100 shadow-sm transition-all hover-scale-105 hover-shadow-lg hover-elevate-up border border-hover-primary cursor-pointer">
                                        <!--begin::Header-->
                                        <div class="card-header p-0 h-200px"
                                            style="background-image: url(https://i.pinimg.com/736x/8c/2b/f9/8c2bf95c0616949f9b010fe0eb326454.jpg); background-size: cover; background-position: center;">
                                        </div>
                                        <!--end::Header-->

                                        <!--begin::Body-->
                                        <div class="card-body p-8 d-flex flex-column">

                                            <h3 class="fs-2 fw-bold text-dark mb-4">Teknik Otomotif</h3>

                                            <p class="text-gray-700 fs-6 mb-7 flex-grow-1">Deskripsi
                                            </p>

                                            <div class="mb-2">
                                                <span class="badge badge-outline badge-primary fw-semibold px-2">2025</span>
                                                <span
                                                    class="badge badge-outline badge-primary fw-semibold px-2">Teknik</span>
                                            </div>

                                            <div
                                                class="d-flex align-items-center mt-auto pt-4 border-top justify-content-end">
                                                <a href="" class="btn btn-primary btn-sm">Selengkapnya</a>
                                            </div>
                                        </div>
                                        <!--end::Body-->
                                    </div>
                                </div>
                                <!--end::Col-->
                                <!--begin::Col-->
                                <div class="col-md-6 col-lg-3">
                                    <div
                                        class="card h-100 shadow-sm transition-all hover-scale-105 hover-shadow-lg hover-elevate-up border border-hover-primary cursor-pointer">
                                        <!--begin::Header-->
                                        <div class="card-header p-0 h-200px"
                                            style="background-image: url(https://i.pinimg.com/736x/8c/2b/f9/8c2bf95c0616949f9b010fe0eb326454.jpg); background-size: cover; background-position: center;">
                                        </div>
                                        <!--end::Header-->

                                        <!--begin::Body-->
                                        <div class="card-body p-8 d-flex flex-column">

                                            <h3 class="fs-2 fw-bold text-dark mb-4">Teknik Otomotif</h3>

                                            <p class="text-gray-700 fs-6 mb-7 flex-grow-1">Deskripsi
                                            </p>

                                            <div class="mb-2">
                                                <span
                                                    class="badge badge-outline badge-primary fw-semibold px-2">2025</span>
                                                <span
                                                    class="badge badge-outline badge-primary fw-semibold px-2">Teknik</span>
                                            </div>

                                            <div
                                                class="d-flex align-items-center mt-auto pt-4 border-top justify-content-end">
                                                <a href="" class="btn btn-primary btn-sm">Selengkapnya</a>
                                            </div>
                                        </div>
                                        <!--end::Body-->
                                    </div>
                                </div>
                                <!--end::Col-->
                                <!--begin::Col-->
                                <div class="col-md-6 col-lg-3">
                                    <div
                                        class="card h-100 shadow-sm transition-all hover-scale-105 hover-shadow-lg hover-elevate-up border border-hover-primary cursor-pointer">
                                        <!--begin::Header-->
                                        <div class="card-header p-0 h-200px"
                                            style="background-image: url(https://i.pinimg.com/736x/8c/2b/f9/8c2bf95c0616949f9b010fe0eb326454.jpg); background-size: cover; background-position: center;">
                                        </div>
                                        <!--end::Header-->

                                        <!--begin::Body-->
                                        <div class="card-body p-8 d-flex flex-column">

                                            <h3 class="fs-2 fw-bold text-dark mb-4">Teknik Otomotif</h3>

                                            <p class="text-gray-700 fs-6 mb-7 flex-grow-1">Deskripsi
                                            </p>

                                            <div class="mb-2">
                                                <span
                                                    class="badge badge-outline badge-primary fw-semibold px-2">2025</span>
                                                <span
                                                    class="badge badge-outline badge-primary fw-semibold px-2">Teknik</span>
                                            </div>

                                            <div
                                                class="d-flex align-items-center mt-auto pt-4 border-top justify-content-end">
                                                <a href="" class="btn btn-primary btn-sm">Selengkapnya</a>
                                            </div>
                                        </div>
                                        <!--end::Body-->
                                    </div>
                                </div>
                                <!--end::Col-->

                            </div>
                        </div>

                    </div>
                    <!--end::Tab Content-->
                </div>
                <div class="d-flex flex-end">
                </div>
                <!--end::Regulation Information-->
            </div>
            <div class="row g-4 pt-3 pt-md-10 ">
                <div class="card" data-bs-theme="light"
                    style="background: linear-gradient(112.14deg, #033268 0%, #175fb2 100%)">
                    <!--begin::Body-->
                    <div class="card-body">
                        <div class="row align-items-center h-100">
                            <div class="col-12 col-md-8 ps-3 ps-xl-13 mb-4 mb-md-0">
                                <!-- Title Section -->
                                <div class="text-white mb-4 mb-md-6 pt-4 pt-md-6">
                                    <span class="fs-5 fs-md-4 fw-semibold me-2 d-block lh-1 pb-2 opacity-75">Gabung Bersama
                                        Kami</span>
                                    <span class="fs-1 fs-md-2qx fw-bold">Belajar Hari Ini, Sukses Esok Hari</span>
                                </div>

                                <!-- Description Text -->
                                <div class="mb-10">
                                    <span class="fw-semibold text-white fs-6 d-block opacity-75">
                                        Fokus pada pembekalan keterampilan jangka panjang untuk masa depan cerah. Kami
                                        menyediakan berbagai program pelatihan yang dirancang untuk meningkatkan keahlian
                                        dan kompetensi Anda, sehingga Anda dapat bersaing di dunia kerja yang terus
                                        berkembang.
                                    </span>
                                </div>

                                <!-- Action Button -->
                                <div class="d-grid d-md-block gap-2">
                                    <a href="#" class="btn btn-light-primary w-100">Hubungi Kami</a>
                                </div>
                            </div>
                            <div class="col-12 col-md-4 text-center">
                                <div class="bgi-no-repeat bgi-size-contain bgi-position-x-center bgi-position-y-bottom h-125px h-md-200px"
                                    style="background-image:url('{{ asset('media/illustrations/sigma-1/4.png') }}')">
                                </div>
                            </div>
                        </div>
                        <div>

                            <!--begin::Illustration-->
                            <!--end::Illustration-->
                        </div>
                        <!--end::Body-->
                    </div>
                </div>


                <div class="row g-5 g-xl-8 pt-5">
                    <!--begin::Regulation Information-->
                    <div class="mb-1 mb-xl-3">
                        <div class="d-flex align-items-center justify-content-between pb-5">
                            <!--begin::Card header-->
                            <div class="pt-0">
                                <h3 class="mb-3">
                                    <span class="fw-bolder fs-1 text-dark">Info & Artikel </span>
                                </h3>
                                <p class="fs-6 text-gray-600">Informasi dan Artikel</p>
                            </div>
                            <!--end::Card header-->
                            @if ($articles->count() > 3)
                                <a class="btn btn-primary btn-sm" href="{{ route('dynamic.index', ['artikel']) }}">
                                    Selengkapnya
                                    <i class="ki-outline ki-arrow-right fs-2 ms-2"></i>
                                </a>
                            @endif
                        </div>
                        <!--begin::Tab Content-->
                        <div class="tab-content" id="peraturanTabContent">
                            <!-- Peraturan Terbaru -->
                            <div class="tab-pane fade show active" id="terbaru" role="tabpanel"
                                aria-labelledby="terbaru-tab">
                                <div class="row g-5">
                                    <!-- Dummy Card 1 -->
                                    @forelse ($articles as $item)
                                        <!--begin::Col-->
                                        <div class="col-md-6 col-lg-4">
                                            <div
                                                class="card h-100 shadow-sm transition-all hover-scale-105 hover-shadow-lg hover-elevate-up border border-hover-primary cursor-pointer">
                                                <!--begin::Header-->
                                                <div class="card-header p-0 h-200px"
                                                    style="background-image: url({{ asset($item->thumbnail) }}); background-size: cover; background-position: center;">
                                                </div>
                                                <!--end::Header-->

                                                <!--begin::Body-->
                                                <div class="card-body p-8 d-flex flex-column">

                                                    <h3 class="fs-2 fw-bold text-dark mb-4">{{ $item->title }}</h3>
                                                    <div class="d-flex align-items-center mb-5">
                                                        <i class="ki-outline ki-calendar-8 fs-3 text-gray-500 me-3"></i>
                                                        <span
                                                            class="text-gray-700">{{ \Carbon\Carbon::parse($item->publish_date)->locale('id_ID')->translatedFormat('d F, Y') }}</span>
                                                        <span class="mx-3 text-gray-400">•</span>
                                                        <span class="text-gray-700">{{ $item->user->name }}</span>
                                                    </div>
                                                    <p class="text-gray-700 fs-6 mb-7 flex-grow-1">
                                                        {{ Str::limit($item->description, 100) }}</p>

                                                    <div class="mb-2">
                                                        @php
                                                            $tags = explode(',', $item->tag);
                                                            foreach ($tags as $tag) {
                                                                echo '<span class="badge badge-light-primary me-1 mb-1">' .
                                                                    $tag .
                                                                    '</span>';
                                                            }
                                                        @endphp
                                                    </div>

                                                    <div
                                                        class="d-flex align-items-center mt-auto pt-4 border-top justify-content-end">
                                                        <a href="{{ route('dynamic.show', ['artikel', $item->link]) }}"
                                                            class="btn btn-primary btn-sm">Selengkapnya</a>
                                                    </div>
                                                </div>
                                                <!--end::Body-->
                                            </div>
                                        </div>
                                        <!--end::Col-->
                                    @empty
                                        <p class="fs-6 text-gray-600">Belum ada artikel.</p>
                                    @endforelse
                                </div>
                            </div>

                        </div>
                        <!--end::Tab Content-->


                    </div>
                    <div class="d-flex flex-end">
                    </div>
                    <!--end::Regulation Information-->
                </div>

                <div class="row g-4 pt-3 pt-md-10 ">
                    <div class="card card-body">
                        <div class="row g-4">
                            <div class="col-sm-6">
                                <div class="card-body">
                                    <div class="fs-2 fw-bold">Kontak dan Alamat</div>
                                    <iframe
                                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4934.2236919178695!2d110.42136097592318!3d-7.038267468962024!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e708ba069c8485b%3A0xeb058e2defd046a1!2sLPK%20Magita%20Jaya%20Perkasa!5e1!3m2!1sid!2sid!4v1744172053283!5m2!1sid!2sid"
                                        class="w-100 rounded" style="border:0;" allowfullscreen="" loading="lazy"
                                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                                </div>
                            </div>
                            <div class="col-sm-6 card-body d-flex flex-column justify-content-center">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <i class="ki-duotone ki-geolocation fs-2 text-dark">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                    <div class="text-dark">{{ $global_option->address }}</div>
                                </div>
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <i class="ki-duotone ki-phone fs-2 text-dark">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                    <div class="text-dark">{{ $global_option->phone }}</div>
                                </div>
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <i class="ki-duotone ki-sms fs-2 text-dark">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                    </i>
                                    <div class="text-dark">{{ $global_option->email }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Content-->
        </div>
        <!--end::Content wrapper-->
    @endsection

    @section('script')
    @endsection