@extends('layouts.app')

@section('title', 'Servis Check — ' . $equipment->code)

@section('content')
<style>
    .mech-container {
        max-width: 620px;
        margin: 20px auto;
    }
    .mech-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
        overflow: hidden;
        margin-bottom: 16px;
    }
    .mech-header {
        padding: 16px 20px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .mech-header-back { text-decoration: none; color: #333; font-size: 20px; font-weight: bold; }
    .mech-header-title { font-size: 17px; font-weight: 700; margin: 0; color: #111; }
    .mech-header-sub { font-size: 12px; color: #6b7280; margin: 0; }

    .mech-info-band {
        display: flex;
        gap: 0;
        border-bottom: 6px solid #f9fafb;
    }
    .mech-info-cell {
        flex: 1;
        padding: 12px 20px;
        border-right: 1px solid #f0f0f0;
    }
    .mech-info-cell:last-child { border-right: none; }
    .mech-info-label { font-size: 11px; color: #9ca3af; text-transform: uppercase; font-weight: 600; margin: 0 0 2px; }
    .mech-info-value { font-size: 14px; font-weight: 700; color: #111; margin: 0; }

    /* Status Badge */
    .badge-active   { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
    .badge-damaged  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
    .badge-standby  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
    .badge { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 11px; font-weight: 700; }

    /* Active Repair Banner */
    .repair-banner {
        background: #fef2f2;
        border-bottom: 1px solid #fecaca;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: #991b1b;
    }

    /* Action Section */
    .action-section { padding: 20px; }
    .action-title { font-size: 13px; font-weight: 700; text-transform: uppercase; color: #6b7280; letter-spacing: 0.05em; margin: 0 0 12px; }

    .action-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
    .action-option {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
        border: 2px solid #e5e7eb;
        border-radius: 10px;
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s;
        background: #fafafa;
    }
    .action-option:hover { border-color: #93c5fd; background: #eff6ff; }
    .action-option input[type="radio"] { margin-top: 3px; accent-color: #1d4ed8; width: 16px; height: 16px; flex-shrink: 0; }
    .action-option.selected { border-color: #1d4ed8; background: #eff6ff; }
    .action-label { font-size: 14px; font-weight: 600; color: #111; }
    .action-desc  { font-size: 12px; color: #6b7280; margin-top: 2px; }

    /* Checklist */
    .checklist-section { border-top: 6px solid #f9fafb; padding: 20px; }
    .checklist-title { font-size: 13px; font-weight: 700; text-transform: uppercase; color: #6b7280; letter-spacing: 0.05em; margin: 0 0 12px; }
    .checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    @media (max-width: 480px) { .checklist-grid { grid-template-columns: 1fr; } }

    .checklist-item {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 10px 12px;
    }
    .checklist-item-label { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; display: block; }
    .checklist-item select {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 5px 8px;
        font-size: 12px;
        background: white;
        color: #374151;
    }

    /* Notes */
    .notes-section { padding: 0 20px 20px; }
    .notes-label { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; display: block; }
    .notes-textarea {
        width: 100%;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 14px;
        font-family: inherit;
        resize: vertical;
    }

    /* Submit */
    .submit-section { padding: 16px 20px; border-top: 6px solid #f9fafb; }
    .btn-submit {
        width: 100%;
        background: #1d4ed8;
        color: white;
        border: none;
        padding: 14px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s;
    }
    .btn-submit:hover { background: #1e40af; }
</style>

<div style="padding: 20px;">
    <div class="mech-container">
        <div class="mech-card">

            {{-- Header --}}
            <div class="mech-header">
                <a href="{{ route('mechanic.scan.select') }}" class="mech-header-back">&larr;</a>
                <div>
                    <p class="mech-header-title">🔧 Servis Check</p>
                    <p class="mech-header-sub">{{ $equipment->code }} — {{ $equipment->name }}</p>
                </div>
            </div>

            {{-- Info Band --}}
            <div class="mech-info-band">
                <div class="mech-info-cell">
                    <p class="mech-info-label">Status Alat</p>
                    <p class="mech-info-value">
                        <span class="badge {{ $equipment->status === 'damaged' ? 'badge-damaged' : ($equipment->status === 'active' ? 'badge-active' : 'badge-standby') }}">
                            {{ $equipment->status === 'damaged' ? 'Rusak' : ($equipment->status === 'active' ? 'Aktif' : 'Stand By') }}
                        </span>
                    </p>
                </div>
                <div class="mech-info-cell">
                    <p class="mech-info-label">Lokasi</p>
                    <p class="mech-info-value">{{ $equipment->location?->name ?? '—' }}</p>
                </div>
                <div class="mech-info-cell">
                    <p class="mech-info-label">Operator</p>
                    <p class="mech-info-value">{{ $equipment->operator?->name ?? '—' }}</p>
                </div>
            </div>

            {{-- Active Repair Banner --}}
            @if($activeRepair)
            <div class="repair-banner">
                <span style="font-size:18px;">🛠️</span>
                <div>
                    <strong>Ada perbaikan aktif</strong> — Status: {{ ucfirst(str_replace('_', ' ', $activeRepair->status)) }}
                    @if($activeRepair->mechanic_notes)
                        <br><span style="font-weight:400;">Keluhan: {{ $activeRepair->mechanic_notes }}</span>
                    @endif
                </div>
            </div>
            @else
            <div style="background:#f0fdf4; border-bottom:1px solid #bbf7d0; padding:12px 20px; font-size:13px; color:#166534;">
                ✅ Tidak ada perbaikan aktif untuk alat ini.
            </div>
            @endif

            {{-- Flash messages --}}
            @if(session('success'))
                <div style="margin:12px 20px 0; background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; padding:10px 14px; border-radius:8px; font-size:13px;">
                    {{ session('success') }}
                </div>
            @endif

            <form method="POST" action="{{ route('mechanic.scan.store', $equipment) }}">
                @csrf

                {{-- Action Selection --}}
                <div class="action-section">
                    <p class="action-title">🎯 Pilih Aksi Servis</p>
                    <div class="action-options" id="actionOptions">
                        <label class="action-option" onclick="selectAction(this)">
                            <input type="radio" name="action" value="start" {{ !$activeRepair ? 'checked' : '' }}>
                            <div>
                                <div class="action-label">🚀 Mulai Dikerjakan</div>
                                <div class="action-desc">Tandai alat mulai masuk proses perbaikan</div>
                            </div>
                        </label>
                        <label class="action-option" onclick="selectAction(this)">
                            <input type="radio" name="action" value="progress" {{ $activeRepair ? 'checked' : '' }}>
                            <div>
                                <div class="action-label">🔄 Lanjut Dikerjakan</div>
                                <div class="action-desc">Catat  update/progres pengerjaan yang sudah dilakukan</div>
                            </div>
                        </label>
                        <label class="action-option" onclick="selectAction(this)">
                            <input type="radio" name="action" value="close">
                            <div>
                                <div class="action-label">✅ Selesai / Close</div>
                                <div class="action-desc">Alat selesai diperbaiki — Supervisor akan dikonfirmasi untuk reaktivasi alat</div>
                            </div>
                        </label>
                    </div>
                </div>

                {{-- Checklist Items --}}
                <div class="checklist-section">
                    <p class="checklist-title">
                        📋 Checklist Bagian yang Diservis
                        <span id="checklistHint" style="font-size:11px; font-weight:400; margin-left:8px; color:#ef4444; display:none;">(Wajib isi minimal 1 item)</span>
                    </p>
                    <p id="checklistOptionalHint" style="font-size:12px; color:#6b7280; margin:0 0 12px; display:none;">Opsional — Anda bisa langsung simpan tanpa mengisi checklist.</p>
                    <div class="checklist-grid">
                        @foreach($checklistItems as $key => $label)
                        <div class="checklist-item">
                            <span class="checklist-item-label">{{ $label }}</span>
                            <select name="checklist[{{ $key }}]">
                                <option value="">— Tidak Diperiksa —</option>
                                <option value="dikerjakan">🔧 Sedang Dikerjakan</option>
                                <option value="selesai">✅ Selesai</option>
                                <option value="tidak_perlu">⏭️ Tidak Perlu</option>
                            </select>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{-- Catatan --}}
                <div class="notes-section">
                    <label class="notes-label" for="notes">📝 Catatan Servis (Opsional)</label>
                    <textarea id="notes" name="notes" rows="3" class="notes-textarea" placeholder="Jelaskan apa yang dikerjakan, bagian yang diganti, kendala, dll...">{{ old('notes') }}</textarea>
                </div>

                {{-- Submit --}}
                <div class="submit-section">
                    <button type="submit" class="btn-submit">Simpan &amp; Kirim →</button>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
    function updateUI(action) {
        const hintRequired = document.getElementById('checklistHint');
        const hintOptional = document.getElementById('checklistOptionalHint');
        const btnSubmit    = document.querySelector('.btn-submit');

        if (action === 'progress') {
            // Lanjut: checklist opsional
            hintRequired.style.display = 'none';
            hintOptional.style.display = 'block';
            btnSubmit.textContent = '🔄 Simpan Progres →';
            btnSubmit.style.background = '#0369a1';
        } else if (action === 'start') {
            // Mulai: checklist dianjurkan, tapi tidak hard-required di client
            hintRequired.style.display = 'inline';
            hintOptional.style.display = 'none';
            btnSubmit.textContent = '🚀 Mulai Perbaikan →';
            btnSubmit.style.background = '#1d4ed8';
        } else if (action === 'close') {
            // Close: checklist penting
            hintRequired.style.display = 'inline';
            hintOptional.style.display = 'none';
            btnSubmit.textContent = '✅ Selesai & Kirim ke Supervisor →';
            btnSubmit.style.background = '#15803d';
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        const radios = document.querySelectorAll('input[name="action"]');

        radios.forEach(radio => {
            radio.addEventListener('change', function() {
                document.querySelectorAll('.action-option').forEach(el => el.classList.remove('selected'));
                this.closest('.action-option').classList.add('selected');
                updateUI(this.value);
            });
        });

        // Init on load
        const checked = document.querySelector('input[name="action"]:checked');
        if (checked) {
            checked.closest('.action-option').classList.add('selected');
            updateUI(checked.value);
        }
    });
</script>
@endsection