@extends('layouts.master_layout')
@section('content')
<style>
    .spinner {
        display: none;
        /* Ẩn spinner mặc định */
        justify-content: center;
        width: 3rem;
        height: 3rem;
        border: 0.4rem solid #eee;
        border-top: 0.4rem solid #ee7f4b;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }


    .spinner-border {
        display: none;
        /* Ẩn spinner mặc định */
    }

    .spinner-border.show {
        display: inline-block;
        /* Hiển thị spinner khi thêm class 'show' */
        width: 2rem;
        height: 2rem;
        vertical-align: text-bottom;
        border: .25em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: .75s linear infinite spinner-border;
        animation: .75s linear infinite spinner-border;
    }

    .text-warning {
        color: #f6c23e !important;
    }

    /* result */
    .submit-warning {
        padding: 0.75rem 1.25rem;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .border-warning {
        border: 1px solid #f6c23e;
    }

    .border-error {
        border: 1px solid red;
    }

    .warning-text {
        color: #f6c23e;
        margin: 0 !important;
    }

    .error-text {
        color: red;
        margin: 0 !important;
    }

    .btn-close {
        border: none;
        background: transparent;
        opacity: 0.5;
    }

    .btn-close:hover {
        opacity: 1;
    }

    .result-container {
        padding: 0 1.25rem;
        border: 1px solid #1cc88a;
        border-radius: 4px;
    }

    .border-success {
        border: 1px solid #1cc88a;
    }

    .border-b-dashed {
        border-bottom: 1px dashed #ebedf2;
    }

    .download-img {
        width: 60px;
        height: 60px;
    }

    .download-box {
        padding: 0.75rem 0;
    }

    .result-link {
        font-weight: bold;
        color: #1e60c6;
        border: none;
        background: transparent;
    }

    .result-download {
        border: none;
        background: #1cc88a;
        padding: 5px 10px;
        border-radius: 6px;
        color: white;
        width: fit-content;
    }

    .report-link {
        font-size: 12px;
        color: #1e60c6;
        padding: 0.75rem 0;
    }

    .justify-center {
        justify-content: center;
    }

    .flex {
        display: flex;
    }

    .download-box {
        padding: 0.75rem 0;
    }

    .border-b-dashed {
        border-bottom: 1px dashed #ebedf2;
    }

    *,
    ::after,
    ::before {
        box-sizing: border-box;
    }

    .gap-2 {
        gap: 8px;
    }

    .items-center {
        align-items: center;
    }

    .flex-col {
        flex-direction: column;
    }

    .flex {
        display: flex;
    }

    .download-box {
        padding: 0.75rem 0;
    }

    .border-b-dashed {
        border-bottom: 1px dashed #ebedf2;
    }

    .justify-center {
        justify-content: center;
    }

    .flex {
        display: flex;
    }

    .report-link {
        font-size: 12px;
        color: #1e60c6;
        padding: 0.75rem 0;
    }

    .border-b-dashed {
        border-bottom: 1px dashed #ebedf2;
    }

    *,
    ::after,
    ::before {
        box-sizing: border-box;
    }

    /* end */
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<main>
    <div class="container">
        <div class="slider-container banner--home ">
            <div class="owl-carousel">
                {{-- <div class="item slider-item">
                        <img src="assets/images/CTKMT3.png" alt="Banner">
                    </div> --}}
                <div class="item slider-item">
                    <img src="assets/images/banner1.png" alt="Banner">
                </div>
                <div class="item slider-item">
                    <img src="assets/images/banner2.png" alt="Banner">
                </div>
                <div class="item slider-item">
                    <img src="assets/images/banner3.png" alt="Banner">
                </div>
            </div>
        </div>
    </div>
    <section class="resources-section mt">
        <div class="">
            <h1 class="section-title">TÀI NGUYÊN MIỄN PHÍ</h1>

            <div class="resource-grid">
                @foreach ($free_datas as $data)
                @include('/member/data/item_data')
                @endforeach
            </div>

            <div class="view-more">
                <a style="text-decoration: none;" href="{{ route('member.data', ['sale' => 'free', 'title' => '']) }}"
                    class="view-more-btn">Xem
                    thêm</a>
            </div>
        </div>
    </section>
    </div>
    <div class="premie mt">
        <!-- Menu Section -->
        <nav class="menu">
            <div class="menu-container">
                @foreach ($menu_types as $menu_type)
                <a href="{{ route('member.data', ['menu' => 'video-template', 'type_menu' => $menu_type->type]) }}"
                    class="menu-item">{{ $menu_type->name }}</a>
                {{-- <a href="#" class="menu-item active">AFTER EFFECT</a> --}}
                @endforeach
                <a href="{{ route('member.data', ['menu' => 'motion-graphics', 'category_type' => 'capcut-effects']) }}"
                    class="menu-item">CAPCUT</a>
                <a href="{{ route('member.data', ['menu' => 'motion-graphics', 'category_type' => 'capcut-effects']) }}"
                    class="menu-item">APPLE MOTION</a>
            </div>
        </nav>

        <!-- Grid Section -->
        <div class="bg-premium">
            <div class="container">
                <div class="grid-container">
                    {{-- @foreach ($category_types as $key => $category_type)
                            <a style="text-decoration: none;"
                                href="{{ route('member.data', ['category_type' => $category_type->type]) }}">
                    <div class="grid-item">
                        <div class="grid-image">
                            @if ($key == 0 || $key == 3)
                            <img src="assets/images/image-01.png" alt="Transition">
                            @elseif ($key == 1 || $key == 4)
                            <img src="assets/images/image-02.png" alt="Transition">
                            @elseif ($key == 2 || $key == 5)
                            <img src="assets/images/image-03.png" alt="Transition">
                            @endif
                        </div>
                        <div class="grid-title">{{ $category_type->name }}</div>
                    </div>
                    </a>
                    @endforeach --}}
                    <a style="text-decoration: none;"
                        href="{{ route('member.data', ['menu' => 'video-template', 'category_type' => 'transitions']) }}">
                        <div class="grid-item">
                            <div class="grid-image">
                                <img src="assets/images/image-transitions-home.png" alt="Transition">
                            </div>
                            <div class="grid-title">Transitions</div>
                        </div>
                    </a>
                    <a style="text-decoration: none;"
                        href="{{ route('member.data', ['menu' => 'video-template', 'category_type' => 'typography-titles']) }}">
                        <div class="grid-item">
                            <div class="grid-image">
                                <img src="assets/images/image-title-lower-thirds-home.png" alt="thirds">
                            </div>
                            <div class="grid-title">Title & Lower Thirds</div>
                        </div>
                    </a>
                    <a style="text-decoration: none;"
                        href="{{ route('member.data', ['menu' => 'video-template', 'category_type' => 'logo']) }}">
                        <div class="grid-item">
                            <div class="grid-image">
                                <img src="assets/images/image-logo-home.png" alt="logo">
                            </div>
                            <div class="grid-title">Logo</div>
                        </div>
                    </a>
                    <a style="text-decoration: none;"
                        href="{{ route('member.data', ['menu' => 'video-template', 'category_type' => 'slideshows']) }}">
                        <div class="grid-item">
                            <div class="grid-image">
                                <img src="assets/images/image-intro-slideshow-home.png" alt="slideshow">
                            </div>
                            <div class="grid-title">Intro & Slideshow</div>
                        </div>
                    </a>
                    <a style="text-decoration: none;"
                        href="{{ route('member.data', ['menu' => 'video-template', 'category_type' => 'infographics']) }}">
                        <div class="grid-item">
                            <div class="grid-image">
                                <img src="assets/images/image-infographics-home.png" alt="infographics">
                            </div>
                            <div class="grid-title">Infographics</div>
                        </div>
                    </a>
                    <a style="text-decoration: none;"
                        href="{{ route('member.data', ['menu' => 'video-template', 'category_type' => 'element']) }}">
                        <div class="grid-item">
                            <div class="grid-image">
                                <img src="assets/images/image-element-home.png" alt="element">
                            </div>
                            <div class="grid-title">Element</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <section class="resources-section mt">
            <div class="">
                <h1 class="section-title">PHẦN MỀM & PLUGIN</h1>

                <div class="resource-grid">
                    @foreach ($pham_mem_plugins as $data)
                    @include('/member/data/item_data')
                    @endforeach
                </div>

                <div class="view-more">
                    <a style="text-decoration: none;" href="{{ route('member.data', ['menu' => 'tai-nguyen-vip']) }}"
                        class="view-more-btn">Xem thêm</a>
                </div>
            </div>
        </section>
        <section class="resources-section mt">
            <div class="">
                <h1 class="section-title">ĐƯỢC TẢI NHIỀU NHẤT</h1>

                <div class="resource-grid">
                    @foreach ($supper_downloads as $data)
                    @include('/member/data/item_data')
                    @endforeach
                </div>

                <div class="view-more">
                    <a style="text-decoration: none;"
                        href="{{ route('member.data', ['download' => 'most', 'title' => '']) }}"
                        class="view-more-btn">Xem
                        thêm</a>
                </div>
            </div>
        </section>
    </div>
    {{-- ----------- --}}
    @if (session('isNewUserGG'))
    <div class="parent-login-gg">
        <div class="wrapper">
            <div class="card"><img src="{{ asset('assets/images//logo.png') }}" class="logo" />
                <form action="{{ route('member.postParent') }}" method="POST"
                    class="form-control form-parent-gg">
                    @csrf
                    <input type="hidden" name="email" value="{{ session('isNewUserGG') }}" class="input" />
                    <div class="input-wrapper">
                        {{-- <img class="input-icon" src="{{ asset('assets/images/password.png') }}" /> --}}
                        <input type="text" name="parent_id" placeholder="Mã giới thiệu"
                            value="{{ old('parent_id', request('parent_id')) }}" class="input" />
                    </div>
                    @if ($errors->has('parent_id'))
                    <span style="color:red;" class="text-danger">{{ $errors->first('parent_id') }}</span>
                    @endif
                    <div class="input-wrapper input-wrapper--gg">
                        <button class="submit-btn">Xác nhận</button>
                        <button class="submit-btn">Không có mã</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endif
    {{-- ----------- --}}
    @php
    $popupKey = auth('member')->check() ? 'popup_announcement_shown_loggedin' : 'popup_announcement_shown_guest';
    @endphp
    @if (session('gift_month_popup'))
        @include('member._popup_gift_month')
    @elseif(!session($popupKey))
        @include('member._popup_announcement')
    @php session()->put($popupKey, true); @endphp
    @endif
</main>

<script>
    function showSpinner() {
        document.getElementById('loadingSpinner').style.display = 'block';
    }

    function hideSpinner() {
        document.getElementById('loadingSpinner').style.display = 'none';
    }
    var pageItemType = "{{ $type_getlink }}";
    switch (pageItemType) {
        case 'freepik':
            var url = "{{ route('download.freepik') }}"
            break;
        case 'motion-array':
            var url = "{{ route('download.motion-array') }}"
            break;
        default:
            var url = "{{ route('download.envato') }}"
            break;
    }

    // Giá trị động mà bạn muốn thay thế
    $(document).ready(function() {
        $('#getlink_btn_freepik').click(function(event) {
            event.preventDefault(); // Ngăn chặn hành động mặc định của form

            $.ajax({
                url: url, // URL để gửi request
                type: "POST", // Phương thức gửi
                data: $('form').serialize(), // Dữ liệu của form
                beforeSend: function() {
                    // Hiển thị spinner trước khi gửi yêu cầu
                    $('#wp-result').hide();
                    showSpinner();
                },
                success: function(response) {
                    // Xử lý dữ liệu trả về
                    if (response.url) {
                        $('#wp-result').show();
                        $('#wp-result').html(`
                        <div id="result" class="result-container">
                            <div class="flex justify-center download-box border-b-dashed">
                                <img class="download-img" src="{{ asset('assets-theme/img/folder-download.png') }}">
                            </div>
                            <div class="download-box border-b-dashed flex flex-col items-center gap-2">
                                <span style="color: #ee7f4b;" class="result-link">${response.page_item.name}_${response.id}</span>
                                <a style="text-decoration: none" type="button" href="${response.url}" class="result-download">DOWNLOAD</a>
                            </div>
                            <div style="color: #ee7f4b;" class="border-b-dashed flex justify-center report-link">Báo link download hỏng hoặc gặp sự cố?</div>
                        </div>
                    `);
                        $('#flashmessage').hide(); // Ẩn thông báo lỗi nếu có
                    } else {
                        $('#flashmessage .error-text').text(
                            'Vui lòng đăng nhập để tải!');
                        $('#flashmessage').show(); // Hiển thị thông báo lỗi\
                    }
                },
                error: function(xhr) {
                    // Xử lý lỗi từ server
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        $('#flashmessage .error-text').text(xhr.responseJSON
                            .error); // Cập nhật thông báo lỗi
                    } else {
                        $('#flashmessage .error-text').text(
                            'Đã xảy ra lỗi khi gửi yêu cầu.'); // Lỗi chung
                    }
                    $('#flashmessage').show(); // Hiển thị thông báo lỗi
                    $('#wp-result').hide();
                },
                complete: function() {
                    // Ẩn spinner khi yêu cầu Ajax hoàn thành (thành công hoặc thất bại)
                    hideSpinner();
                }
            });
        });
    });
    //    Slider Banner
    $(document).ready(function() {
        $(".owl-carousel").owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            items: 1,
            autoplay: true,
            autoplayTimeout: 4000,
        });
    });
</script>
@endsection