@extends('layouts.public')

@section('title', 'Order '.$package->name.' — Undangan Digital')

@section('content')
    <main class="page-shell" style="max-width:760px">
        <header class="page-header">
            <span class="eyebrow">Order Paket</span>
            <h1>{{ $package->name }}</h1>
            <p>{{ $package->formattedPrice() }} · {{ $package->description }}</p>
        </header>

        @if ($errors->any())
            <div class="error-box">
                <ul style="margin:0;padding-left:1.1rem">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form class="panel form-grid" method="POST" action="{{ route('orders.store', $package) }}" style="animation:rise .7s ease both">
            @csrf
            <div class="form-grid two">
                <label>Nama Pemesan <input type="text" name="customer_name" value="{{ old('customer_name') }}" required></label>
                <label>Email Login Nanti <input type="email" name="customer_email" value="{{ old('customer_email') }}" required></label>
                <label>No. WhatsApp <input type="text" name="customer_phone" value="{{ old('customer_phone') }}"></label>
                <label>Tanggal Acara <input type="date" name="wedding_date" value="{{ old('wedding_date') }}"></label>
                <label>Nama Mempelai Pria <input type="text" name="groom_name" value="{{ old('groom_name') }}" required></label>
                <label>Nama Mempelai Wanita <input type="text" name="bride_name" value="{{ old('bride_name') }}" required></label>
            </div>
            <label>Catatan <textarea name="notes" rows="3">{{ old('notes') }}</textarea></label>
            <div style="display:flex;gap:.75rem;flex-wrap:wrap">
                <button class="btn btn-primary" type="submit">Buat Pesanan</button>
                <a class="btn btn-ghost-dark" href="{{ route('catalog.index') }}">Kembali</a>
            </div>
        </form>
    </main>
@endsection