@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">

    <!-- 🔝 Header Setup Section -->
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
        <div>
            <div class="d-flex align-items-center gap-2 mb-1">
                <i class="bi bi-laptop text-indigo-600 fs-4" style="color: #4f46e5;"></i>
                <h4 class="fw-bold text-dark mb-0">Employee Desk Terminal</h4>
            </div>
            <p class="text-muted small mb-0">Manage your daily attendance, active exhibition duties, and submissions.
            </p>
        </div>
        <span
            class="badge border border-primary-subtle text-primary-emphasis bg-primary-subtle px-3 py-2 rounded-pill shadow-sm"
            style="font-size: 0.8rem; font-weight: 600; background-color: rgba(79, 70, 229, 0.1); color: #4f46e5 !important;">
            <i class="bi bi-broadcast me-1 text-danger animate-pulse"></i> Live Tracking Active
        </span>
    </div>

    @if(session('success'))
    <div class="alert alert-success border-0 shadow-sm rounded-3 mb-4 d-flex align-items-center" role="alert">
        <i class="bi bi-check-circle-fill me-2"></i>
        <div>{{ session('success') }}</div>
    </div>
    @endif
    @if(session('error'))
    <div class="alert alert-danger border-0 shadow-sm rounded-3 mb-4 d-flex align-items-center" role="alert">
        <i class="bi bi-exclamation-triangle-fill me-2"></i>
        <div>{{ session('error') }}</div>
    </div>
    @endif

    <!-- 📊 ALERT: Pending Approvals Tracker -->
    @if($pending_reports_count > 0)
    <div class="alert alert-warning border-0 shadow-sm rounded-4 mb-4 p-3 d-flex align-items-center justify-content-between flex-wrap gap-2"
        style="background-color: #fffbeb; border-left: 4px solid #d97706 !important;">
        <div class="d-flex align-items-center">
            <i class="bi bi-exclamation-circle-fill text-warning fs-4 me-3" style="color: #d97706 !important;"></i>
            <div>
                <h6 class="mb-0 fw-bold text-dark">Reports Awaiting Review</h6>
                <small class="text-secondary">You currently have <strong>{{ $pending_reports_count }} daily
                        report(s)</strong> pending approval from your operations manager.</small>
            </div>
        </div>
    </div>
    @endif

    <div class="row g-4">
        <!-- Left Side: GPS Attendance Module -->
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm rounded-4 h-100 bg-white">
                <div class="card-header bg-white border-bottom py-3 px-4">
                    <div class="d-flex align-items-center gap-2">
                        <i class="bi bi-geo-alt-fill text-danger fs-5"></i>
                        <h5 class="mb-0 fw-bold text-dark">Exhibition Attendance</h5>
                    </div>
                </div>
                <div class="card-body p-4 text-center d-flex flex-column justify-content-between">
                    @if($assigned_exhibitions->isEmpty())
                    <div class="py-5 text-muted my-auto">
                        <i class="bi bi-calendar-x fs-1 d-block mb-3 text-secondary opacity-50"></i>
                        <h6 class="fw-semibold text-secondary">No Active Assignments</h6>
                        <p class="small text-muted mb-0">You are currently not assigned to any ongoing exhibitions.
                            Please contact your administrator for deployment details.</p>
                    </div>
                    @else
                    @php $current = $assigned_exhibitions->first(); @endphp

                    <!-- 📍 FIXED: Schema matching columns variables ($current->title and venue) to prevent runtime breakdown crashes -->
                    <div class="border border-light-subtle rounded-3 p-3 text-start mb-4 bg-white shadow-sm"
                        style="border-left: 4px solid #4f46e5 !important; background-color: #f8fafc !important;">
                        <span class="text-uppercase text-muted fw-bold d-block mb-1"
                            style="font-size: 10px; letter-spacing: 0.05em;">Current Active Duty</span>
                        <h6 class="fw-bold text-dark mb-1">{{ $current->title }}</h6>
                        <div class="d-flex align-items-center gap-1 text-muted small">
                            <i class="bi bi-building fs-6"></i>
                            <span>{{ $current->venue }}, {{ $current->city }}</span>
                        </div>
                    </div>

                    <div class="py-4 my-auto">
                        <form id="attendanceForm" method="POST" action="">
                            @csrf
                            <input type="hidden" name="exhibition_id" value="{{ $current->id }}">
                            <input type="hidden" name="latitude" id="lat_input">
                            <input type="hidden" name="longitude" id="lng_input">

                            @if(!$today_attendance)
                            <!-- 🟢 STATE 1: PUNCH CHECK-IN AVAILABLE -->
                            <button type="button" onclick="triggerGPS('{{ route('employee.attendance.checkin') }}')"
                                class="btn btn-success btn-lg px-5 py-3 fw-bold border-0 shadow-sm text-white"
                                style="border-radius: 10px; min-width: 240px; background-color: #10b981; transition: all 0.2s ease;">
                                <i class="bi bi-box-arrow-in-right me-2"></i> Punch Check-In
                            </button>
                            <p class="text-muted small mt-3 mb-0" style="font-size: 12px;">
                                <i class="bi bi-shield-check me-1"></i> Secure encrypted configuration will log your
                                live coordinates.
                            </p>

                            @elseif($today_attendance && !$today_attendance->time_out)
                            <!-- 🟡 STATE 2: ACTIVE SHIFT (ONLY CHECKED IN) -->
                            <div class="mb-4">
                                <span
                                    class="badge border border-success-subtle text-success bg-success-subtle px-4 py-2 rounded-pill fs-6"
                                    style="background-color: #f0fdf4; color: #16a34a !important; font-weight: 600;">
                                    <i class="bi bi-clock-history me-1"></i> Checked In at: {{
                                    \Carbon\Carbon::parse($today_attendance->time_in)->format('h:i A') }}
                                </span>
                            </div>
                            <button type="button" onclick="triggerGPS('{{ route('employee.attendance.checkout') }}')"
                                class="btn btn-danger btn-lg px-5 py-3 fw-bold border-0 shadow-sm text-white"
                                style="border-radius: 10px; min-width: 240px; background-color: #ef4444; transition: all 0.2s ease;">
                                <i class="bi bi-box-arrow-left me-2"></i> Punch Check-Out
                            </button>

                            @else
                            <!-- 🔴 STATE 3: SHIFT COMPLETED (BOTH TIMES RECORDED) -->
                            <div class="p-4 rounded-3 border border-success-subtle bg-success bg-opacity-10 text-success max-w-md mx-auto shadow-sm"
                                style="background-color: #f0fdf4;">
                                <i class="bi bi-check2-all fs-2 d-block mb-2 text-success"></i>
                                <h6 class="fw-bold mb-3 text-success">Shift Completed Successfully</h6>

                                <!-- Timeline Display Grid Metrics -->
                                <div class="row g-2 text-start max-w-xs mx-auto border-top pt-3 border-success-subtle">
                                    <div class="col-6">
                                        <small class="text-muted d-block font-monospace" style="font-size: 11px;">PUNCH
                                            IN:</small>
                                        <span class="fw-bold text-dark small"><i
                                                class="bi bi-box-arrow-in-right text-success me-1"></i>{{
                                            \Carbon\Carbon::parse($today_attendance->time_in)->format('h:i A') }}</span>
                                    </div>
                                    <div class="col-6 border-start ps-3">
                                        <small class="text-muted d-block font-monospace" style="font-size: 11px;">PUNCH
                                            OUT:</small>
                                        <span class="fw-bold text-dark small"><i
                                                class="bi bi-box-arrow-left text-danger me-1"></i>{{
                                            \Carbon\Carbon::parse($today_attendance->time_out)->format('h:i A')
                                            }}</span>
                                    </div>
                                </div>

                                <p class="small mb-0 text-secondary mt-3">Your operational attendance cycle for today
                                    has been securely locked. Exceptional work today!</p>
                            </div>
                            @endif
                        </form>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Right Side: Daily Operations Link Card -->
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm rounded-4 h-100 text-white" style="background-color: #1e1b4b;">
                <div class="card-body p-4 d-flex flex-column justify-content-between">
                    <div>
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <div class="bg-white bg-opacity-10 rounded-3 p-2">
                                <i class="bi bi-file-earmark-bar-graph fs-4 text-indigo-400"
                                    style="color: #818cf8;"></i>
                            </div>
                            <h5 class="fw-bold mb-0 text-white">Daily Reporting</h5>
                        </div>
                        <p class="text-white-50 small mb-4"
                            style="line-height: 1.6; color: rgba(255, 255, 255, 0.7) !important;">
                            Module 5 Architecture Requirement: Close your operational day loop by submitting verified
                            counts for total sales revenue, visitor metrics, and fresh business leads captured on the
                            ground.
                        </p>
                    </div>

                    <a href="{{ route('employee.report.create') }}"
                        class="btn bg-white text-indigo-900 w-100 py-3 fw-bold shadow-sm d-flex align-items-center justify-content-center gap-2"
                        style="border-radius: 10px; color: #1e1b4b; background-color: #ffffff; transition: all 0.2s ease; border: none;">
                        <i class="bi bi-plus-square-fill" style="color: #1e1b4b;"></i> Create Daily Report
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- GPS Handling Engine Script -->
<script>
    function triggerGPS(routeUrl) {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    document.getElementById('lat_input').value = position.coords.latitude;
                    document.getElementById('lng_input').value = position.coords.longitude;

                    let form = document.getElementById('attendanceForm');
                    form.action = routeUrl;
                    form.submit();
                }, function (error) {
                    alert('GPS Access Error: Please enable location services to punch attendance.');
                });
            } else {
                alert('Your browser does not support GPS Geolocation.');
            }
        }
</script>
@endsection