@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">
    <div class="card-header bg-white py-3">
        <h6 class="fw-semibold mb-0">
            <i class="bi bi-clock-history"></i>
            Semua Riwayat {{ $isMarketing ? 'Consumer Contact' : 'Input' }}
        </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>{{ $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>
                    @foreach($allMySessions as $session)
                    <tr>
                        <td class="fw-medium">{{ $session->panelTest->title }}</td>
                        <td>{{ $session->panelTest->product->name }}</td>
                        <td>{{ $session->respondent_name ?: '-' }}</td>
                        <td>{{ $session->completed_at->format('d M Y, H:i') }}</td>
                        <td><span class="badge bg-success">Selesai</span></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if($allMySessions->hasPages())
        <div class="p-3">{{ $allMySessions->links() }}</div>
        @endif
    </div>
</div>
@endif

@endsection