@extends('layouts.app')

@section('title', 'History Watch - ' . config('app.name'))

@section('content')
<style>.delete-overlay{position:absolute;top:5px;right:5px;z-index:10;display:none}.btn-delete-item{background:rgb(220 53 69 / .9);color:#fff;border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:transform 0.2s}.btn-delete-item:hover{transform:scale(1.1);color:#fff}.edit-mode .card-drama{animation:shake 0.5s infinite}.card-img-overlay-top{position:absolute;bottom:.5rem;left:.5rem;padding:.15rem .5rem;font-size:.75rem;font-weight:700;color:#fff;background:var(--primary-color);border-radius:5px}@keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(0.5deg)}50%{transform:rotate(0deg)}75%{transform:rotate(-0.5deg)}100%{transform:rotate(0deg)}}</style>

<main class="container mt-3">
    <div class="d-flex justify-content-between align-items-center">
        <h4 class="section-title">{{ __('translate.history-title') }}</h4>
        <div class="d-flex gap-2">
            <button id="btn-edit" onclick="toggleEditMode()" class="btn btn-sm btn-outline-danger">
                <i class="bi bi-trash"></i> {{ __('translate.clear-history') }}
            </button>
            <button id="btn-clear-all" onclick="clearAllHistory()" class="btn btn-sm btn-danger" style="display:none;">
                <i class="bi bi-trash"></i> {{ __('translate.del-history') }}
            </button>
        </div>
    </div>
    
    <div class="alert alert-info alert-dismissible fade show border-0 shadow-sm" role="alert">
        <div class="d-flex align-items-center">
            <i class="bi bi-info-circle-fill me-3" style="font-size:30px;"></i>
            <div>
                <strong>Info:</strong> 
                {{ __('translate.info-history') }}
            </div>
        </div>
    </div>

    <div id="history-list" class="row row-cols-3 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 g-2">
        </div> 

    <div class="col-12 w-100 text-center py-5" id="empty-msg" style="display:none;">
        <i class="bi bi-clock-history text-muted" style="font-size: 3rem;"></i>
        <p class="text-muted mt-3">{{ __('translate.no-history') }}</p>
        <a href="/" class="btn btn-primary btn-sm">{{ __('translate.get-history') }}</a>
    </div>
</main>

<script>
let isEditMode = false;

function loadHistory() {
    const historyList = document.getElementById('history-list');
    const emptyMsg = document.getElementById('empty-msg');
    const data = JSON.parse(localStorage.getItem('watch_history')) || [];

    if (data.length === 0) {
        historyList.innerHTML = '';
        emptyMsg.style.display = 'block';
        document.getElementById('btn-edit').style.display = 'none';
        return;
    }

    emptyMsg.style.display = 'none';
    let html = '';
    data.forEach(item => {
        html += `
            <div class="col" id="item-${item.id}">
                <div class="card card-drama position-relative">
                    <div class="delete-overlay">
                        <button onclick="deleteItem('${item.id}')" class="btn-delete-item shadow">
                            <i class="bi bi-trash-fill"></i>
                        </button>
                    </div>

                    <a href="${item.url}">
                        <div class="position-relative">
                            <img src="${item.poster}" class="card-img-top" alt="${item.title}">
                            <span class="card-img-overlay-top d-none d-sm-block">Last: EP ${item.episode}</span>
                        </div>
                        <div class="card-body">
                            <h2 class="card-title text-truncate" style="font-size: 0.9rem;">${item.title}</h2>
                        </div>
                    </a>
                </div>
            </div>
        `;
    });
    
    historyList.innerHTML = html;
}
function toggleEditMode() {
    isEditMode = !isEditMode;
    const overlays = document.querySelectorAll('.delete-overlay');
    const historyList = document.getElementById('history-list');
    const btnEdit = document.getElementById('btn-edit');
    const btnClearAll = document.getElementById('btn-clear-all');

    if (isEditMode) {
        overlays.forEach(el => el.style.display = 'block');
        historyList.classList.add('edit-mode');
        btnEdit.innerHTML = '<i class="bi bi-x-circle"></i> Cancel';
        btnEdit.classList.replace('btn-outline-primary', 'btn-secondary');
        btnClearAll.style.display = 'block';
    } else {
        overlays.forEach(el => el.style.display = 'none');
        historyList.classList.remove('edit-mode');
        btnEdit.innerHTML = '<i class="bi bi-pencil-square"></i> Edit History';
        btnEdit.classList.replace('btn-secondary', 'btn-outline-primary');
        btnClearAll.style.display = 'none';
    }
}
function deleteItem(id) {
    let history = JSON.parse(localStorage.getItem('watch_history')) || [];
    history = history.filter(item => item.id !== id);
    localStorage.setItem('watch_history', JSON.stringify(history));
    const element = document.getElementById(`item-${id}`);
    element.style.opacity = '0';
    element.style.transform = 'scale(0.8)';
    setTimeout(() => {
        loadHistory();
        if (isEditMode) {
            isEditMode = false; 
            toggleEditMode();
        }
    }, 300);
}

function clearAllHistory() {
    if(confirm('Hapus semua riwayat tontonan?')) {
        localStorage.removeItem('watch_history');
        isEditMode = false;
        loadHistory();
    }
}

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