@extends('layouts.app')

@section('title', 'Riwayat Diagnosa')
@section('page-title', 'Riwayat Diagnosa')

@section('content')
<div id="tour-history-card" class="bg-white p-4 rounded-2xl border border-[#ede8df]" style="box-shadow:0 4px 16px rgba(26,58,42,.08);">
    <div class="flex justify-between items-center mb-5">
        <h3 class="text-lg font-bold" style="font-family:'Playfair Display',serif;color:#1a3a2a;">Daftar Riwayat</h3>
        <a href="{{ route('diagnosis.create') }}" id="tour-history-btn"
           class="px-4 py-2 rounded-full text-white font-semibold text-sm flex items-center gap-2 transition"
           style="background:#1a3a2a;box-shadow:0 4px 14px rgba(26,58,42,.25);"
           onmouseover="this.style.background='#2d6a4f'" onmouseout="this.style.background='#1a3a2a'">
            <i class="fas fa-plus"></i>
            <span class="hidden sm:inline">Diagnosa Baru</span>
        </a>
    </div>

    {{-- Mobile: card --}}
    <div class="block sm:hidden space-y-3">
        @forelse($diagnoses as $index => $diagnosis)
        <div class="p-4 rounded-xl border border-[#ede8df]">
            <div class="flex justify-between items-start mb-2">
                <div>
                    <p class="font-semibold text-sm" style="color:#1a3a2a;">{{ $diagnosis->plant_name }}</p>
                    <p class="text-xs mt-0.5" style="color:#5a7a67;">{{ $diagnosis->disease_name }}</p>
                </div>
                <span class="px-2 py-1 rounded-full text-xs font-semibold flex-shrink-0" style="background:#d8f3dc;color:#2d6a4f;">
                    {{ $diagnosis->confidence }}%
                </span>
            </div>
            <div class="flex justify-between items-center mt-3">
                <p class="text-xs" style="color:#8fa89a;">{{ $diagnosis->created_at->format('d/m/Y H:i') }}</p>
                <a href="{{ route('diagnosis.result', $diagnosis->id) }}"
                   class="text-xs font-semibold px-3 py-1.5 rounded-lg"
                   style="background:#f0fdf4;color:#2d6a4f;border:1px solid #b7ddc4;">
                    <i class="fas fa-eye mr-1"></i> Detail
                </a>
            </div>
        </div>
        @empty
        <div class="text-center py-10" style="color:#8fa89a;">
            <i class="fas fa-inbox text-4xl mb-3 block" style="color:#b7e4c7;"></i>
            <p class="mb-2">Belum ada riwayat diagnosa</p>
            <a href="{{ route('diagnosis.create') }}" style="color:#40916c;" class="text-sm font-medium">
                Mulai diagnosa pertama Anda
            </a>
        </div>
        @endforelse
    </div>

    {{-- Desktop: tabel --}}
    <div id="tour-history-table" class="hidden sm:block overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr style="background:#f8f4ee;border-bottom:2px solid #ede8df;">
                    <th class="text-left py-3 px-4" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">No</th>
                    <th class="text-left py-3 px-4" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Tanggal</th>
                    <th class="text-left py-3 px-4" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Nama Tanaman</th>
                    <th class="text-left py-3 px-4" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Penyakit</th>
                    <th class="text-left py-3 px-4" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Akurasi</th>
                    <th class="text-left py-3 px-4" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($diagnoses as $index => $diagnosis)
                <tr style="border-bottom:1px solid rgba(237,232,223,.6);" class="transition" onmouseover="this.style.background='rgba(216,243,220,.25)'" onmouseout="this.style.background=''">
                    <td class="py-3 px-4 text-sm" style="color:#8fa89a;">{{ $diagnoses->firstItem() + $index }}</td>
                    <td class="py-3 px-4 text-sm" style="color:#5a7a67;">{{ $diagnosis->created_at->format('d/m/Y H:i') }}</td>
                    <td class="py-3 px-4 text-sm font-medium" style="color:#1a3a2a;">{{ $diagnosis->plant_name }}</td>
                    <td class="py-3 px-4 text-sm" style="color:#1a2e22;">{{ $diagnosis->disease_name }}</td>
                    <td class="py-3 px-4">
                        <span class="px-3 py-1 rounded-full text-sm font-semibold" style="background:#d8f3dc;color:#2d6a4f;">
                            {{ $diagnosis->confidence }}%
                        </span>
                    </td>
                    <td class="py-3 px-4">
                        <a href="{{ route('diagnosis.result', $diagnosis->id) }}"
                           class="text-sm font-medium flex items-center gap-1 transition"
                           style="color:#40916c;"
                           onmouseover="this.style.color='#1a3a2a'" onmouseout="this.style.color='#40916c'">
                            <i class="fas fa-eye"></i> Detail
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center py-10" style="color:#8fa89a;">
                        <i class="fas fa-inbox text-4xl mb-3 block" style="color:#b7e4c7;"></i>
                        <p class="mb-2">Belum ada riwayat diagnosa</p>
                        <a href="{{ route('diagnosis.create') }}" style="color:#40916c;" class="hover:underline text-sm font-medium">
                            Mulai diagnosa pertama Anda
                        </a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($diagnoses->hasPages())
    <div class="mt-6">
        {{ $diagnoses->links() }}
    </div>
    @endif
</div>

