@extends('frontend.layouts.applayout')
@section('main-content')
    <section class="sec_padding">
        <div class="container-fluid px-lg-5">
            <div class="order_boking border p-3 rounded mb-5">
                <form action="{{ route('wedding_booking', $order->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row g-3">
                        <div class="col-lg-6">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="couple_type" value="bride" checked>
                                <label class="form-check-label" for="bride">
                                    Bride
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="couple_type" value="groom">
                                <label class="form-check-label" for="groom">
                                    Groom
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="">
                                <input type="text" class="form-control" name="first_name" placeholder="First Name *" required>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="">
                                <input type="text" class="form-control" name="last_name" placeholder="Last Name *" required>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="">
                                <input type="email" class="form-control" name="email" placeholder="Email *"required>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="">
                                <input type="text" class="form-control" name="phone" placeholder="Phone *"required>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="">
                                <textarea name="address" class="form-control" rows="3" placeholder="Customer Address*"required></textarea>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class=""required>
                                <label class="form-label">Event Type *</label>
                                <select name="event_type" class="form-select">
                                    <option value="">Select Event Type</option>
                                    <option value="wedding">Wedding</option>
                                    <option value="reception">Reception</option>
                                    <option value="engagement">Engagement</option>
                                    <option value="others">Others</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="">
                                <label class="form-label">Event Date *</label>
                                <input type="date" name="event_date" class="form-control"required>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="">
                                <label class="form-label">Delivery Type *</label>
                                <select name="delivery_type" class="form-select" id="delivery_type"required>
                                    <option value="">Select Delivery Type</option>
                                    <option>Pick Up</option>
                                    <option>Delivery</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6 pickup" style="display: none;">
                            <div class="">
                                <label class="form-label">Pickup Time *</label>
                                <input type="datetime-local" name="pickup_time" class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-6 delivery" style="display: none;">
                            <div class="">
                                <label class="form-label">Delivery City *</label>
                                <input type="text" name="delivery_city" class="form-control">
                            </div>
                        </div>
                        <div class="col-12 delivery" style="display: none;">
                            <div class="">
                                <textarea name="delivery_address" class="form-control" rows="3" placeholder="Delivery Address *"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="">
                                <label class="form-label">No of serving *</label>
                                <input type="number" name="no_of_serving" class="form-control"
                                    placeholder="Number of serving *"required>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="">
                                <label class="form-label">cake Stand *</label>
                                <input type="text" name="cake_stand" class="form-control" placeholder="Cake Stand *"required>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="">
                                <label class="form-label">Cake Topper *</label>
                                <input type="text" name="cake_topper" class="form-control"
                                    placeholder="Cake topper *"required>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="">
                                <textarea name="comments" class="form-control" rows="3" placeholder="Comment"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="book-btn border-0">Proceed to Checkout</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    @push('scripts')
        <script>
            $(document).ready(function() {
                $('#delivery_type').change(function() {
                    var deliveryType = $(this).val();

                    if (deliveryType === 'Pick Up') {
                        $('.pickup').show();
                        $('.delivery').hide();
                    } else if (deliveryType === 'Delivery') {
                        $('.pickup').hide();
                        $('.delivery').show();
                    } else {
                        $('.pickup').hide();
                        $('.delivery').hide();
                    }
                });
            });
        </script>
    @endpush
@endsection