@extends('layouts.montir')

@section('content')
<div class="container d-flex flex-column justify-content-between" style="min-height:100vh; padding: 2rem 1rem;">

    <!-- Header / Progress -->
    <div class="mb-4 text-center">
        <div class="progress" style="height: 20px;">
            <div class="progress-bar bg-orange" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                20/20
            </div>
        </div>
        <h2 class="fw-bold mt-3 text-orange">Finalisasi</h2>
        <p class="text-muted mt-2">
            Pastikan data yang telah diisi sesuai dengan yang sebenarnya dan
            memenuhi SOP MerapiSpector
        </p>
    </div>

    <form action="{{ route('montir.inspection.finalisasi', $inspeksi->id) }}" method="POST">
        @csrf
        
        <!-- REKOMENDASI FINAL -->
        <div class="card shadow-sm border-0 mb-4" style="border-radius: 12px; overflow: hidden;">
            <div class="card-header bg-white py-3 border-bottom-0">
                <h5 class="card-title fw-bold text-dark m-0 d-flex align-items-center gap-2">
                    <i class="fas fa-clipboard-check text-orange"></i> Rekomendasi Akhir
                </h5>
            </div>
            <div class="card-body bg-light">
                
                <div class="mb-4">
                    <label class="form-label fw-bold text-uppercase text-secondary small">Status Kelayakan Unit</label>
                    <div class="d-flex flex-column gap-3">
                        <div class="p-3 bg-white rounded border shadow-sm d-flex align-items-center" onclick="document.getElementById('layak').click()" style="cursor: pointer; transition: 0.2s;" onmouseover="this.style.borderColor='#198754'" onmouseout="this.style.borderColor='#dee2e6'">
                            <input class="form-check-input me-3" type="radio" name="rekomendasi" id="layak" value="Layak" style="transform: scale(1.2);" {{ (old('rekomendasi', $inspeksi->rekomendasi) == 'Layak') ? 'checked' : '' }} required>
                            <label class="form-check-label text-success fw-bold flex-grow-1" for="layak" style="cursor: pointer;">
                                 <i class="fas fa-check-circle me-1"></i> LAYAK DIBELI / DIJUAL
                            </label>
                        </div>
                        
                        <div class="p-3 bg-white rounded border shadow-sm d-flex align-items-center" onclick="document.getElementById('tidak_layak').click()" style="cursor: pointer; transition: 0.2s;" onmouseover="this.style.borderColor='#dc3545'" onmouseout="this.style.borderColor='#dee2e6'">
                            <input class="form-check-input me-3" type="radio" name="rekomendasi" id="tidak_layak" value="Tidak Layak" style="transform: scale(1.2);" {{ (old('rekomendasi', $inspeksi->rekomendasi) == 'Tidak Layak') ? 'checked' : '' }}>
                            <label class="form-check-label text-danger fw-bold flex-grow-1" for="tidak_layak" style="cursor: pointer;">
                                 <i class="fas fa-times-circle me-1"></i> TIDAK LAYAK / TIDAK DIREKOMENDASIKAN
                            </label>
                        </div>
                    </div>
                </div>
                
                <div class="mb-2">
                    <label for="catatan_rekomendasi" class="form-label fw-bold text-uppercase text-secondary small">Catatan / Keterangan Tambahan</label>
                    <textarea class="form-control" name="catatan_rekomendasi" id="catatan_rekomendasi" rows="5" placeholder="Tuliskan alasan rekomendasi secara rinci. Contoh: Mesin halus, dokumen lengkap, namun ada perbaikan minor pada kaki-kaki." style="border-radius: 8px;" required>{{ old('catatan_rekomendasi', $inspeksi->catatan_rekomendasi) }}</textarea>
                </div>
            </div>
        </div>

        <!-- Validasi Checkbox -->
        <div class="d-flex justify-content-center mb-4 p-3 bg-white rounded shadow-sm border">
            <div class="form-check form-check-lg d-flex align-items-center">
                <input class="form-check-input me-2" type="checkbox" id="validasi" style="transform: scale(1.3);" required>
                <label class="form-check-label fw-bold text-secondary" for="validasi" style="cursor: pointer;">
                    Saya menyatakan data diatas benar & sesuai SOP.
                </label>
            </div>
        </div>

        <!-- Buttons -->
        <div class="d-flex gap-3 justify-content-center mb-4">
            <a href="{{ url()->previous() }}" class="btn btn-warning text-white fw-bold w-45 py-3 shadow-sm rounded-pill">
                <i class="fas fa-arrow-left me-1"></i> Back
            </a>
            <button type="submit" class="btn btn-secondary fw-bold w-45 py-3 shadow-sm rounded-pill" id="btnKirim" disabled>
                Selesai & Kirim <i class="fas fa-paper-plane ms-1"></i>
            </button>
        </div>
    </form>

    <!-- Footer -->
    <div class="text-center text-muted mb-3" style="font-size: 12px;">
        &copy; {{ date('Y') }} Inspeksi Mobil Jogja
    </div>

</div>
@endsection

@push('styles')
<style>
    /* Warna tema orange */
    .text-orange {
        color: #ff7a00 !important;
    }
    .bg-orange {
        background-color: #ff7a00 !important;
    }

    /* Tombol Kirim Animasi */
    #btnKirim {
        transition: all 0.25s ease-in-out;
    }

    #btnKirim.btn-success:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    /* Progress Bar */
    .progress {
        background-color: #f1f1f1;
        border-radius: 12px;
    }

    .progress-bar {
        border-radius: 12px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }

    /* Responsif mobile */
    @media(max-width: 576px){
        .w-45 {
            width: 100% !important;
        }
        .d-flex.gap-3 {
            flex-direction: column;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    const checkbox = document.getElementById('validasi');
    const btnKirim = document.getElementById('btnKirim');

    checkbox.addEventListener('change', function () {
        btnKirim.disabled = !this.checked;
        btnKirim.classList.toggle('btn-secondary', !this.checked);
        btnKirim.classList.toggle('btn-success', this.checked);
    });
</script>
@endpush