@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb pageTitle="{{ $title }}" />

    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                {{ $customer->exists ? 'Edit Data Pemesan' : 'Form Pemesan Baru' }}
            </h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                Lengkapi data pemesan, instansi/perusahaan, kontak, NPWP, dan email untuk kebutuhan order, invoice, PPN, dan surat jalan.
            </p>
        </div>

        <div class="p-5">
            <form action="{{ $customer->exists ? route('customers.update', $customer) : route('customers.store') }}" method="POST">
                @csrf

                @if($customer->exists)
                    @method('PUT')
                @endif

                <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                    <div class="space-y-5">
                        <x-form.input
                            name="name"
                            label="Nama Pemesan"
                            placeholder="Contoh: Budi Santoso"
                            :value="old('name', $customer->name)"
                            :required="true"
                        />

                        <x-form.select
                            name="member_type"
                            label="Jenis Pelanggan"
                            placeholder="Pilih Jenis Pelanggan"
                            :value="old('member_type', $customer->member_type ?? 'umum')"
                            :options="$memberTypes ?? ['umum' => 'Umum', 'studio' => 'Instansi']"
                            :required="true"
                        />

                        <x-form.input
                            name="contact_person"
                            label="Nama Instansi / Perusahaan"
                            placeholder="Contoh: PT Sumber Makmur / CV Global Media"
                            :value="old('contact_person', $customer->contact_person ?? '')"
                        />

                        <x-form.input
                            name="phone"
                            label="Kontak"
                            placeholder="No. HP / WhatsApp"
                            :value="old('phone', $customer->phone)"
                            :required="true"
                        />
                    </div>

                    <div class="space-y-5">
                        <x-form.input
                            name="npwp"
                            label="NPWP"
                            placeholder="Contoh: 12.345.678.9-012.000"
                            :value="old('npwp', $customer->npwp ?? '')"
                        />

                        <x-form.input
                            name="email"
                            label="Email"
                            type="email"
                            placeholder="email@example.com"
                            :value="old('email', $customer->email)"
                        />

                        <x-form.textarea
                            name="address"
                            label="Alamat Lengkap"
                            placeholder="Alamat lengkap pemesan / instansi..."
                            :value="old('address', $customer->address)"
                            rows="5"
                        />
                    </div>
                </div>

                <div class="mt-6 rounded-xl border border-blue-100 bg-blue-50 p-4 text-sm text-blue-700 dark:border-blue-500/20 dark:bg-blue-500/10 dark:text-blue-300">
                    <strong>Catatan:</strong>
                    Data Nama Instansi / Perusahaan, Kontak, NPWP, dan Email akan membantu saat membuat invoice PPN, surat jalan, dan kebutuhan administrasi pelanggan.
                </div>

                <div class="mt-6 flex items-center justify-end gap-3 border-t border-gray-200 pt-6 dark:border-gray-700">
                    <a href="{{ route('customers.index') }}"
                       class="rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                        Batal
                    </a>

                    <button type="submit"
                            class="rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600">
                        Simpan Data
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection