@extends('page.user-dashboard.app')

@section('content_dash')
@push('css')
        <script src="{{ asset('assets/js/sweetalert2.min.js') }}"></script>
        
@endpush
@push('js')
     <link rel="stylesheet" href="{{ asset('assets/css/sweetalert2.min.css') }}">
@endpush

<div class="p-6 bg-white rounded-xl shadow-sm">
    <div class="mb-6">
        <h2 class="text-2xl font-bold text-gray-800">
            {{ __('dashboard.saved_videos') }}
        </h2>
        <p class="text-gray-600 mt-1">{{ __('dashboard.saved_videos_desc') }}</p>
    </div>

    <ul id="savedVideosContainer" class="space-y-3">
        <!-- Saved videos injected here -->
    </ul>

    <div id="noSavedVideos" class="flex flex-col items-center justify-center p-8 text-center hidden border border-dashed border-gray-300 rounded-xl">
    <img src="{{asset('assets/images/no-order.png')}}" class="w-[100px] mb-3" alt="">
        <h3 class="text-base font-medium text-gray-700 mb-1">{{ __('dashboard.no_saved_videos') }}</h3>
        <p class="text-gray-500 text-sm">{{ __('dashboard.no_saved_videos_desc') }}</p>
    </div>
</div>

<script>
function renderSavedVideos() {
    const container = document.getElementById('savedVideosContainer');
    const noVideos = document.getElementById('noSavedVideos');
    container.innerHTML = '';

    let savedVideos = JSON.parse(localStorage.getItem('savedVideos')) || [];

    if(savedVideos.length === 0){
        noVideos.classList.remove('hidden');
        return;
    } else {
        noVideos.classList.add('hidden');
    }

    // Show latest saved first
    savedVideos.slice().reverse().forEach((video, index) => {
        const li = document.createElement('li');
        li.className = "flex items-start md:items-center justify-between md:flex-row flex-col p-4 bg-gray-50 rounded-lg shadow-sm hover:bg-gray-100 transition gap-2";

        li.innerHTML = `
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 flex items-center justify-center bg-blue-100 rounded-lg flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M8 5v14l11-7z" />
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-800 line-clamp-1">${video.title}</span>
            </div>
            <div class="flex items-center gap-5 justify-between w-full md:w-fit">
                   <button onclick="removeVideo(${index})" class="text-gray-400 hover:text-red-500 transition cursor-pointer ">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
                <a href="${video.url}" target="_blank" class="text-sm bg-primary/20 text-primary font-semibold px-4 py-2 rounded-md hover:underline">
                    {{ __('dashboard.watch_video') }}
                </a>
             
            </div>
        `;

        container.appendChild(li);
    });
}
const messages = {
    confirmTitle: "{{ __('dashboard.saved_video_confirm_title') }}",
    confirmText: "{{ __('dashboard.saved_video_confirm_text') }}",
    confirmButton: "{{ __('dashboard.saved_video_confirm_button') }}",
    cancelButton: "{{ __('dashboard.saved_video_cancel_button') }}",
    removedTitle: "{{ __('dashboard.saved_video_removed_title') }}",
    removedText: "{{ __('dashboard.saved_video_removed_text') }}"
};

function removeVideo(index) {
    Swal.fire({
        title: messages.confirmTitle,
        text: messages.confirmText,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#6d32dc',
        cancelButtonColor: '#d33',
        confirmButtonText: messages.confirmButton,
        cancelButtonText: messages.cancelButton
    }).then((result) => {
        if (result.isConfirmed) {
            let savedVideos = JSON.parse(localStorage.getItem('savedVideos')) || [];
            savedVideos.splice(savedVideos.length - 1 - index, 1);
            localStorage.setItem('savedVideos', JSON.stringify(savedVideos));
            renderSavedVideos();

            Swal.fire(
                messages.removedTitle,
                messages.removedText,
                'success'
            );
        }
    });

}


document.addEventListener('DOMContentLoaded', renderSavedVideos);
</script>
@endsection