@extends('front.main')
@push('style')
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <style>
        .checkout-container {
            background-color: #cab890;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            max-width: 100%;
            margin: auto;
        }

        .full-width {
            width: 80%;
        }
        .container-nav{
            width: 100% !important
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #052D25;
            font-size: 3rem;
            font-weight: 800;
        }

        h3 {
            margin-bottom: 10px;
            color: #000;
        }

        .form-section {
            margin-bottom: 20px;
        }

        input,
        select {
            width: 100%;
            padding: 12px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        input:focus,
        select:focus {
            outline: none;
            border-color: #052D25;
        }

        .order-summary {
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 5px;
        }

        .total {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-weight: bold;
        }

        .checkout-btn {
            width: 100%;
            padding: 15px;
            background-color: #052D25;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }

        .checkout-btn:hover {
            background-color: #052D25;
        }

        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
        }
    </style>
@endpush
@section('content')
<div class="container">
        <div class="py-5 text-center">

        <h2>Checkout Form</h2>
        </div>

        <form class="needs-validation" action="{{ route('checkout.store') }}" method="POST" novalidate="">
            @csrf
            <div class="row">
                <div class="col-md-12">
                    <div class="checkout-container mb-5">
                        <h4 class="mb-3">Billing address</h4>
                        <hr class="mb-4">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="firstName">First name</label>
                                <input type="text" class="form-control" name="first_name" id="firstName" placeholder="First name" value="" >
                            </div>
                            <div class="col-md-6">
                                <label for="lastName">Last name</label>
                                <input type="text" class="form-control" name="last_name" id="lastName" placeholder="Last name" value="" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="email">Email</label>
                                <input type="email" class="form-control" name="email" id="email" placeholder="you@example.com">
                            </div>
                            <div class="col-md-6">
                                <label for="phonenumber">Phone Number</label>
                                <input type="text" class="form-control" name="phone" id="phonenumber" placeholder="">
                            </div>
                        </div>
                        <div class="">
                            <label for="address">Address</label>
                            <input type="text" class="form-control" name="address" id="address" placeholder="1234 Main St" >
                            <div class="invalid-feedback">
                                Please enter your shipping address.
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="state">City</label>
                                <select class="custom-select d-block w-100" name="city" id="city" >
                                <option value="">Choose...</option>
                                <option>California</option>
                                </select>
                                <div class="invalid-feedback">
                                Please provide a valid state.
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="state">State</label>
                                <select name="state" class="custom-select d-block w-100" id="state" >
                                <option value="">Choose...</option>
                                <option>California</option>
                                </select>
                                <div class="invalid-feedback">
                                Please provide a valid state.
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="country">Country</label>
                                <select class="custom-select d-block w-100" name="country" id="country" >
                                <option value="">Choose...</option>
                                <option>United States</option>
                                </select>
                                <div class="invalid-feedback">
                                Please select a valid country.
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="zip">Zip</label>
                                <input type="text" name="zip_code" class="form-control" id="zip" placeholder="" >
                                <div class="invalid-feedback">
                                Zip code required.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5  mb-4">
                    <div class="checkout-container mb-5">
                        <h4 class="d-flex justify-content-between align-items-center mb-3">
                            <span>Order Summary</span>
                        </h4>
                        <ul class="list-group mb-3">
                            @php
                                $totalAmount = 0; // Initialize total amount
                            @endphp
                            @foreach ($cartItems as $item)
                                @php
                                    // Check if productsItem and productsDetailsItem are not null
                                    $productItem = $item->productsItem ?? null;
                                    $productDetailsItem = $item->productsDetailsItem ?? null;

                                    // Calculate the product's total price
                                    $itemTotal = ($productDetailsItem && $productItem) ? $item->quantity * $productDetailsItem->price : 0;
                                    // Add to total amount
                                    $totalAmount += $itemTotal;
                                @endphp
                            <li class="list-group-item d-flex justify-content-between mb-1">
                                <div>
                                    <h6 class="my-0">{{ $item->productsItem->name }}</h6>
                                    <small class="text-muted">(X{{ $item->quantity }})</small>
                                </div>
                                <input type="hidden" name="total" id="total" value="{{ $totalAmount }}">
                                <span class="text-muted">${{ number_format($totalAmount) }}</span>
                            </li>
                            @endforeach
                        </ul>
                        <hr class="mb-4">
                        <button class="btn checkout-btn" type="submit">Continue to checkout</button>
                    </div>
                </div>
                <div class="col-md-7 order-md-1">
                    {{-- <div class="checkout-container">
                        <h4 class="mb-3">Payment</h4>
                        <hr class="mb-4">

                        <div class="d-block my-3">
                            <div class="custom-control custom-radio">
                                <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked="" >
                                <label class="custom-control-label mb-3" for="credit"> <img src="{{asset('assets/images/amaon.png')}}" alt="" title="" style="width: 100px;" /></label><br/>

                            </div>
                            <div class="custom-control custom-radio">
                                <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" >
                                <label class="custom-control-label" for="paypal"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Adyen_Logo.png" alt="" title="" style="width: 100px;" /></label>

                            </div>
                        </div>

                        <hr class="mb-4">

                        <div class="row" id="adyen">
                            <div class="col-md-6">
                                <label for="cc-name">Cardholder Name</label>
                                <input type="text" class="form-control" id="cc-name" placeholder="Cardholder Name" >
                            </div>
                            <div class="col-md-6">
                                <label for="cc-number">Card number</label>
                                <input type="text" class="form-control" id="cc-number" placeholder="Card number" >
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="cc-expiration">Expiration Date(MM/YY)</label>
                                <input type="text" class="form-control" id="cc-expiration" placeholder="" >
                                <div class="invalid-feedback">
                                Expiration date required
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="cc-cvv">CVV</label>
                                <input type="text" class="form-control" id="cc-cvv" placeholder="" >
                                <div class="invalid-feedback">
                                Security code required
                                </div>
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>
        </form>
    </div>
    <!-- checkoutform -->
    {{-- <div class="checkout-container full-width">
        <h2>Checkout</h2>
        <form action="{{ route('checkout.store') }}" method="post" id="checkout-form">
            @csrf
            <div class="form-section">
                <h3>Billing Information</h3>
                <input type="text" name="first_name" placeholder="First Name">
                    @error('first_name')
                        <small><div style="margin-bottom: 10px;margin-top: -5px;margin-left: 5px; color:red;">{{ $message }}</div></small>
                    @enderror
                <input type="text" name="last_name" placeholder="Last Name">
                    @error('last_name')
                        <small><div style="margin-bottom: 10px;margin-top: -5px;margin-left: 5px; color:red;">{{ $message }}</div></small>
                    @enderror
                <input type="email" name="email" placeholder="Email Address">
                    @error('email')
                        <small><div style="margin-bottom: 10px;margin-top: -5px;margin-left: 5px; color:red;">{{ $message }}</div></small>
                    @enderror
                <input type="tel" name="phone" placeholder="Contact Number">
                    @error('phone')
                        <small><div style="margin-bottom: 10px;margin-top: -5px;margin-left: 5px; color:red;">{{ $message }}</div></small>
                    @enderror
                <input type="text" name="address" placeholder="Address">
                    @error('address')
                        <small><div style="margin-bottom: 10px;margin-top: -5px;margin-left: 5px; color:red;">{{ $message }}</div></small>
                    @enderror
                <input type="text" name="city" placeholder="City">
                    @error('city')
                        <small><div style="margin-bottom: 10px;margin-top: -5px;margin-left: 5px; color:red;">{{ $message }}</div></small>
                    @enderror
                <input type="text" name="state" placeholder="State">
                    @error('state')
                        <small><div style="margin-bottom: 10px;margin-top: -5px;margin-left: 5px; color:red;">{{ $message }}</div></small>
                    @enderror
                <input type="text" name="zip_code" placeholder="Zip Code">
                    @error('zip_code')
                        <small><div style="margin-bottom: 10px;margin-top: -5px;margin-left: 5px; color:red;">{{ $message }}</div></small>
                    @enderror
                <select name="country">
                    <option value="">Country</option>
                    <option value="US">United States</option>
                    <option value="UK">United Kingdom</option>
                    <option value="PK">Pakistan</option>
                    <option value="IND">India</option>
                    <option value="CH">China</option>
                    <option value="AMR">America</option>
                    <option value="OM">Oman</option>
                    <option value="QT">Qatar</option>
                </select>
                    @error('country')
                        <small><div style="margin-bottom: 10px;margin-top: -5px;margin-left: 5px; color:red;">{{ $message }}</div></small>
                    @enderror
            </div>
            <div class="form-section">
                <h3>Payment Information</h3>
                <input type="text" name="cardholder_name" placeholder="Cardholder Name">
                <input type="text" name="card_number" placeholder="Card Number">
                <input type="text" name="expiry_date" placeholder="Expiry Date (MM/YY)">
                <input type="text" name="cvv" placeholder="CVV">
            </div>
            <div class="form-section order-summary">
                <h3>Order Summary</h3>
                <div id="cart-items">
                       @php
                            $totalAmount = 0; // Initialize total amount
                        @endphp
                    <!-- Cart items will be dynamically populated here -->
                    @foreach ($cartItems as $item)
                        @php
                                // Check if productsItem and productsDetailsItem are not null
                                $productItem = $item->productsItem ?? null;
                                $productDetailsItem = $item->productsDetailsItem ?? null;

                                // Calculate the product's total price
                                $itemTotal = ($productDetailsItem && $productItem) ? $item->quantity * $productDetailsItem->price : 0;
                                // Add to total amount
                                $totalAmount += $itemTotal;
                        @endphp

                        <div style="display:flex; justify-content:space-between;">
                            <span>{{ $item->productsItem->name }}({{ $item->quantity }}):</span>
                            <span
                                id="total-price">${{ number_format($item->quantity * $item->productsDetailsItem->price ) }}</span>
                                <input type="hidden" name="cartid[]" value="{{ $item->id }}">
                        </div>
                    @endforeach
                </div>
                <div class="total">
                    <span>Total:</span>
                    <span id="total-price">${{ number_format($totalAmount) }}</span>
                    <input type="hidden" name="total" id="total" value="{{ $totalAmount }}">
                     @error('total')
                        <small><div style="margin-bottom: 10px;margin-top: -5px;margin-left: 5px; color:red;">{{ $message }}</div></small>
                    @enderror
                </div>
            </div>
            <button type="submit" class="checkout-btn">Complete Purchase</button>
        </form>
    </div> --}}
@endsection
@push('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        // On change of the payment method radio button
        $('input[name="paymentMethod"]').change(function() {
            if ($('#paypal').is(':checked')) {
                // If Adyen (PayPal radio button here) is selected, show the Adyen div
                $('#adyen').show();
            } else {
                // Hide the Adyen div if it's not selected
                $('#adyen').hide();
            }
        });
        // Trigger the change event on page load to set initial state
        $('input[name="paymentMethod"]:checked').trigger('change');
    });
</script>
@endpush