@extends('layouts.montir')

@section('content')
<form method="POST"
      action="{{ route('montir.inspection.ketebalan.store', $inspeksi->id) }}">
@csrf

<div class="p-4 pb-36 bg-white max-w-md mx-auto space-y-12">

    <div>
        <p class="text-amber-700 text-2xl font-bold">5/20</p>
        <h1 class="text-2xl font-bold mt-1 text-gray-900">Ketebalan Cat</h1>
    </div>

    {{-- DEPAN --}}
    <section>
        <h2 class="text-lg font-semibold mb-3">Depan</h2>
        <div class="relative mx-auto w-72">
            <img src="{{ asset('images/mercedes/depan.png') }}" class="w-full">
            <div class="absolute top-[6%] left-1/2 -translate-x-1/2 input-wrap">
                <input name="depan" class="input-mm" placeholder="0.00">
                <span>mm</span>
            </div>
        </div>
    </section>

    {{-- BELAKANG --}}
    <section>
        <h2 class="text-lg font-semibold mb-3">Belakang</h2>
        <div class="relative mx-auto w-72">
            <img src="{{ asset('images/mercedes/belakang.png') }}" class="w-full">
            <div class="absolute top-[6%] left-1/2 -translate-x-1/2 input-wrap">
                <input name="belakang_atas" class="input-mm" placeholder="0.00">
                <span>mm</span>
            </div>
            <div class="absolute top-[30%] right-[4%] input-wrap">
                <input name="belakang_samping" class="input-mm" placeholder="0.00">
                <span>mm</span>
            </div>
        </div>
    </section>

    {{-- KANAN --}}
    <section>
        <h2 class="text-lg font-semibold mb-3">Samping Kanan</h2>
        <div class="relative mx-auto w-full max-w-md">
            <img src="{{ asset('images/mercedes/kanan.png') }}" class="w-full">
            <div class="absolute top-[6%] left-[6%] input-wrap">
                <input name="kanan_depan" class="input-mm"><span>mm</span>
            </div>
            <div class="absolute top-[6%] left-[38%] input-wrap">
                <input name="kanan_tengah" class="input-mm"><span>mm</span>
            </div>
            <div class="absolute top-[6%] right-[10%] input-wrap">
                <input name="kanan_belakang" class="input-mm"><span>mm</span>
            </div>
            <div class="absolute bottom-[6%] left-1/2 -translate-x-1/2 input-wrap">
                <input name="kanan_bawah" class="input-mm"><span>mm</span>
            </div>
        </div>
    </section>

    {{-- KIRI --}}
    <section>
        <h2 class="text-lg font-semibold mb-3">Samping Kiri</h2>
        <div class="relative mx-auto w-full max-w-md">
            <img src="{{ asset('images/mercedes/kiri.png') }}" class="w-full">
            <div class="absolute top-[6%] left-[6%] input-wrap">
                <input name="kiri_depan" class="input-mm"><span>mm</span>
            </div>
            <div class="absolute top-[6%] left-[38%] input-wrap">
                <input name="kiri_tengah" class="input-mm"><span>mm</span>
            </div>
            <div class="absolute top-[6%] right-[10%] input-wrap">
                <input name="kiri_belakang" class="input-mm"><span>mm</span>
            </div>
            <div class="absolute bottom-[6%] left-1/2 -translate-x-1/2 input-wrap">
                <input name="kiri_bawah" class="input-mm"><span>mm</span>
            </div>
        </div>
    </section>

</div>

<div class="fixed bottom-0 left-0 right-0 bg-white border-t z-50">
    <div class="max-w-md mx-auto grid grid-cols-2">
       <a href="{{ route('montir.inspection.interior', $inspeksi->id) }}"
   class="bg-amber-500 text-white py-4 text-center font-semibold block rounded-lg">
    Back
</a>
        <button type="submit"
                class="bg-amber-700 hover:bg-amber-800 text-white py-4 font-semibold">
            Next
        </button>
    </div>
</div>

<style>
.input-mm{width:64px;height:32px;border-radius:8px;border:2px solid #fbbf24;font-size:13px;text-align:center}
.input-wrap{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500}
</style>

</form>
@endsection