<script>
/* ============================================================
   GUIDED TOUR — Halaman Riwayat
============================================================ */
const histTourSteps = [
    {
        title: 'Halaman Riwayat 📋',
        desc: 'Di sini tersimpan semua diagnosa yang pernah kamu lakukan. Yuk kita lihat apa saja yang ada!',
        target: null,
    },
    {
        title: 'Tabel Riwayat',
        desc: 'Tabel ini menampilkan <b>tanggal</b>, <b>nama tanaman</b>, <b>penyakit</b> yang terdeteksi, dan <b>tingkat akurasi</b>. Klik <b>Detail</b> untuk melihat hasil lengkapnya.',
        targetSel: '#tour-history-table',
        pos: 'bottom',
    },
    {
        title: 'Diagnosa Baru',
        desc: 'Mau diagnosa tanaman lagi? Klik tombol ini dan kamu langsung diarahkan ke halaman diagnosa.',
        targetSel: '#tour-history-btn',
        pos: 'bottom',
    },
];

let _hTourStep = 0;

function _hTourEl(id) { return document.getElementById(id); }
function _hTourFindTarget(step) {
    if (!step.targetSel) return null;
    return document.querySelector(step.targetSel);
}

function _hTourStart() {
    _hTourStep = 0;
    if (!_hTourEl('_htour_hl'))  { const d = document.createElement('div'); d.id = '_htour_hl';  document.body.appendChild(d); }
    if (!_hTourEl('_htour_tip')) { const d = document.createElement('div'); d.id = '_htour_tip'; document.body.appendChild(d); }
    if (!_hTourEl('_htour_dim')) { const d = document.createElement('div'); d.id = '_htour_dim'; document.body.appendChild(d); }
    _hTourRender();
}

function _hTourRender() {
    const step   = histTourSteps[_hTourStep];
    const total  = histTourSteps.length;
    const hl     = _hTourEl('_htour_hl');
    const tip    = _hTourEl('_htour_tip');
    const dim    = _hTourEl('_htour_dim');
    const target = _hTourFindTarget(step);

    dim.style.cssText = 'position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,0.52);pointer-events:auto;';

    if (target) {
        const r = target.getBoundingClientRect();
        const pad = 8;
        hl.style.cssText = `
            position:fixed;z-index:99992;pointer-events:none;
            top:${r.top-pad}px;left:${r.left-pad}px;
            width:${r.width+pad*2}px;height:${r.height+pad*2}px;
            border:2.5px solid #2d6a4f;border-radius:12px;
            box-shadow:0 0 0 9999px rgba(0,0,0,0.52);
            transition:all .35s ease;`;
        dim.style.background = 'transparent';
    } else {
        hl.style.cssText = 'display:none;';
    }

    const dots = Array.from({length:total}, (_, i) =>
        `<div style="width:${i===_hTourStep?16:6}px;height:6px;border-radius:3px;
         background:${i===_hTourStep?'#2d6a4f':'#d1d5db'};
         transition:all .3s;display:inline-block;margin-right:4px;"></div>`
    ).join('');

    let tipPos = 'top:50%;left:50%;transform:translate(-50%,-50%);';
    if (target) {
        const r  = target.getBoundingClientRect();
        const vw = window.innerWidth;
        const vh = window.innerHeight;
        if (step.pos === 'bottom' && r.bottom + 230 < vh)
            tipPos = `top:${r.bottom+16}px;left:${Math.max(16,Math.min(r.left,vw-310))}px;transform:none;`;
        else if (step.pos === 'top' && r.top - 230 > 0)
            tipPos = `top:${r.top-230}px;left:${Math.max(16,Math.min(r.left,vw-310))}px;transform:none;`;
        else if (step.pos === 'right' && r.right + 310 < vw)
            tipPos = `top:${Math.min(r.top,vh-260)}px;left:${r.right+16}px;transform:none;`;
        else
            tipPos = 'top:50%;left:50%;transform:translate(-50%,-50%);';
    }

    tip.style.cssText = `
        position:fixed;${tipPos}
        z-index:99999;background:#fff;border-radius:16px;
        padding:22px 24px;width:290px;
        box-shadow:0 12px 40px rgba(0,0,0,0.18);
        font-family:inherit;pointer-events:auto;`;

    tip.innerHTML = `
        <div style="font-size:11px;color:#2d6a4f;font-weight:700;text-transform:uppercase;
            letter-spacing:.8px;margin-bottom:6px;">
            Langkah ${_hTourStep+1} dari ${total}
        </div>
        <div style="font-size:15px;font-weight:700;color:#1a3a2a;margin-bottom:8px;
            font-family:'Playfair Display',serif;">
            ${step.title}
        </div>
        <div style="font-size:13px;color:#5a7a67;line-height:1.65;margin-bottom:18px;">
            ${step.desc}
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between;">
            <div>${dots}</div>
            <div style="display:flex;gap:10px;align-items:center;">
                <button onclick="_hTourEnd()"
                    style="background:none;border:none;font-size:12px;color:#9ca3af;cursor:pointer;padding:4px;">
                    Lewati
                </button>
                <button onclick="_hTourNext()"
                    style="background:#2d6a4f;color:#fff;border:none;
                    padding:9px 18px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;">
                    ${_hTourStep === total-1 ? 'Paham! ✓' : 'Lanjut →'}
                </button>
            </div>
        </div>`;
}

function _hTourNext() {
    _hTourStep++;
    if (_hTourStep >= histTourSteps.length) { _hTourEnd(); return; }
    _hTourRender();
}

function _hTourEnd() {
    ['_htour_hl','_htour_tip','_htour_dim'].forEach(id => {
        const el = _hTourEl(id);
        if (el) el.remove();
    });
    localStorage.setItem('sipakartebu_history_tour_done', '1');
}

window.addEventListener('load', function () {
    if (!localStorage.getItem('sipakartebu_history_tour_done')) {
        setTimeout(_hTourStart, 800);
    }
});

function ulangiTourRiwayat() {
    localStorage.removeItem('sipakartebu_history_tour_done');
    _hTourStart();
}
</script>

@endsection