@extends('layouts.master_layout')
@section('include_css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('assets/css/detail.css') }}" />
<style>
    .text-count_download {
        color: rgb(22, 244, 236);
    }
</style>
@endsection
@section('content')
<div class="page-container">
    <div class="content-wrapper">
        <div class="detail-container detail-data">
            <div class="video-img-data">
                @php $check = 1 @endphp
                @include('member.data.handle_video')
                @php $check = 0 @endphp
            </div>
            <div class="detail-wrapper">
                <span class="resoure-type">{{ $data->menu->name ?? '' }}</span>
                <h2 class="resource-title">
                    {{ $data->title ?? '' }}
                </h2>
                <div class="divider"></div>
                <span class="resource-price">
                    @if ($data->price == 0)
                    MIỄN PHÍ
                    @php
                    $gg_ads = 1;
                    @endphp
                    @endif
                </span>
                <span class="text-count_download">Lượt tải: {{ $data->count_download }} lượt.</span>
                <div class="resource-description">
                    <div class="cus-resource-description">
                        <ul>
                            <li>Nếu nạp tiền 10 phút không vào thì bạn vào <a href="https://zalo.me/g/gzuhcq501"
                                    title="Group Zalo (demo)">Group Zalo</a> để được hỗ trợ nhanh nhất có thể</li>
                            <li>Link Drive chỉ mở được bằng Gmail đăng nhập tài khoản</li>
                            <li>Xem lịch sử tải và nạp xu <a href="{{ route('profile') }}"
                                    title="Lịch sử tải và nạp xu (demo)">Tại
                                    đây</a></li>
                        </ul>
                    </div>
                </div>
                <div class="specifications">
                    <div class="item-specifications">
                        <img width="32px" height="32px" src="{{ asset('assets/images/application.png') }}"
                            alt="icon">
                        <span>{{ $data->type_attribute ?? 'After Effects 2020' }}</span>
                    </div>
                    <div class="item-specifications">
                        <img width="32px" height="32px" src="{{ asset('assets/images/resolution.png') }}"
                            alt="icon">
                        <span>{{ $data->screen_attribute ?? '3840x2160(4K)' }}</span>
                    </div>
                    <div class="item-specifications">
                        <img width="32px" height="32px" src="{{ asset('assets/images/document.png') }}"
                            alt="icon">
                        <span>{{ $data->size_attribute ?? '11.18MB' }}</span>
                    </div>
                    <div class="item-specifications">
                        <img width="32px" height="32px" src="{{ asset('assets/images/plug.png') }}" alt="icon">
                        <span>{{ $data->plugin_attribute ?? 'No Plug-Ins' }}</span>
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    @if (Auth::guard('member')->check())
                    @csrf
                    <button id="download-btn" data=<br />
<b>Warning</b>:  Undefined variable $data in <b>/var/www/html/download-data-laravel-test/resources/views/member/data/detail_data.blade.php</b> on line <b>71</b><br />
<br />
<b>Warning</b>:  Attempt to read property "slug" on null in <b>/var/www/html/download-data-laravel-test/resources/views/member/data/detail_data.blade.php</b> on line <b>71</b><br />
 data-id="{{ $data->id }}"
                        data-price=<br />
<b>Warning</b>:  Undefined variable $data in <b>/var/www/html/download-data-laravel-test/resources/views/member/data/detail_data.blade.php</b> on line <b>72</b><br />
<br />
<b>Warning</b>:  Attempt to read property "price" on null in <b>/var/www/html/download-data-laravel-test/resources/views/member/data/detail_data.blade.php</b> on line <b>72</b><br />
0 class="download-btn">TẢI NGAY</button>
                    @else
                    <button id="login-btn-detail" class="download-btn">TẢI NGAY</button>
                    @endif
                    {{-- <a id="error_path" class="error-btn" data-url="{{ route('member.data.send_error',['slug' => $data->slug]) }}">Báo link hỏng!</a> --}}
                    <a class="error-btn" href="https://www.messenger.com/t/513421258525722/" target="_blank">Báo link
                        hỏng!</a>
                </div>
            </div>
        </div>
        <div class="description-container">
            <h2 class="description-title">MÔ TẢ</h2>
            <div class="desctiption-text">
                {!! $data->decription ?? '' !!}
            </div>
        </div>
        <div class="description-container">
            <h2 class="description-title">GỢI Ý TƯƠNG TỰ:</h2>
            <div class="related-suggestion-container">
                @php $i = 0; @endphp
                @foreach ($related_items as $data)
                @php $i++; @endphp
                @if ($i <= 12)
                    @include('/member/data/item_data')
                    @else
                    @break
                    @endif
                    @endforeach
                    </div>
                    {{-- <div class="viewmore-container">
                    <div class="viewmore-divider"></div>
                    <a style="text-decoration: none;" href="{{ route('member.data', ['menu' => $menu_item->type]) }}"
                    class="viewmore-btn">Xem thêm</a>
                    <div class="viewmore-divider"></div>
            </div> --}}
        </div>
    </div>
</div>
<div id="login-container-detail" class="login-container">
    <div class="wrapper">
        <div class="card">
            <div id="close-login-wrapper-detail" class="close-wrapper">
                <img src="{{ asset('assets/images/close.png') }}" class="close-icon" />
            </div>
            <img src="{{ asset('assets/images/logo.png') }}" class="logo" />
            <form action="{{ route('member.postLogin') }}" method="POST" class="form-control">
                @csrf
                <div class="input-wrapper">
                    <img class="input-icon" src="{{ asset('assets/images/email.png') }}" />
                    <input type="text" name="email" placeholder="Địa chỉ Email" class="input" />
                </div>
                <div class="input-wrapper">
                    <img class="input-icon" src="{{ asset('assets/images/password.png') }}" />
                    <input type="password" name="password" placeholder="Mật khẩu" class="input" />
                </div>
                <div class="flex-between">
                    <div class="save-password-wrapper">
                        <input id="save-password-checkbox" type="checkbox" class="checkbox" />
                        <label for="save-password-checkbox" class="save-password-label">Nhớ mật khẩu</label>
                    </div>
                    <a href="{{ route('member.forgot_password') }}" class="forgot-password-link">Bạn quên mật khẩu?</a>
                </div>
                <button class="submit-btn">ĐĂNG NHẬP</button>
            </form>
            <div class="divider">
                <span class="absolute-center">or</span>
            </div>
            <a href="{{ route('member.google-auth') }}" class="btn google-btn">
                <img src="{{ asset('assets/images/google.png') }}" class="google-img" />
                Google
            </a>
        </div>
    </div>
</div>
<div id="register-container" class="login-container">
    <div class="wrapper">
        <div class="card">
            <div id="close-register-wrapper" class="close-wrapper">
                <img src="{{ asset('assets/images/close.png') }}" class="close-icon" />
            </div>
            <img src="{{ asset('assets/images//logo.png') }}" class="logo" />
            <form action="{{ route('member.postRegister') }}" method="POST" class="form-control">
                @csrf
                <div class="input-wrapper">
                    <img class="input-icon" src="{{ asset('assets/images/email.png') }}" />
                    <input type="text" name="name" placeholder="Tên của bạn" class="input" />
                </div>
                <div class="input-wrapper">
                    <img class="input-icon" src="{{ asset('assets/images/email.png') }}" />
                    <input type="text" name="email" placeholder="Địa chỉ Email" class="input" />
                </div>
                <div class="input-wrapper">
                    <img class="input-icon" src="{{ asset('assets/images/password.png') }}" />
                    <input type="password" name="password" placeholder="Mật khẩu" class="input" />
                </div>
                <div class="input-wrapper">
                    <img class="input-icon" src="{{ asset('assets/images/password.png') }}" />
                    <input type="password" name="repeat_password" placeholder="Nhập lại mật khẩu" class="input" />
                </div>

                <button class="submit-btn">ĐĂNG KÝ</button>
            </form>
        </div>
    </div>
</div>
<div id="error-modal" class="login-container">
    <div class="wrapper">
        <div class="card">
            <div id="close-error-modal" class="close-wrapper">
                <img src="{{ asset('assets/images/close.png') }}" class="close-icon" />
            </div>
            <img src="{{ asset('assets/images/logo.png') }}" class="logo" />
            <h2>Báo lỗi</h2>
            <form id="error-form" class="form-control">
                @csrf
                <div class="input-wrapper">
                    <img class="input-icon" src="{{ asset('assets/images/error.png') }}" />
                    <textarea id="error-message" name="message" placeholder="Nhập nội dung báo lỗi" rows="4" class="input"></textarea>
                </div>
                <button type="submit" class="submit-btn">Gửi</button>
            </form>
        </div>
    </div>
</div>
@php
$popupKey = auth('member')->check() ? 'popup_announcement_shown_loggedin' : 'popup_announcement_shown_guest';
@endphp
@if(!session($popupKey))
@include('member._popup_announcement')
@php session()->put($popupKey, true); @endphp
@endif
<script>
    ///-------------------Control Video
    const playButton = document.querySelector('[aria-label="play"]');
    const progressTimeVideo = document.querySelector('.progress-time-video');
    const textTimeVideo = document.querySelector('.text-time-video');
    const volumeButton = document.querySelector('.fa-volume-up');
    const volumeBar = document.querySelector('.volume');
    const fullscreenButton = document.querySelector('.fa-expand');
    const videoElement = document.querySelector('video');
    const textTime = document.querySelector('.text-time-video');
    const valueProgress = document.querySelector('progress.volume');
    let volumeLevel = 0.5;
    document.addEventListener('DOMContentLoaded', () => {
        videoElement.volume = volumeLevel;
    });

    const formatTime = (time) => {
        const minutes = Math.floor(time / 60);
        const seconds = Math.floor(time % 60).toString().padStart(2, '0');
        return `${minutes}:${seconds}`;
    };

    videoElement.addEventListener('loadedmetadata', () => {
        const duration = videoElement.duration;
        textTime.innerHTML = `0:00 / ${formatTime(duration)}`;
    });

    playButton.addEventListener('click', (e) => {
        if (videoElement.paused) {
            videoElement.play();
            playButton.innerHTML = '<i class="fas fa-pause"></i>';
        } else {
            videoElement.pause();
            playButton.innerHTML = '<i class="fas fa-play"></i>';
        }
    });

    videoElement.addEventListener('timeupdate', () => {
        const currentTime = videoElement.currentTime;
        const duration = videoElement.duration;
        progressTimeVideo.value = currentTime / duration;
        textTime.innerHTML = `${formatTime(currentTime)} / ${formatTime(duration)}`;
    });


    document.addEventListener('DOMContentLoaded', () => {
        videoElement.volume = volumeLevel;
        valueProgress.value = volumeLevel;
    });


    volumeButton.addEventListener('click', () => {

        if (volumeLevel === 0) {
            volumeLevel = 0.5;
        } else if (volumeLevel === 0.5) {
            volumeLevel = 1;
        } else {
            volumeLevel = 0;
        }


        videoElement.volume = volumeLevel;
        valueProgress.value = volumeLevel;


        if (volumeLevel === 0) {
            volumeButton.className = 'fas fa-volume-mute mx-2 w-4 cursor-pointer';
        } else if (volumeLevel === 0.5) {
            volumeButton.className = 'fas fa-volume-down mx-2 w-4 cursor-pointer';
        } else {
            volumeButton.className = 'fas fa-volume-up mx-2 w-4 cursor-pointer';
        }
    });

    valueProgress.addEventListener('click', (e) => {
        const progressWidth = valueProgress.offsetWidth;
        const clickX = e.offsetX;
        volumeLevel = clickX / progressWidth;
        videoElement.volume = volumeLevel;
        valueProgress.value = volumeLevel;
        if (volumeLevel === 0) {
            volumeButton.className = 'fas fa-volume-mute mx-2 w-4 cursor-pointer';
            volumeButton.className = 'fas fa-volume-down mx-2 w-4 cursor-pointer';
        } else {
            volumeButton.className = 'fas fa-volume-up mx-2 w-4 cursor-pointer';
        }
    });
    ///----------------
    fullscreenButton.addEventListener('click', () => {
        if (document.fullscreenElement) {
            document.exitFullscreen();
        } else {
            videoElement.requestFullscreen();
        }
    });
</script>
<script>
    let loginDialogVisibleDetail = false;
    const closeBtnDetail = document.querySelector("#close-login-wrapper-detail");
    const loginContainerDetail = document.querySelector("#login-container-detail");
    const loginBtnDetail = document.querySelector("#login-btn-detail");

    loginBtnDetail.addEventListener("click", function() {
        if (!loginDialogVisibleDetail) {
            loginContainerDetail.classList.add("visible");
            loginDialogVisibleDetail = true;
        }
    });

    closeBtnDetail.addEventListener("click", function() {
        if (loginDialogVisibleDetail) {
            loginContainerDetail.classList.remove("visible");
            loginDialogVisibleDetail = false;
        }
    });
</script>
<script>
    $(document).ready(function() {
        const errorBtn = $("#error_path");
        const errorModal = $("#error-modal");
        const closeErrorModal = $("#close-error-modal");

        errorBtn.on("click", function() {
            errorModal.show().removeClass("d-none");
        });

        closeErrorModal.on("click", function() {
            errorModal.hide().addClass("d-none");
        });

        $(window).on("click", function(event) {
            if ($(event.target).is(errorModal)) {
                errorModal.hide();
            }
        });

        $("#error-form").on("submit", function(event) {
            event.preventDefault();
            const message = $("#error-message").val();
            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            const url = $("#error_path").data("url");

            $.ajax({
                url: url,
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-CSRF-TOKEN": csrfToken
                },
                data: JSON.stringify({
                    message: message
                }),
                success: function(response) {
                    if (response.success) {
                        alert(response.message);
                        errorModal.hide();
                    } else {
                        alert("Error: " + response.message);
                        errorModal.hide();
                    }
                },
                error: function(error) {
                    console.error("Error:", error);
                }
            });
        });
    });


    // window.ggAdsEnabled = {{ isset($gg_ads) && $gg_ads ? 'true' : 'false' }};
    // (function() {
    //     const hasGoogleAds = typeof window.ggAdsEnabled !== 'undefined' ? window.ggAdsEnabled : false;

    //     document.addEventListener('DOMContentLoaded', function() {
    //         const downloadBtn = document.getElementById('download-btn');

    //         if (downloadBtn && hasGoogleAds) {
    //             downloadBtn.addEventListener('click', function(e) {
    //                 const adViewedTime = localStorage.getItem('adViewedTime');
    //                 const fiveMinutesAgo = Date.now() - (5 * 60 * 1000);
    //                 if (adViewedTime && parseInt(adViewedTime) > fiveMinutesAgo) {
    //                     return;
    //                 }
    //                 const adUrl = '/ads-page.html';
    //                 const newTab = window.open(adUrl, '_blank');
    //                 if (newTab) {
    //                     newTab.focus();
    //                 } else {
    //                     alert('Vui lòng cho phép popup để xem quảng cáo.');
    //                 }
    //                 localStorage.setItem('adViewedTime', Date.now());
    //             });
    //         }
    //     });
    // })();
</script>
@endsection