@extends('layouts.app')
@php $isMarketing = auth()->user()->unit_type === 'marketing'; @endphp
@section('title', $isMarketing ? 'Consumer Insight' : 'Isi Panel Test')
@section('content')

<div class="mb-4">
    <h4 class="fw-bold mb-1">
        {{ $isMarketing ? 'Consumer Contact Plan Aktif' : 'Panel Test Aktif' }}
    </h4>
    <p class="text-muted mb-0">
        {{ $isMarketing
            ? 'Pilih consumer contact plan dan input data setiap consumer'
            : 'Pilih panel test dan input data setiap responden' }}
    </p>
</div>

{{-- Notifikasi target tercapai --}}
@if($isMarketing)
@foreach($availableTests as $test)
@php
    $myCount = $test->testSessions->where('user_id', auth()->id())->where('status','completed')->count();
    $target  = $test->target_responden ?? 0;
@endphp
@if($target > 0 && $myCount >= $target)
<div class="alert alert-success alert-dismissible fade show d-flex align-items-center gap-3 mb-3"
    style="border-left:5px solid #16a34a">
    <div style="font-size:2rem">🎉</div>
    <div>
        <div class="fw-bold">Target Tercapai! — {{ $test->title }}</div>
        <div class="small">
            Anda telah menyelesaikan <strong>{{ $myCount }} consumer contact</strong>
            dari target <strong>{{ $target }}</strong>.
            Kerja bagus!
        </div>
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@elseif($target > 0 && $myCount > 0 && ($myCount / $target) >= 0.8)
<div class="alert alert-warning alert-dismissible fade show d-flex align-items-center gap-3 mb-3"
    style="border-left:5px solid #d97706">
    <div style="font-size:2rem">⚡</div>
    <div>
        <div class="fw-bold">Hampir Tercapai! — {{ $test->title }}</div>
        <div class="small">
            <strong>{{ $myCount }}/{{ $target }}</strong> consumer contact selesai.
            Kurang <strong>{{ $target - $myCount }}</strong> lagi untuk mencapai target!
        </div>
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif
@endforeach
@endif

{{-- Daftar Plan/Test Aktif --}}
@if($availableTests->count() > 0)
<div class="row g-3 mb-4">
    @foreach($availableTests as $test)
    @php
        $myCount = $test->testSessions->where('user_id', auth()->id())->where('status','completed')->count();
        $target  = $isMarketing ? ($test->target_responden ?? 0) : 0;
        $pct     = ($target > 0) ? min(100, round($myCount / $target * 100)) : 0;
        $pctColor = $pct >= 100 ? '#16a34a' : ($pct >= 80 ? '#d97706' : ($pct >= 50 ? '#2563eb' : '#94a3b8'));
    @endphp
    <div class="col-md-6">
        <div class="card h-100 border-0" style="box-shadow:0 2px 8px rgba(0,0,0,.08);
            {{ $target > 0 && $myCount >= $target ? 'border-top:3px solid #16a34a!important' : '' }}">
            <div class="card-body p-4">

                {{-- Header --}}
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <span class="badge bg-success px-2 py-1">Aktif</span>
                    <small class="text-muted">{{ $test->test_date->format('d M Y') }}</small>
                </div>

                <h5 class="fw-bold mb-1">{{ $test->title }}</h5>
                <p class="text-muted small mb-3">
                    <i class="bi bi-person-badge"></i> {{ $test->product->name }}
                    @if(!$isMarketing && $test->location)
                    &nbsp;|&nbsp; <i class="bi bi-geo-alt"></i> {{ $test->location }}
                    @endif
                </p>

                {{-- Progress pencapaian --}}
                @if($isMarketing && $target > 0)
                <div class="mb-3 p-3 rounded-3"
                    style="background:{{ $myCount >= $target ? '#f0fdf4' : '#eff6ff' }};
                           border:1.5px solid {{ $myCount >= $target ? '#bbf7d0' : '#bfdbfe' }}">

                    {{-- Label --}}
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="small fw-semibold" style="color:{{ $pctColor }}">
                            <i class="bi bi-{{ $myCount >= $target ? 'trophy-fill' : 'people-fill' }}"></i>
                            {{ $myCount >= $target ? 'TARGET TERCAPAI!' : 'Progres Consumer Contact' }}
                        </span>
                        <span class="badge" style="background:{{ $pctColor }};font-size:12px">
                            {{ $myCount }} / {{ $target }}
                        </span>
                    </div>

                    {{-- Progress bar --}}
                    <div class="progress mb-1" style="height:10px;border-radius:6px;background:#e2e8f0">
                        <div class="progress-bar" role="progressbar"
                            style="width:{{ $pct }}%;background:{{ $pctColor }};border-radius:6px;
                                   transition:width .5s ease"
                            aria-valuenow="{{ $pct }}" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>

                    {{-- Info bawah --}}
                    <div class="d-flex justify-content-between mt-1">
                        <small style="color:{{ $pctColor }};font-weight:600">{{ $pct }}%</small>
                        @if($myCount < $target)
                        <small class="text-muted">
                            Kurang <strong>{{ $target - $myCount }}</strong> lagi
                        </small>
                        @else
                        <small style="color:#16a34a;font-weight:600">
                            🎉 +{{ $myCount - $target }} melebihi target
                        </small>
                        @endif
                    </div>
                </div>

                @else
                {{-- Non-marketing: tampilkan responden biasa --}}
                <div class="p-2 rounded mb-3" style="background:#f0fdf4;border:1px solid #bbf7d0">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="small fw-medium text-success">
                            <i class="bi bi-people"></i> Responden diinput:
                        </span>
                        <span class="badge bg-success fs-6">{{ $myCount }} orang</span>
                    </div>
                </div>
                @endif

                {{-- Tombol aksi --}}
                <div class="d-flex align-items-center justify-content-between">
                    <small class="text-muted">
                        <i class="bi bi-question-circle"></i>
                        {{ $test->questions->count() }} pertanyaan
                    </small>
                    <a href="{{ route('test-sessions.show-start', $test) }}"
                        class="btn {{ $target > 0 && $myCount >= $target ? 'btn-success' : 'btn-primary' }}">
                        <i class="bi bi-{{ $target > 0 && $myCount >= $target ? 'check-circle' : 'plus-circle' }}"></i>
                        @if($target > 0 && $myCount >= $target)
                            Tambah Lagi
                        @elseif($myCount > 0)
                            Tambah {{ $isMarketing ? 'Consumer' : 'Responden' }}
                        @else
                            {{ $isMarketing ? 'Mulai Contact' : 'Mulai Input' }}
                        @endif
                    </a>
                </div>

            </div>
        </div>
    </div>
    @endforeach
