@extends('frontend.layouts.layouts')

@section('content')
    <div>
        <div class="relative z-0">
            <img src="{{ asset('img/cart/img-banner-header (2).jpg') }}" class="absolute object-cover w-full h-full "
                alt="Flowbite Logo">
            <div class="relative inset-0 z-50 flex items-center justify-center py-32">
                <style>
                    .marcellus-font {
                        font-family: 'Marcellus', serif;
                    }

                    .cursive-font {
                        font-family: 'Brush Script MT', 'Comic Sans MS', 'Segoe Script', 'Lucida Handwriting', cursive;
                    }
                </style>
                <div>
                    <h1
                        class="p-4 text-xl text-center text-black sm:text-3xl md:text-5xl lg:text-6xl xl:text-7xl marcellus-font">
                        Checkout
                    </h1>
                </div>

            </div>
        </div>
        <div class="container mx-auto" style="font-family: 'Poppins', sans-serif;">
            <form action="{{ route('payment.process') }}" method="POST">
                @csrf
                <p class="py-16 text-4xl">Billing Details</p>

                @if ($errors->any())
                    <div class="p-4 mb-4 text-red-700 bg-red-100 border-l-4 border-red-500" role="alert">
                        <p class="font-bold">Please fix the following errors:</p>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="flex flex-col gap-5 md:flex-row">
                    <div class="w-full p-4">
                        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                            <div class="">
                                <label for="first_name">First Name*</label>
                                <input type="text" id="first_name" name="first_name" required
                                    class="w-full h-10 border-2 border-gray-300 rounded-sm @error('first_name') border-red-500 @enderror"
                                    value="{{ old('first_name') }}">
                                @error('first_name')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="">
                                <label for="last_name">Last Name*</label>
                                <input type="text" id="last_name" name="last_name" required
                                    class="w-full h-10 border-2 border-gray-300 rounded-sm @error('last_name') border-red-500 @enderror"
                                    value="{{ old('last_name') }}">
                                @error('last_name')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="">
                                <label for="contact_number">Contact Number*</label>
                                <input type="text" id="contact_number" name="contact_number" required
                                    class="w-full h-10 border-2 border-gray-300 rounded-sm @error('contact_number') border-red-500 @enderror"
                                    value="{{ old('contact_number') }}">
                                @error('contact_number')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="">
                                <label for="email">Email Address*</label>
                                <input type="email" id="email" name="email" required
                                    class="w-full h-10 border-2 border-gray-300 rounded-sm @error('email') border-red-500 @enderror"
                                    value="{{ old('email') }}">
                                @error('email')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="my-5">
                            <label for="street_address">Street Address*</label>
                            <input type="text" id="street_address" name="street_address" required
                                class="w-full h-10 border-2 border-gray-300 rounded-sm @error('street_address') border-red-500 @enderror"
                                value="{{ old('street_address') }}">
                            @error('street_address')
                                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                            <div class="">
                                <label for="barangay">Barangay <span class="text-blue-500">(Optional)</span></label>
                                <input type="text" id="barangay" name="barangay"
                                    class="w-full h-10 border-2 border-gray-300 rounded-sm @error('barangay') border-red-500 @enderror"
                                    value="{{ old('barangay') }}">
                                @error('barangay')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="">
                                <label for="city">City*</label>
                                <input type="text" id="city" name="city" required
                                    class="w-full h-10 border-2 border-gray-300 rounded-sm @error('city') border-red-500 @enderror"
                                    value="{{ old('city') }}">
                                @error('city')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="">
                                <label for="province">Province*</label>
                                <input type="text" id="province" name="province" required
                                    class="w-full h-10 border-2 border-gray-300 rounded-sm @error('province') border-red-500 @enderror"
                                    value="{{ old('province') }}">
                                @error('province')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="">
                                <label for="zip_code">Zip Code*</label>
                                <input type="text" id="zip_code" name="zip_code" required
                                    class="w-full h-10 border-2 border-gray-300 rounded-sm @error('zip_code') border-red-500 @enderror"
                                    value="{{ old('zip_code') }}">
                                @error('zip_code')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="my-5">
                            <label for="order-notes">Order Notes <span class="text-blue-500">(Optional)</span></label>
                            <textarea id="order-notes" name="order_notes" class="w-full border-2 border-gray-300 rounded-sm" rows="4"
                                placeholder="Enter your notes here...">{{ old('order_notes') }}</textarea>
                            @error('order_notes')
                                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="p-5 mb-32">
                        <div class="relative w-full h-full">
                            <img src="{{ asset('img/cart/obj-left-container.png') }}" class="absolute w-full h-full ">
                            <div class="relative p-4">
                                <div class="flex justify-between pb-5 mt-10 ">
                                    <p class="font-bold text-md">PRODUCTS</p>
                                    <p class="font-bold text-md">Subtotal</p>
                                </div>
                                <hr class="w-full mb-2 border-t-2 border-gray-400">
                                @foreach ($cart as $productId => $item)
                                    <div class="flex justify-between pb-5 ">
                                        <p class="text-md ">{{ $item['price'] }} x {{ $item['quantity'] }}</p>
                                        <p class="text-md "> ₱ {{ number_format($item['quantity'] * $item['price'], 2) }}
                                            <input type="hidden" name="product_id[]" value="{{ $productId }}">
                                            <input type="hidden" name="quantity[]" value="{{ $item['quantity'] }}">

                                        </p>
                                    </div>
                                @endforeach
                                <hr class="w-full mb-2 border-t-2 border-gray-400">
                                <div class="flex gap-20 pt-8">
                                    <div>
                                        <p class="mb-3 font-bold">SUBTOTAL</p>
                                        <p class="mb-3 font-bold">SHIPPING</p>
                                    </div>
                                    <div>
                                        <p class="mb-3 font-bold">₱ {{ number_format($total, 2) }}</p>
                                        <input type="hidden" name="subtotal" value="{{ number_format($total, 2) }}">
                                        <div class="mb-3">
                                            <input type="radio" id="flat-rate" name="shipping_method"
                                                value="flat_rate" required class="text-blue-500 form-radio">
                                            <label for="flat-rate" class="">Flat Rate</label>
                                        </div>
                                        <input type="hidden" name ="shipping" value="1">
                                        <div class="mb-3">
                                            <input type="radio" id="local-pickup" name="shipping_method"
                                                value="local_pickup" required class="text-blue-500 form-radio">
                                            <label for="local-pickup" class="">Local Pickup</label>
                                        </div>
                                        <div class="mb-3 text-xs">
                                            <label for="pickup-address" class="flex items-center mb-3 cursor-pointer">
                                                <i class="mr-2 text-xl fas fa-map-marker-alt"></i>
                                                Claro M Recto, Davao City 8000
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <hr class="w-full border-t-2 border-gray-400">
                                <div class="flex gap-20 pt-4 pb-3">
                                    <div>
                                        <p class="font-bold ">TOTAL</p>
                                    </div>
                                    <div>
                                        <p class="text-2xl font-bold ">₱ {{ number_format($total, 2) }}</p>
                                        <input type="hidden" name="total" value="{{ number_format($total, 2) }}">
                                    </div>
                                </div>
                                <hr class="w-full border-t-2 border-gray-400">
                                <div class="flex items-center my-4">
                                    <input type="checkbox" id="terms_agreed" name="terms_agreed" required class="mr-2 "
                                        value="true">
                                    <label for="terms_agreed" class="text-sm text-gray-600">I agree to the <a
                                            href="#" class="text-blue-500">terms and conditions</a></label>
                                    @error('terms')
                                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div
                                    class="flex justify-center h-10 mt-5 mb-10 text-white bg-blue-600 rounded-full hover:text-gray-300">
                                    <button type="submit" class="btn btn-primary">Place Order</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </form>
        </div>
        <script>
            function incrementQuantity() {
                var quantityInput = document.getElementById('quantity');
                var currentQuantity = parseInt(quantityInput.value, 10);
                quantityInput.value = currentQuantity + 1;
            }

            function decrementQuantity() {
                var quantityInput = document.getElementById('quantity');
                var currentQuantity = parseInt(quantityInput.value, 10);
                if (currentQuantity > 1) {
                    quantityInput.value = currentQuantity - 1;
                }
            }
        </script>

        <script>
            function incrementQuantity() {
                var quantityInput = document.getElementById('quantity');
                var currentQuantity = parseInt(quantityInput.value, 10);
                quantityInput.value = currentQuantity + 1;
            }

            function decrementQuantity() {
                var quantityInput = document.getElementById('quantity');
                var currentQuantity = parseInt(quantityInput.value, 10);
                if (currentQuantity > 1) {
                    quantityInput.value = currentQuantity - 1;
                }
            }
        </script>
    @endsection