@extends('layouts.app')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card border-danger mb-3" style="border-width: 2px;">
            <div class="card-header bg-danger text-white">
                <h4 class="mb-0" style="font-weight: 600;"><i class="fa-solid fa-triangle-exclamation me-2"></i> Lapor Kerusakan</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('complaints.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="mb-3">
                        <label for="location_id" class="form-label font-weight-bold">Lokasi Kerusakan</label>
                        <select class="form-select @error('location_id') is-invalid @enderror" id="location_id" name="location_id" required>
                            <option value="">-- Pilih Lokasi --</option>
                            @foreach($locations as $loc)
                                <option value="{{ $loc->id }}" {{ (old('location_id', $current_location_id) == $loc->id) ? 'selected' : '' }}>
                                    {{ $loc->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('location_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="photo" class="form-label font-weight-bold">Foto Kerusakan (Wajib)</label>
                        <input type="file" class="form-control @error('photo') is-invalid @enderror" id="photo" name="photo" accept="image/*" required capture="environment">
                        <small class="text-muted">Ambil foto langsung dari kamera atau pilih dari galeri.</small>
                        @error('photo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="description" class="form-label font-weight-bold">Keterangan / Detail Kerusakan</label>
                        <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description" rows="4" placeholder="Contoh: Kran wastafel bocor dan air terus mengalir..." required>{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-danger py-2" style="font-weight: 600;">
                            <i class="fa-solid fa-paper-plane me-2"></i> Kirim Laporan
                        </button>
                        <a href="{{ route('dashboard') }}" class="btn btn-light">Kembali</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection