@extends('layouts.app')

@section('title', 'Pre-Start Check - ' . $equipment->name)

@section('content')
<div style="background-color: #dcdcdc; min-height: 100vh; padding: 2.5rem 1rem;">
    <div style="max-width: 1400px; margin: 0 auto;">

        <!-- Form wrapping everything so all inputs are submitted -->
        <form method="POST" action="{{ route('equipment.scan.store', $equipment) }}" style="margin: 0;">
            @csrf

            <!-- Grid Container -->
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1.25rem; align-items: start;">

                <!-- INFO BLOCK -->
                <div style="background-color: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); color: #374151;">
                    <div style="font-size: 16px; font-weight: 500; margin-bottom: 4px;">{{ $equipment->name }} ({{ $equipment->code }})</div>
                    <div style="font-size: 14px; margin-bottom: 2px;">KODE ALAT : {{ $equipment->code }}</div>
                    <div style="font-size: 14px; margin-bottom: 2px;">LOKASI DEFAULT: {{ $equipment->location?->name ?? '—' }}</div>
                    <div style="font-size: 14px;">SHIFT : {{ now()->hour < 13 ? 'Pagi - 00.00 WIB' : 'Siang - 12.00 WIB' }}</div>
                </div>

                <!-- Input: Lokasi Terkini -->
                <div style="background-color: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
                    <div style="font-size: 14px; color: #374151; margin-bottom: 4px;">Lokasi Terkini</div>
                    <div style="font-size: 12px; color: #6b7280; margin-bottom: 12px;">Posisikan alat berada di mana saat ini</div>
                    <select name="location_id" style="width: 100%; border: none; background-color: #e5e7eb; border-radius: 6px; padding: 10px 14px; font-size: 13px; color: #4b5563; outline: none; appearance: auto;" required>
                        <option value="">Pilih</option>
                        @foreach($locations ?? [] as $loc)
                            <option value="{{ $loc->id }}" @selected(old('location_id', $equipment->location_id) == $loc->id)>{{ $loc->name }}</option>
                        @endforeach
                    </select>
                    @error('location_id')<p style="font-size: 12px; color: #ef4444; margin-top: 6px; margin-bottom: 0;">{{ $message }}</p>@enderror
                </div>

                <!-- Input: Status Alat -->
                <div style="background-color: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
                    <div style="font-size: 14px; color: #374151; margin-bottom: 4px;">Status Alat</div>
                    <div style="font-size: 12px; color: #6b7280; margin-bottom: 12px;">Pilih Status Kondisi Terkini</div>
                    <select name="status" style="width: 100%; border: none; background-color: #e5e7eb; border-radius: 6px; padding: 10px 14px; font-size: 13px; color: #4b5563; outline: none; appearance: auto;">
                        <option value="">Pilih</option>
                        @foreach($statusOptions ?? [] as $value => $label)
                            <option value="{{ $value }}" @selected(old('status') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('status')<p style="font-size: 12px; color: #ef4444; margin-top: 6px; margin-bottom: 0;">{{ $message }}</p>@enderror
                </div>

                <!-- Input: Open / Close -->
                <div style="background-color: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
                    <div style="font-size: 14px; color: #374151; margin-bottom: 4px;">Open / Close</div>
                    <div style="font-size: 12px; color: #6b7280; margin-bottom: 12px;">Pilih Status Open/Close</div>
                    <select name="open_close" style="width: 100%; border: none; background-color: #e5e7eb; border-radius: 6px; padding: 10px 14px; font-size: 13px; color: #4b5563; outline: none; appearance: auto;">
                        <option value="">Pilih</option>
                        @foreach($openCloseOptions ?? [] as $value => $label)
                            <option value="{{ $value }}" @selected(old('open_close') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('open_close')<p style="font-size: 12px; color: #ef4444; margin-top: 6px; margin-bottom: 0;">{{ $message }}</p>@enderror
                </div>

                <!-- Input: Hour Meter Aktual -->
                <div style="background-color: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
                    <div style="font-size: 14px; color: #374151; margin-bottom: 12px;">Hour meter hari ini (HM aktual)</div>
                    <input type="number" step="0.01" min="0" name="hour_meter" value="{{ old('hour_meter') }}" placeholder="Jawaban Anda" 
                           style="width: 100%; border: 1px solid #d1d5db; background-color: white; border-radius: 6px; padding: 8px 12px; font-size: 13px; color: #4b5563; outline: none;">
                    @error('hour_meter')<p style="font-size: 12px; color: #ef4444; margin-top: 6px; margin-bottom: 0;">{{ $message }}</p>@enderror
                </div>

                <!-- Input: Hour meter service -->
                <div style="background-color: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
                    <div style="font-size: 14px; color: #374151; margin-bottom: 12px;">Hour meter service selanjutnya (HM service)</div>
                    <input type="number" step="0.01" min="0" name="hour_meter_service" value="{{ old('hour_meter_service') }}" placeholder="Jawaban Anda" 
                           style="width: 100%; border: 1px solid #d1d5db; background-color: white; border-radius: 6px; padding: 8px 12px; font-size: 13px; color: #4b5563; outline: none;">
                    @error('hour_meter_service')<p style="font-size: 12px; color: #ef4444; margin-top: 6px; margin-bottom: 0;">{{ $message }}</p>@enderror
                </div>

                <!-- Input: KM -->
                <div style="background-color: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
                    <div style="font-size: 14px; color: #374151; margin-bottom: 12px;">Jarak Tempuh (KM)</div>
                    <input type="number" step="1" min="0" name="km" value="{{ old('km') }}" placeholder="Jawaban Anda" 
                           style="width: 100%; border: 1px solid #d1d5db; background-color: white; border-radius: 6px; padding: 8px 12px; font-size: 13px; color: #4b5563; outline: none;">
                    @error('km')<p style="font-size: 12px; color: #ef4444; margin-top: 6px; margin-bottom: 0;">{{ $message }}</p>@enderror
                </div>

                @php
                    $checkItems = [
                        1 => 'Kebersihan unit (kabin, body)',
                        2 => 'Tetesan kebocoran pelumas/minyak rem di lantai',
                        3 => 'Kondisi Batere (air aki, kabel, connector)',
                        4 => 'Kondisi roda (roda depan, roda belakang)',
                        5 => 'Kondisi Mast (pin, garpu, rantai)',
                        6 => 'Hose hidrolik',
                        7 => 'Lampu',
                        8 => 'Pelindung atas (kanopi)',
                        9 => 'Mesin',
                        10 => 'Steering (sistem kemudi)',
                        11 => 'Display, handle',
                        12 => 'System Hidrolik (tilt, side shift, reach, mast)',
                        13 => 'System Elektrikal (attachment, rotator, dll)',
                        14 => 'Rem',
                        15 => 'BBM (level)',
                    ];
                @endphp

                <!-- 15 Checklist Items -->
                @for($i = 1; $i <= 15; $i++)
                    <div style="background-color: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
                        <div style="font-size: 14px; color: #374151; margin-bottom: 1rem;">{{ $checkItems[$i] ?? "Item $i" }}</div>
                        <div style="display: flex; flex-direction: column; gap: 10px;">
                            <label style="display: flex; items-center; gap: 8px; cursor: pointer;">
                                <input type="radio" name="check_{{ $i }}" value="baik" @checked(old("check_$i") === 'baik') style="margin: 0; width: 16px; height: 16px; cursor: pointer; accent-color: #3b82f6;">
                                <span style="font-size: 13px; color: #374151; transform: translateY(1px);">Baik / Bersih</span>
                            </label>
                            <label style="display: flex; items-center; gap: 8px; cursor: pointer;">
                                <input type="radio" name="check_{{ $i }}" value="perlu_perhatian" @checked(old("check_$i") === 'perlu_perhatian') style="margin: 0; width: 16px; height: 16px; cursor: pointer; accent-color: #3b82f6;">
                                <span style="font-size: 13px; color: #374151; transform: translateY(1px);">Perlu perhatian</span>
                            </label>
                            <label style="display: flex; items-center; gap: 8px; cursor: pointer;">
                                <input type="radio" name="check_{{ $i }}" value="perlu_perbaikan" @checked(old("check_$i") === 'perlu_perbaikan') style="margin: 0; width: 16px; height: 16px; cursor: pointer; accent-color: #3b82f6;">
                                <span style="font-size: 13px; color: #374151; transform: translateY(1px);">Kotor / Wajib dibersihkan / Perbaikan</span>
                            </label>
                        </div>
                        @error("check_$i")<p style="font-size: 12px; color: #ef4444; margin-top: 8px; margin-bottom: 0;">{{ $message }}</p>@enderror
                    </div>
                @endfor

                <!-- Input: Note (Catatan Perbaikan) -->
                <div style="background-color: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); grid-column: 1 / -1;">
                    <div style="font-size: 14px; color: #374151; margin-bottom: 4px;">Catatan Perbaikan / Tambahan</div>
                    <div style="font-size: 12px; color: #6b7280; margin-bottom: 12px;">Jelaskan detail untuk item yang Perlu Perhatian/Perbaikan</div>
                    <textarea name="note" rows="3" placeholder="Jawaban Anda" 
                           style="width: 100%; border: 1px solid #d1d5db; background-color: white; border-radius: 6px; padding: 10px 12px; font-size: 13px; color: #4b5563; outline: none; font-family: inherit;">{{ old('note') }}</textarea>
                    @error('note')<p style="font-size: 12px; color: #ef4444; margin-top: 6px; margin-bottom: 0;">{{ $message }}</p>@enderror
                </div>

            </div> <!-- End Grid Container -->

            <!-- Actions -->
            <div style="margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap;">
                <button type="submit" style="background-color: #2563eb; color: white; border: none; border-radius: 8px; padding: 12px 24px; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 200px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
                    Simpan Pre-Start Check
                </button>
                <a href="{{ route('equipment.scan.select') }}" style="background-color: white; color: #374151; border: 1px solid #d1d5db; border-radius: 10px; padding: 12px 24px; font-size: 14px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-width: 120px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
                    Kembali
                </a>
            </div>

        </form>

    </div>
</div>
@endsection