@extends('layouts.application-wizard')

@section('step-content')
@php $d = $application->section_kredit ?? []; @endphp

<form id="step-form-1" method="POST"
      action="{{ route('applications.step.save', ['id' => 'new', 'step' => 1]) }}">
    @csrf

    <div class="row g-3">

        {{-- Jenis Layanan --}}
        <div class="col-12 col-md-6">
            <label class="form-label required">Jenis Layanan</label>
            <select name="jenis_layanan" class="form-select @error('jenis_layanan') is-invalid @enderror" required>
                <option value="">-- Pilih --</option>
                <option value="Tunda Tebang" @selected(($d['jenis_layanan'] ?? '') === 'Tunda Tebang')>Tunda Tebang</option>
                <option value="Multi Usaha Kehitanan" @selected(($d['jenis_layanan'] ?? '') === 'Multi Usaha Kehitanan')>Multi Usaha Kehitanan</option>
                <option value="Ekonomi Sirkular" @selected(($d['jenis_layanan'] ?? '') === 'Ekonomi Sirkular')>Ekonomi Sirkular</option>
            </select>
            @error('jenis_layanan')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        {{-- Status Pinjaman --}}
        <div class="col-12 col-md-6">
            <label class="form-label required">Status Pinjaman</label>
            <select name="status_pinjaman" class="form-select @error('status_pinjaman') is-invalid @enderror" required>
                <option value="">-- Pilih --</option>
                <option value="Baru" @selected(($d['status_pinjaman'] ?? '') === 'Baru')>Baru</option>
                <option value="Revolving" @selected(($d['status_pinjaman'] ?? '') === 'Revolving')>Revolving</option>
                <option value="Topup" @selected(($d['status_pinjaman'] ?? '') === 'Topup')>Topup</option>
            </select>
            @error('status_pinjaman')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        {{-- Jangka Waktu --}}
        <div class="col-12 col-md-6">
            <label class="form-label required">Jangka Waktu Kredit</label>
            <div class="input-group">
                <input type="number" name="jangka_waktu" min="1" max="360"
                    class="form-control @error('jangka_waktu') is-invalid @enderror"
                    value="{{ old('jangka_waktu', $d['jangka_waktu'] ?? '') }}" required>
                <span class="input-group-text">bulan</span>
                @error('jangka_waktu')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        {{-- Fasilitas Paket --}}
        <div class="col-12" x-data="{ paket: '{{ old('paket', $d['paket'] ?? '') }}' }">
            <label class="form-label required">Fasilitas Paket</label>
            <div class="row g-2">
                @foreach([
                    'paket_1' => ['label' => 'Paket 1', 'nominal' => 'Rp 10.000.000'],
                    'paket_2' => ['label' => 'Paket 2', 'nominal' => 'Rp 15.000.000'],
                    'paket_3' => ['label' => 'Paket 3', 'nominal' => 'Rp 20.000.000'],
                    'lainnya' => ['label' => 'Paket Lainnya', 'nominal' => null],
                ] as $val => $info)
                <div class="col-6 col-md-3">
                    <label class="d-block border rounded-2 p-3 cursor-pointer text-center"
                        :class="paket === '{{ $val }}' ? 'border-primary bg-primary bg-opacity-10' : 'border-light-subtle'"
                        style="cursor:pointer;">
                        <input type="radio" name="paket" value="{{ $val }}"
                            x-model="paket"
                            @if(old('paket', $d['paket'] ?? '') === $val) checked @endif
                            class="d-none">
                        <div class="fw-semibold">{{ $info['label'] }}</div>
                        @if($info['nominal'])
                            <div class="text-muted" style="font-size:.8rem;">{{ $info['nominal'] }}</div>
                        @endif
                    </label>
                </div>
                @endforeach
            </div>
            @error('paket')<div class="text-danger mt-1" style="font-size:.875rem;">{{ $message }}</div>@enderror

            {{-- Nominal lainnya --}}
            <div x-show="paket === 'lainnya'" x-cloak class="mt-2">
                <label class="form-label required">Nominal Permohonan Lainnya</label>
                <div class="input-group">
                    <span class="input-group-text">Rp</span>
                    <input type="number" name="paket_nominal" min="0"
                        class="form-control @error('paket_nominal') is-invalid @enderror"
                        value="{{ old('paket_nominal', $d['paket_nominal'] ?? '') }}"
                        placeholder="0">
                    @error('paket_nominal')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>

        {{-- Jumlah permohonan (auto-fill dari paket, atau manual) --}}
        <div class="col-12 col-md-6">
            <label class="form-label required">Jumlah Permohonan Kredit</label>
            <div class="input-group">
                <span class="input-group-text">Rp</span>
                <input type="number" name="jumlah_permohonan" min="1000000"
                    class="form-control @error('jumlah_permohonan') is-invalid @enderror"
                    value="{{ old('jumlah_permohonan', $d['jumlah_permohonan'] ?? '') }}"
                    placeholder="0" required>
                @error('jumlah_permohonan')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

    </div>

</form>
@endsection

@section('step-footer')
<div class="d-flex justify-content-between">
    <a href="{{ route('applications.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-x me-1"></i>Batal
    </a>
    <button type="submit" form="step-form-1" class="btn btn-primary px-4">
        Lanjut <i class="bi bi-arrow-right ms-1"></i>
    </button>
</div>
@endsection