</div>
@else
<div class="card mb-4">
    <div class="card-body text-center py-5">
        <i class="bi bi-clipboard-x fs-1 text-muted d-block mb-3"></i>
        <h5 class="text-muted">
            Belum ada {{ $isMarketing ? 'consumer contact plan' : 'panel test' }} aktif
        </h5>
    </div>
</div>
@endif

{{-- Sesi hari ini --}}
@if($mySessionsToday->count() > 0)
<div class="card mb-3">
    <div class="card-header bg-white py-3">
        <h6 class="fw-semibold mb-0">
            <i class="bi bi-calendar-check text-primary"></i>
            {{ $isMarketing ? 'Consumer Contact Hari Ini' : 'Input Hari Ini' }}
            — {{ today()->format('d M Y') }}
            <span class="badge bg-primary ms-2">{{ $mySessionsToday->count() }}</span>
        </h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>{{ $isMarketing ? 'Consumer Contact Plan' : 'Panel Test' }}</th>
                        <th>Nama {{ $isMarketing ? 'Consumer' : 'Responden' }}</th>
                        <th>Usia</th>
                        <th>Gender</th>
                        <th>Waktu</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($mySessionsToday as $i => $session)
                    <tr>
                        <td>{{ $i + 1 }}</td>
                        <td class="fw-medium">{{ $session->panelTest->title }}</td>
                        <td>{{ $session->respondent_name ?: '-' }}</td>
                        <td>{{ $session->respondent_age ? $session->respondent_age . ' th' : '-' }}</td>
                        <td>{{ $session->respondent_gender ?: '-' }}</td>
                        <td>
                            <small>
                                {{ $session->completed_at
                                    ? $session->completed_at->format('H:i')
                                    : 'Belum selesai' }}
                            </small>
                        </td>
                        <td>
                            @if($session->status === 'completed')
                                <span class="badge bg-success">Selesai</span>
                            @else
                    <div class="d-flex flex-column gap-1" style="min-width:130px">
                        <a href="{{ route('test-sessions.resume', $session) }}"
                            class="btn btn-sm btn-primary d-flex align-items-center justify-content-center gap-1"
                            style="border-radius:8px;font-size:12px;font-weight:600;padding:5px 12px">
                            <i class="bi bi-play-circle-fill"></i> Lanjutkan
                        </a>
                        <form method="POST"
                            action="{{ route('test-sessions.cancel', $session) }}"
                            onsubmit="return confirm('Batalkan session ini? Data akan dihapus.')">
                            @csrf @method('DELETE')
                            <button type="submit"
                                class="btn btn-sm btn-outline-danger d-flex align-items-center justify-content-center gap-1 w-100"
                                style="border-radius:8px;font-size:12px;font-weight:600;padding:5px 12px">
                                <i class="bi bi-x-circle"></i> Batalkan
                            </button>
                        </form>
                    </div>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

