@extends('layouts.app')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-1" style="font-weight: 700; color: #222;">Form Checklist 1 (Toilet)</h4>
                <div class="text-muted" style="font-size: 14px;">
                    <i class="fa-solid fa-location-dot me-1" style="color: #0d8a72;"></i> {{ $location->name }} &nbsp;|&nbsp; 
                    <i class="fa-regular fa-calendar me-1" style="color: #0b4a99;"></i> {{ date('d M Y') }}
                    @if($location->shift_count > 1)
                        &nbsp;|&nbsp; <span class="badge" style="background-color: #0b4a99;">Shift {{ min($current_shift, $location->shift_count) }}</span>
                    @endif
                </div>
            </div>
            <div class="card-body">
                @if($is_done)
                    <div class="text-center py-5">
                        <i class="fa-solid fa-circle-check mb-3" style="font-size: 60px; color: #0d8a72;"></i>
                        <h5 style="font-weight: 600; color: #333;">Tugas Selesai!</h5>
                        <p class="text-muted mb-4">Checklist untuk ruangan ini pada hari ini telah Anda selesaikan. Terima kasih atas kerja keras Anda menjaga kebersihan rumah sakit!</p>
                        
                        <!-- Tombol untuk memindai ruangan lain -->
                        <a href="{{ route('dashboard') }}" class="btn py-3 text-white w-100" style="background-color: #0b4a99; border-radius: 12px; font-weight: 600; font-size: 16px;" onclick="event.preventDefault(); document.getElementById('clearSessionForm').submit();">
                            <i class="fa-solid fa-camera me-2"></i> Pindah ke Ruangan Lain
                        </a>
                        <form id="clearSessionForm" action="{{ route('dashboard') }}" method="GET" class="d-none">
                            <input type="hidden" name="clear_location" value="1">
                        </form>
                    </div>
                @else
                    <form action="{{ route('checklist.store') }}" method="POST">
                        @csrf
                        <input type="hidden" name="shift" value="{{ $current_shift }}">
                        <div class="alert alert-info mb-4" style="background-color: #f0f7f6; border: none; color: #0d6b79; font-weight: 500; border-radius: 8px;">
                            <i class="fa-solid fa-clipboard-list me-2"></i> Silakan centang aktivitas yang telah dilakukan hari ini:
                        </div>
                        
                        <div class="list-group mb-4">
                            @foreach($activities as $activity)
                            <label class="list-group-item d-flex gap-3 align-items-center" style="cursor: pointer; padding: 15px 20px; border-color: #f0f0f0; border-radius: 8px; margin-bottom: 8px;">
                                <input class="form-check-input flex-shrink-0 custom-checkbox" type="checkbox" name="activities[]" value="{{ $activity->id }}" style="width: 22px; height: 22px; cursor: pointer; margin-top:0;">
                                <span style="font-size: 15px; color: #444; font-weight: 500;">
                                    {{ $activity->name }}
                                </span>
                            </label>
                            @endforeach
                        </div>
                        
                        <button type="submit" class="btn btn-primary-custom w-100 py-3 mt-2" style="font-size: 16px; border-radius: 8px;">
                            <i class="fa-solid fa-check-double me-2"></i> Simpan Checklist
                        </button>
                    </form>
                @endif
            </div>
        </div>

    </div>
</div>

<style>
    .list-group-item {
        transition: all 0.2s;
    }
    .list-group-item:hover {
        background-color: #f8faf9;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    }
    .custom-checkbox:checked {
        background-color: #0b4a99;
        border-color: #0b4a99;
    }
</style>
@endsection