@extends('layouts.app')

@section('title', 'Jadwal & Lokasi TPS / Bank Sampah')

@section('styles')
<style>
    .calendar-day-card {
        border-radius: 1.25rem;
        border: 2px solid #e2e8f0;
        background: white;
        transition: all 0.3s ease;
    }
    .calendar-day-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }
    .day-badge {
        font-family: 'Fredoka', cursive, sans-serif;
        font-size: 1.1rem;
        padding: 0.5rem 1.25rem;
        border-radius: 999px;
        display: inline-block;
        margin-bottom: 0.75rem;
    }
    .time-slot {
        background: #f8fafc;
        border-radius: 0.75rem;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        border: 1px solid #e2e8f0;
        text-align: left;
    }
</style>
@endsection

@section('content')
<div class="container">
    <div class="text-center mb-5">
        <span class="badge bg-success bg-opacity-10 text-success font-heading px-3 py-2 rounded-pill mb-2">Informasi Layanan Desa</span>
        <h2 class="fw-bold font-heading text-success">Jadwal Pengangkutan, Lokasi TPS & Bank Sampah 🚛📍</h2>
        <p class="text-muted col-lg-8 mx-auto">Informasi resmi mengenai jam operasional pengangkutan sampah dan titik lokasi fasilitas pengelolaan sampah warga.</p>
    </div>

    <!-- 1. VISUAL WEEKLY CALENDAR -->
    <div class="card card-eco p-4 p-md-5 mb-5 border-top border-4 border-success">
        <div class="d-flex align-items-center gap-3 mb-4">
            <span class="fs-1">📅🚛</span>
            <div>
                <h4 class="fw-bold font-heading text-success mb-1">Jadwal Mingguan Mobil Pengangkut Sampah</h4>
                <small class="text-muted">Perhatikan hari dan lokasinya agar sampah di rumahmu terangkut ya!</small>
            </div>
        </div>

        <div class="row g-3">
            <!-- SENIN -->
            <div class="col-md-6 col-lg-3">
                <div class="calendar-day-card p-3 h-100 text-center border-top border-4 border-success">
                    <span class="day-badge bg-success text-white">Senin</span>
                    <div class="time-slot">
                        <span class="fw-bold text-success d-block small">🌅 Pagi:</span>
                        <small class="text-dark fw-bold">Pinggir Jln Raya (Arah Timur)</small>
                    </div>
                    <div class="time-slot">
                        <span class="fw-bold text-warning d-block small">🌇 Sore:</span>
                        <small class="text-dark fw-bold">Pinggir Jln Raya (Arah Barat)</small>
                    </div>
                </div>
            </div>

            <!-- SELASA -->
            <div class="col-md-6 col-lg-3">
                <div class="calendar-day-card p-3 h-100 text-center border-top border-4 border-warning">
                    <span class="day-badge bg-warning text-dark">Selasa</span>
                    <div class="time-slot">
                        <span class="fw-bold text-success d-block small">🌅 Pagi:</span>
                        <small class="text-dark fw-bold">Lingkungan RW 05</small>
                    </div>
                    <div class="time-slot">
                        <span class="fw-bold text-warning d-block small">🌇 Sore:</span>
                        <small class="text-dark fw-bold">Lingkungan RW 01</small>
                    </div>
                </div>
            </div>

            <!-- RABU -->
            <div class="col-md-6 col-lg-3">
                <div class="calendar-day-card p-3 h-100 text-center border-top border-4 border-info">
                    <span class="day-badge bg-info text-white">Rabu</span>
                    <div class="time-slot">
                        <span class="fw-bold text-success d-block small">🌅 Pagi:</span>
                        <small class="text-dark fw-bold">Lingkungan RW 04</small>
                    </div>
                    <div class="time-slot">
                        <span class="fw-bold text-warning d-block small">🌇 Sore:</span>
                        <small class="text-dark fw-bold">Lingkungan RW 02</small>
                    </div>
                </div>
            </div>

            <!-- KAMIS -->
            <div class="col-md-6 col-lg-3">
                <div class="calendar-day-card p-3 h-100 text-center border-top border-4 border-danger">
                    <span class="day-badge bg-danger text-white">Kamis</span>
                    <div class="time-slot bg-danger bg-opacity-10 border-danger border-opacity-25" style="height: calc(100% - 3.5rem); display: flex; flex-direction: column; justify-content: center;">
                        <span class="fw-bold text-danger d-block small mb-1">🧹 Sapu Bersih!</span>
                        <small class="text-dark fw-bold">Pengangkutan sisa sampah yang belum terangkut pada jadwal sebelumnya.</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="p-3 bg-light rounded-4 border border-success border-opacity-25 mt-4 text-center">
            <small class="text-muted fw-bold mb-0">
                <i class="fa-solid fa-circle-info text-success me-1"></i> Tips KKN: Letakkan sampah terpilahmu di wadah tertutup di depan rumah sebelum mobil pengangkut lewat ya!
            </small>
        </div>
    </div>

    <!-- 2. LOKASI TPS -->
    <div class="row justify-content-center mb-5">
        <!-- LOKASI TPS -->
        <div class="col-lg-8">
            <div class="card card-eco p-4 border-top border-4 border-primary">
                <div class="d-flex align-items-center gap-3 mb-3">
                    <div class="icon-box-lg bg-primary bg-opacity-10 text-primary">
                        📍
                    </div>
                    <div>
                        <h4 class="fw-bold font-heading mb-0 text-primary">Lokasi TPS Desa</h4>
                        <small class="text-muted">Tempat Pembuangan Sementara</small>
                    </div>
                </div>
                <h5 class="fw-bold text-dark mb-2">{{ $tps['nama'] }}</h5>
                <ul class="list-unstyled text-muted mb-4">
                    <li class="mb-2"><i class="fa-solid fa-location-dot text-primary me-2"></i> <strong>Alamat:</strong> {{ $tps['alamat'] }}</li>
                    <li class="mb-2"><i class="fa-solid fa-clock text-primary me-2"></i> <strong>Jam Operasional:</strong> {{ $tps['jam'] }}</li>
                    <li class="mb-2"><i class="fa-solid fa-trash-can text-primary me-2"></i> <strong>Keterangan:</strong> {{ $tps['keterangan'] }}</li>
                </ul>
                <div class="mt-auto">
                    <a href="{{ $tps['google_maps_url'] }}" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-lg w-100 rounded-pill fw-bold">
                        <i class="fa-solid fa-map-location-dot me-2"></i> 📍 Buka Google Maps
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection