@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

    @include('layouts.navbar')

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="bg-[#f2f2f2]">
        <div class="container mx-auto">
            <div class="grid grid-cols-2">
                <div class="py-14">
                    <h1 class="text-black font-medium text-4xl py-3">Checkout</h1>
                    <hr class="border-black">
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3">
                <div class="grid col-span-2">
                    <div>
                        <form action="{{ route('orders.store') }}" method="POST">
                            @csrf
                            <h1 class="text-4xl font-semibold text-black">Billing Information</h1>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="flex flex-col py-4 px-4">
                                    <h1 class="text-lg py-2 text-gray-600">First Name</h1>
                                    <input type="text" required name="billing_first_name"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="flex flex-col py-4 px-4">
                                    <h1 class="text-lg py-2 text-gray-600">Last Name</h1>
                                    <input type="text" required name="billing_last_name"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="flex flex-col py-4 px-4 md:px-4">
                                    <h1 class="text-lg py-2 text-gray-600">Middle Name</h1>
                                    <input type="text" name="billing_middle_name"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="flex flex-col px-4">
                                    <h1 class="text-lg py-2 text-gray-600">Email Address</h1>
                                    <input type="email" required name="billing_email"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="flex flex-col px-4">
                                    <h1 class="text-lg py-2 text-gray-600">Phone Number</h1>
                                    <input type="number" required name="billing_phone"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="col-span-1 md:col-span-2"></div>
                                <div class="flex flex-col py-4 px-4 md:col-span-2">
                                    <h1 class="text-lg py-2 text-gray-600">Street Address</h1>
                                    <input type="text" required name="billing_address"
                                        class="border border-gray-400 bg-transparent rounded-md p-3">
                                </div>
                                <div></div>
                                <div class="flex flex-col px-4">
                                    <h1 class="text-lg py-2 text-gray-600">City</h1>
                                    <input type="text" required name="billing_city"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="flex flex-col px-4">
                                    <h1 class="text-lg py-2 text-gray-600">State/Province</h1>
                                    <input type="text" required name="billing_state"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="flex flex-col px-4">
                                    <h1 class="text-lg py-2 text-gray-600">ZIP/Postal Code</h1>
                                    <input type="number" required name="billing_postal_code"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="px-4 py-5 col-span-1 md:col-span-3">
                                    <label class="text-lg text-black font-semibold">
                                        <input type="checkbox" class="mr-2" id="ship-to-different-address"> SHIP TO A
                                        DIFFERENT ADDRESS
                                    </label>
                                </div>
                                <hr class="border-black">
                            </div>

                            <!--2nd Fill Up Form if user wants it to be shipped to a different address-->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 hidden" id="different-address">
                                <div class="flex flex-col py-4 px-4">
                                    <h1 class="text-lg py-2 text-gray-600">First Name</h1>
                                    <input type="text" name="shipping_first_name"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="flex flex-col py-4 px-4">
                                    <h1 class="text-lg py-2 text-gray-600">Last Name</h1>
                                    <input type="text" name="shipping_last_name"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="flex flex-col py-4 px-4 md:px-4">
                                    <h1 class="text-lg py-2 text-gray-600">Middle Name</h1>
                                    <input type="text" name="shipping_middle_name"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="flex flex-col px-4">
                                    <h1 class="text-lg py-2 text-gray-600">Email Address</h1>
                                    <input type="email" name="shipping_email"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="flex flex-col px-4">
                                    <h1 class="text-lg py-2 text-gray-600">Phone Number</h1>
                                    <input type="number" name="shipping_phone"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="col-span-1 md:col-span-2"></div>
                                <div class="flex flex-col py-4 px-4 md:col-span-2">
                                    <h1 class="text-lg py-2 text-gray-600">Street Address</h1>
                                    <input type="text" name="shipping_address"
                                        class="border border-gray-400 bg-transparent rounded-md p-3">
                                </div>
                                <div></div>
                                <div class="flex flex-col px-4">
                                    <h1 class="text-lg py-2 text-gray-600">City</h1>
                                    <input type="text" name="shipping_city"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="flex flex-col px-4">
                                    <h1 class="text-lg py-2 text-gray-600">State/Province</h1>
                                    <input type="text" name="shipping_state"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                                <div class="flex flex-col px-4">
                                    <h1 class="text-lg py-2 text-gray-600">ZIP/Postal Code</h1>
                                    <input type="text" name="shipping_postal_code"
                                        class="border border-gray-400 bg-transparent rounded-md p-2">
                                </div>
                            </div>
                            <div>
                                <div class="py-4">
                                    <h1 class="text-xl">Order notes (optional)</h1>
                                </div>
                                <div>
                                    <textarea name="order_notes" id="" cols="30" rows="10"
                                        class="bg-transparent border border-gray-400 w-full rounded-lg p-3"
                                        placeholder="Notes about your order, e.g special notes for delivery" style="height: 200px;"></textarea>
                                </div>
                            </div>
                    </div>
                </div>
                <div>
                    <div class="px-8">
                        <h1 class="text-black font-semibold uppercase mb-4 text-lg">Enter Promo Code</h1>
                    </div>
                    <div class="flex border-2 border-black overflow-hidden max-w-md mx-auto font-[sans-serif] rounded-lg">
                        <input type="email" placeholder="Search Something..."
                            class="w-full outline-none bg-white text-gray-600 text-sm px-4 py-3" />
                        <button type='button' class="flex items-center justify-center bg-black px-5 text-sm text-white">
                            Submit
                        </button>
                    </div>
                    <div class="py-4 px-3">
                        <div class="bg-white p-4 rounded-lg">
                            <h1 class="text-black font-semibold uppercase py-4">Your Order</h1>
                            <div>
                                <div class="flex justify-between py-4">
                                    <h1 class="text-black font-medium">Product</h1>
                                    <h1 class="text-black font-medium">Subtotal</h1>
                                </div>
                                <hr class="py-2">
                                @foreach ($cart as $item)
                                    <div class="grid grid-cols-2">
                                        <div class="text-lg">
                                            <h1 class="text-gray-600">{{ $item['name'] }} <span class="font-semibold">x
                                                    {{ $item['quantity'] }}</span></h1>
                                        </div>
                                        <div class="text-lg py-3">
                                            <h1 class="flex justify-end text-gray-600">
                                                ₱{{ number_format($item['price'] * $item['quantity'], 2) }}</h1>
                                        </div>
                                    </div>
                                    <hr>
                                @endforeach
                                <div class="flex justify-between py-4">
                                    <h1 class="text-black font-medium">Subtotal</h1>
                                    <h1 class="text-gray-600">₱{{ number_format($total, 2) }}</h1>
                                </div>
                                <hr class="py-2">
                                <div class="grid grid-cols-2">
                                    <div class="text-lg">
                                        <h1 class="text-gray-600">Shipping</h1>
                                        <h1 class="text-gray-600">Discount</h1>
                                        <h1 class="text-gray-600">Tax</h1>
                                    </div>
                                    <div class="text-lg py-3">
                                        <h1 class="flex justify-end text-gray-600" id="shipping-fee">TBD</h1>
                                        <h1 class="flex justify-end text-gray-600" id="discount">-₱0.00</h1>
                                        <h1 class="flex justify-end text-gray-600" id="tax">₱0.00</h1>
                                    </div>
                                </div>
                                <hr>
                                <div class="py-4 flex justify-between">
                                    <h1 class="text-black font-semibold">Total</h1>
                                    <h1 class="text-gray-600">₱{{ number_format($total, 2) }}</h1>
                                </div>
                                <div class="py-4">
                                    <h1 class="text-xl">Payment Method</h1>
                                    <div class="flex flex-col">
                                        <label class="flex items-center">
                                            <input type="radio" name="payment_method" value="G Cash" class="mr-2"
                                                required>
                                            G Cash
                                        </label>
                                        {{-- <label class="flex items-center">
                                            <input type="radio" name="payment_method" value="paypal" class="mr-2"
                                                required>
                                            Credit Card
                                        </label>
                                        <label class="flex items-center">
                                            <input type="radio" name="payment_method" value="bank_transfer"
                                                class="mr-2" required>
                                            Paymaya
                                        </label> --}}
                                        <label class="flex items-center">
                                            <input type="radio" name="payment_method" value="Cash on Delivery"
                                                class="mr-2" required>
                                            Cash on Delivery
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="py-3">
                                <p>Your personal data will be used to process your order, support your experience
                                    throughout this website, and for other purposes described in our <span
                                        class="text-red-600 underline">privacy policy</span></p>
                            </div>
                            <div class="px-4 py-5 col-span-1 md:col-span-3">
                                <label class="text-md text-black ">
                                    <input required type="checkbox" class="mr-2"> I have read and agree to the website
                                    <span class="text-red-600 underline">terms and conditions</span>
                                </label>
                            </div>
                            <input type="hidden" name="total_amount" value="{{ $total }}">
                            <button type="submit"
                                class="bg-[#ff0000]  text-white text-sm lg:text-xl p-4 rounded-full">PLACE
                                ORDER</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    @include('layouts.footer')

    <script>
        document.getElementById('ship-to-different-address').addEventListener('change', function() {
            const differentAddressSection = document.getElementById('different-address');
            differentAddressSection.classList.toggle('hidden', !this.checked);
        });
    </script>
@endsection