@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;">{{ $blok_title }}</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(count($submitted_sub_locations) >= count($sub_locations) || $is_done)
                    <div class="alert alert-success mb-4" style="background-color: #e8f5e9; border: 1px solid #c8e6c9; color: #2e7d32; border-radius: 8px; padding: 20px;">
                        <div class="d-flex align-items-center">
                            <i class="fa-solid fa-circle-check me-3" style="font-size: 32px;"></i>
                            <div>
                                <h5 class="mb-1" style="font-weight: 700;">Checklist Selesai!</h5>
                                <p class="mb-0" style="font-size: 15px;">Semua lokasi di blok ini telah selesai dibersihkan untuk hari ini. Terima kasih atas kerja keras Anda!</p>
                            </div>
                        </div>
                    </div>
                    <div class="text-center mt-4 mb-3">
                        <a href="{{ route('dashboard', ['clear_location' => 1]) }}" class="btn btn-outline-secondary px-4 py-2" style="border-radius: 8px; font-weight: 500;">
                            <i class="fa-solid fa-arrow-left me-2"></i> Tutup & Kembali
                        </a>
                    </div>
                @else
                    <form action="{{ route('checklist.store') }}" method="POST">
                        @csrf
                        <!-- Tambahkan hidden input penanda bahwa ini form bulk/blok -->
                        <input type="hidden" name="is_bulk_locations" value="1">
                        <input type="hidden" name="parent_location_id" value="{{ $location->id }}">
                        <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 ruangan yang telah dibersihkan hari ini:
                        </div>
                        
                        <div class="list-group mb-4">
                            @foreach($sub_locations as $loc_name)
                            @php
                                $isChecked = in_array($loc_name, $submitted_sub_locations);
                            @endphp
                            <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; {{ $isChecked ? 'background-color: #f8faf9; opacity: 0.8;' : '' }}">
                                <input class="form-check-input flex-shrink-0 custom-checkbox" type="checkbox" name="sub_locations[]" value="{{ $loc_name }}" style="width: 22px; height: 22px; cursor: pointer; margin-top:0;" {{ $isChecked ? 'checked disabled' : '' }}>
                                <span style="font-size: 15px; color: #444; font-weight: 500;">
                                    {{ $loc_name }}
                                </span>
                                @if($isChecked)
                                    <span class="badge bg-success ms-auto"><i class="fa-solid fa-check"></i> Selesai</span>
                                @endif
                            </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