{{-- Semua Riwayat --}}
@if($allMySessions->count() > 0)
<div class="card mt-3">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
        <h6 class="fw-semibold mb-0">
            <i class="bi bi-clock-history"></i>
            Semua Riwayat {{ $isMarketing ? 'Consumer Contact' : 'Input' }}
            <span class="badge bg-secondary ms-1" id="riwayatCount">{{ $allMySessions->count() }}</span>
        </h6>
    </div>
    <div class="card-body border-bottom py-3">
        <div class="row g-2">
            <div class="col-md-3">
                <label class="form-label small text-muted mb-1">Tanggal</label>
                <input type="date" id="filterTanggal" class="form-control form-control-sm" onchange="filterRiwayat()">
            </div>
            <div class="col-md-4">
                <label class="form-label small text-muted mb-1">{{ $isMarketing ? 'Consumer Contact Plan' : 'Panel Test' }}</label>
                <select id="filterPlan" class="form-select form-select-sm" onchange="filterRiwayat()">
                    <option value="">-- Semua --</option>
                    @foreach($allMySessions->pluck('panelTest.title')->unique()->sort() as $title)
                    <option value="{{ strtolower($title) }}">{{ $title }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small text-muted mb-1">Status</label>
                <select id="filterStatus" class="form-select form-select-sm" onchange="filterRiwayat()">
                    <option value="">Semua</option>
                    <option value="completed">Selesai</option>
                    <option value="in_progress">Berlangsung</option>
                </select>
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button onclick="resetRiwayat()" class="btn btn-outline-secondary btn-sm w-100">
                    <i class="bi bi-x-lg"></i> Reset
                </button>
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="riwayatTable">
                <thead class="table-light">
                    <tr>
                        <th width="40">#</th>
                        <th>{{ $isMarketing ? 'Consumer Contact Plan' : 'Panel Test' }}</th>
                        <th>{{ $isMarketing ? 'APS/SPG/TL' : 'Produk' }}</th>
                        <th>Nama {{ $isMarketing ? 'Consumer' : 'Responden' }}</th>
                        <th>Tanggal</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody id="riwayatBody">
                    @foreach($allMySessions as $i => $session)
                    <tr class="riwayat-row"
                        data-plan="{{ strtolower($session->panelTest->title) }}"
                        data-status="{{ $session->status }}"
                        data-tanggal="{{ $session->completed_at ? $session->completed_at->format('Y-m-d') : '' }}">
                        <td class="text-muted riwayat-no" style="font-size:13px">{{ $i + 1 }}</td>
                        <td class="fw-medium">{{ $session->panelTest->title }}</td>
                        <td style="font-size:13px">{{ $session->panelTest->product->name }}</td>
                        <td style="font-size:13px">{{ $session->respondent_name ?: '-' }}</td>
                        <td style="font-size:13px">{{ $session->completed_at ? $session->completed_at->format('d M Y, H:i') : '-' }}</td>
                        <td>
                            @if($session->status === 'completed')
                                <span class="badge bg-success" style="font-size:11px">Selesai</span>
                            @else
                                <span class="badge bg-warning text-dark" style="font-size:11px">Berlangsung</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <div id="riwayatEmpty" class="text-center py-4 text-muted" style="display:none">
                <i class="bi bi-search fs-3 d-block mb-2"></i> Tidak ada data yang cocok
            </div>
        </div>
        <div class="card-footer bg-white py-2">
            <small class="text-muted" id="riwayatInfo">Total: {{ $allMySessions->count() }} data</small>
        </div>
    </div>
</div>
@endif

@push('scripts')
<script>
function filterRiwayat() {
    const tanggal = document.getElementById('filterTanggal').value;
    const plan    = document.getElementById('filterPlan').value.toLowerCase();
    const status  = document.getElementById('filterStatus').value;
    const rows    = document.querySelectorAll('.riwayat-row');
    let visible   = 0;
    rows.forEach(row => {
        const match = (!plan    || row.dataset.plan.includes(plan)) &&
                      (!status  || row.dataset.status === status) &&
                      (!tanggal || row.dataset.tanggal === tanggal);
        row.style.display = match ? '' : 'none';
        if (match) { visible++; row.querySelector('.riwayat-no').textContent = visible; }
    });
    document.getElementById('riwayatEmpty').style.display = visible === 0 ? 'block' : 'none';
    document.getElementById('riwayatCount').textContent   = visible;
    document.getElementById('riwayatInfo').textContent    = 'Menampilkan ' + visible + ' dari ' + rows.length + ' data';
}
function resetRiwayat() {
    document.getElementById('filterTanggal').value = '';
    document.getElementById('filterPlan').value    = '';
    document.getElementById('filterStatus').value  = '';
    filterRiwayat();
}
</script>
@endpush

@endsection