@extends('layouts.app')

@section('title', 'Custom Order - Ulfat Collection')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-5">
                    <h2 class="text-center mb-4">Request a Custom Painting</h2>
                    <p class="text-center text-muted">Share your vision, and we'll create a unique artwork just for you.</p>
                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif
                    <form action="{{ route('custom.order') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label>Full Name *</label>
                                <input type="text" name="name" class="form-control" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>Email *</label>
                                <input type="email" name="email" class="form-control" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>Phone Number *</label>
                                <input type="tel" name="phone" class="form-control" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>Painting Type *</label>
                                <select name="painting_type" class="form-select" required>
                                    <option value="">Select</option>
                                    <option>Portrait</option>
                                    <option>Islamic Calligraphy</option>
                                    <option>Abstract Art</option>
                                    <option>Floral Art</option>
                                    <option>Nature Painting</option>
                                    <option>Custom Design</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>Preferred Size *</label>
                                <input type="text" name="size" class="form-control" placeholder="e.g., 30x40cm" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>Preferred Style *</label>
                                <input type="text" name="style" class="form-control" placeholder="e.g., Realistic, Modern, Abstract" required>
                            </div>
                            <div class="col-12 mb-3">
                                <label>Upload Reference Image (optional)</label>
                                <input type="file" name="reference_image" class="form-control" accept="image/*">
                            </div>
                            <div class="col-12 mb-3">
                                <label>Description / Special Instructions *</label>
                                <textarea name="description" rows="5" class="form-control" required></textarea>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>Budget Range *</label>
                                <select name="budget_range" class="form-select" required>
                                    <option value="">Select</option>
                                    <option>$50 - $100</option>
                                    <option>$100 - $200</option>
                                    <option>$200 - $300</option>
                                    <option>$300 - $500</option>
                                    <option>$500+</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>Delivery Deadline *</label>
                                <input type="date" name="deadline" class="form-control" required>
                            </div>
                            <div class="col-12 text-center">
                                <button type="submit" class="btn btn-dark btn-lg px-5">Submit Request</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection