@extends('layouts.applications')

@section('styles')
    <link rel="stylesheet" href="{{ mix('css/member.css') }}">
@endsection


@section('content')
    <div class="min-h-screen bg-gray-100 flex items-center justify-center p-6">
        <div class="bg-white shadow-xl rounded-2xl w-full max-w-3xl p-8">

            <h1 class="text-2xl font-bold text-gray-800 mb-6">
                Buat Member Baru
            </h1>
            <form method="POST" action="#" class="space-y-5">
                @csrf


                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">
                        Nama Lengkap
                    </label>
                    <input type="text"
                        class="w-full border rounded-md px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none">
                </div>


                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">
                        No HP
                    </label>
                    <input type="text"
                        class="max-w-xl border rounded-md px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">
                        Nomor Polisi
                    </label>
                    <input type="text"
                        class="w-full border rounded-md px-4 py-2 uppercase focus:ring-2 focus:ring-blue-500 focus:outline-none">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">
                        Jenis Kendaraan
                    </label>
                    <select
                        class="w-full border rounded-md px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none">
                        <option>Motor</option>
                        <option>Mobil</option>
                    </select>
                </div>

                <div class="flex justify-end gap-3 pt-4">
                    <button type="button"
                        class="px-4 py-2 border rounded-md text-gray-600 hover:bg-gray-100 transition">
                        Batal
                    </button>

                    <button type="submit"
                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
                        Simpan Member
                    </button>
                </div>

            </form>

        </div>
    </div>
@endsection