@include('layouts.header')
@include('layouts.tostMessage')

{{-- main content --}}

<section class="bg-img1 txt-center p-lr-15 p-tb-92" style="background-image: url('{{ asset('images/bg-0011.webp') }}');">
    <h2 class="txt-center gradient-text mob-text"> 
      <span class="great-vibes-regular center-line">
        <a href="https://www.instagram.com/bwc_clothing/" target="_blank" class="gradient-text mob-text">
            <strong>&gt;&gt; Join The Circle &lt;&lt;</strong>
        </a>
    </span>
    <!--<p class="tagline tagline-mob">-Join The Circle, Wear Breadwinners Circle</p>-->
    </h2>
</section>

<!-- Content page -->
<div class="container mt-2">
    <div class="row">
        <div class="col-xl-8">
            <div class="card">
                <div class="card-body">
                    <ol class="activity-checkout mb-0 px-4 mt-3">
                        <li class="checkout-item">
                            <div class="avatar checkout-icon p-1">
                                <div class="avatar-title rounded-circle bg-primary">
                                    <i class="bx bxs-receipt text-white font-size-20"></i>
                                </div>
                            </div>
                            <div class="feed-item-list">
                                <div>
                                    <h4 class="font-size-20 mb-1 text-primary"><b>🛍️ SHIPPING ADDRESS</b></h4>
                                    <div class="mb-3">
                                        <form id="orderForm" action="{{ route('orders.store') }}" method="POST">
                                            @csrf
                                        <input type="hidden" id="coupon_code" name="coupon_code" >
                                        <input type="hidden" id="discount" name="discount">
                                            <input type="hidden" id="discount_percentage" name="discount_percentage">
                                            <input type="hidden" name="orderNumber" value="{{ $orderNumber }}">
                                            <input type="hidden" name="shippingCharge" value="{{ $shippingCharge }}">

                                            @foreach ($cartItems as $item)
                                                <input type="hidden" name="products[{{ $loop->index }}][product_id]" value="{{ $item->product_id }}">
                                                <input type="hidden" name="products[{{ $loop->index }}][name]" value="{{ $item->product->name }}">
                                                <input type="hidden" name="products[{{ $loop->index }}][price]" value="{{ $item->product->price }}">
                                                <input type="hidden" name="products[{{ $loop->index }}][quantity]" value="{{ $item->quantity }}">
                                                <input type="hidden" name="products[{{ $loop->index }}][size]" value="{{ $item->size }}">
                                                <input type="hidden" name="products[{{ $loop->index }}][images][]" value="{{ $item->product->images }}">
                                                <input type="hidden" name="products[{{ $loop->index }}][colors][]" value="{{ $item->product->color }}">
                                            @endforeach

                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="billing-name">Full Name</label>
                                                        <input type="text" name="name" class="form-control" id="billing-name" placeholder="Enter Full name" value="{{ old('name') }}" required>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="billing-email-address">Email Address</label>
                                                        <input type="email" name="email" class="form-control" id="billing-email-address" placeholder="Enter email" value="{{ old('email') }}" required>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label class="form-label" for="billing-phone">Phone</label>
                                                    <input type="text" name="phone" class="form-control" id="billing-phone" placeholder="123-456-7890" value="{{ old('phone') }}" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
                                                    <!-- Adding pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" ensures that only numbers in the format xxx-xxx-xxxx are accepted -->
                                                </div>
                                            </div>

                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label" for="billing-address">Address</label>
                                                <textarea name="address" class="form-control" id="billing-address" rows="3" placeholder="Enter address" required >{{ old('address') }}</textarea>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label" for="billing-address_line">Address Line 2</label>
                                                <textarea name="address_line2" class="form-control" id="billing-address_line" rows="3" placeholder="Enter address line 2" required >{{ old('address_line2') }}</textarea>
                                            </div>

                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="mb-4 mb-lg-0">
                                                        <label class="form-label">Country</label>
                                                        <select name="country" class="form-control form-select" title="Country" required >
                                                            <option value="0">Select Country</option>
                                                            <option value="USA" {{ old('country') == 'USA' ? 'selected' : '' }}>United States</option>
                                                            <option value="AS" {{ old('country') == 'AS' ? 'selected' : '' }}>American Samoa</option>
                                                            <option value="AI" {{ old('country') == 'AI' ? 'selected' : '' }}>Anguilla</option>
                                                            <!-- Add more countries as needed -->
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-lg-4">
                                                    <div class="mb-4 mb-lg-0">
                                                        <label class="form-label" for="billing-city">City</label>
                                                        <input type="text" name="city" class="form-control" id="billing-city" placeholder="Enter City" value="{{ old('city') }}" required >
                                                    </div>
                                                </div>

                                                <div class="col-lg-4">
                    <div class="mb-4 mb-lg-0">
                        <label class="form-label">State</label>
                        <select name="state" class="form-control form-select state-select" title="State" required>
                            <option value="0">Select State</option>
                            <option value="Alabama" {{ old('state') == 'Alabama' ? 'selected' : '' }}>Alabama</option>
                            <option value="Alaska" {{ old('state') == 'Alaska' ? 'selected' : '' }}>Alaska</option>
                            <option value="Arizona" {{ old('state') == 'Arizona' ? 'selected' : '' }}>Arizona</option>
                            <option value="Arkansas" {{ old('state') == 'Arkansas' ? 'selected' : '' }}>Arkansas</option>
                            <option value="California" {{ old('state') == 'California' ? 'selected' : '' }}>California</option>
                            <option value="Colorado" {{ old('state') == 'Colorado' ? 'selected' : '' }}>Colorado</option>
                            <option value="Connecticut" {{ old('state') == 'Connecticut' ? 'selected' : '' }}>Connecticut</option>
                            <option value="Delaware" {{ old('state') == 'Delaware' ? 'selected' : '' }}>Delaware</option>
                            <option value="District of Columbia" {{ old('state') == 'District of Columbia' ? 'selected' : '' }}>District of Columbia</option>
                            <option value="Florida" {{ old('state') == 'Florida' ? 'selected' : '' }}>Florida</option>
                            <option value="Georgia" {{ old('state') == 'Georgia' ? 'selected' : '' }}>Georgia</option>
                            <option value="Hawaii" {{ old('state') == 'Hawaii' ? 'selected' : '' }}>Hawaii</option>
                            <option value="Idaho" {{ old('state') == 'Idaho' ? 'selected' : '' }}>Idaho</option>
                            <option value="Illinois" {{ old('state') == 'Illinois' ? 'selected' : '' }}>Illinois</option>
                            <option value="Indiana" {{ old('state') == 'Indiana' ? 'selected' : '' }}>Indiana</option>
                            <option value="Iowa" {{ old('state') == 'Iowa' ? 'selected' : '' }}>Iowa</option>
                            <option value="Kansas" {{ old('state') == 'Kansas' ? 'selected' : '' }}>Kansas</option>
                            <option value="Kentucky" {{ old('state') == 'Kentucky' ? 'selected' : '' }}>Kentucky</option>
                            <option value="Louisiana" {{ old('state') == 'Louisiana' ? 'selected' : '' }}>Louisiana</option>
                            <option value="Maine" {{ old('state') == 'Maine' ? 'selected' : '' }}>Maine</option>
                            <option value="Maryland" {{ old('state') == 'Maryland' ? 'selected' : '' }}>Maryland</option>
                            <option value="Massachusetts" {{ old('state') == 'Massachusetts' ? 'selected' : '' }}>Massachusetts</option>
                            <option value="Michigan" {{ old('state') == 'Michigan' ? 'selected' : '' }}>Michigan</option>
                            <option value="Minnesota" {{ old('state') == 'Minnesota' ? 'selected' : '' }}>Minnesota</option>
                            <option value="Mississippi" {{ old('state') == 'Mississippi' ? 'selected' : '' }}>Mississippi</option>
                            <option value="Missouri" {{ old('state') == 'Missouri' ? 'selected' : '' }}>Missouri</option>
                            <option value="Montana" {{ old('state') == 'Montana' ? 'selected' : '' }}>Montana</option>
                            <option value="Nebraska" {{ old('state') == 'Nebraska' ? 'selected' : '' }}>Nebraska</option>
                            <option value="Nevada" {{ old('state') == 'Nevada' ? 'selected' : '' }}>Nevada</option>
                            <option value="New Hampshire" {{ old('state') == 'New Hampshire' ? 'selected' : '' }}>New Hampshire</option>
                            <option value="New Jersey" {{ old('state') == 'New Jersey' ? 'selected' : '' }}>New Jersey</option>
                            <option value="New Mexico" {{ old('state') == 'New Mexico' ? 'selected' : '' }}>New Mexico</option>
                            <option value="New York" {{ old('state') == 'New York' ? 'selected' : '' }}>New York</option>
                            <option value="North Carolina" {{ old('state') == 'North Carolina' ? 'selected' : '' }}>North Carolina</option>
                            <option value="North Dakota" {{ old('state') == 'North Dakota' ? 'selected' : '' }}>North Dakota</option>
                            <option value="Ohio" {{ old('state') == 'Ohio' ? 'selected' : '' }}>Ohio</option>
                            <option value="Oklahoma" {{ old('state') == 'Oklahoma' ? 'selected' : '' }}>Oklahoma</option>
                            <option value="Oregon" {{ old('state') == 'Oregon' ? 'selected' : '' }}>Oregon</option>
                            <option value="Pennsylvania" {{ old('state') == 'Pennsylvania' ? 'selected' : '' }}>Pennsylvania</option>
                            <option value="Rhode Island" {{ old('state') == 'Rhode Island' ? 'selected' : '' }}>Rhode Island</option>
                            <option value="South Carolina" {{ old('state') == 'South Carolina' ? 'selected' : '' }}>South Carolina</option>
                            <option value="South Dakota" {{ old('state') == 'South Dakota' ? 'selected' : '' }}>South Dakota</option>
                            <option value="Tennessee" {{ old('state') == 'Tennessee' ? 'selected' : '' }}>Tennessee</option>
                            <option value="Texas" {{ old('state') == 'Texas' ? 'selected' : '' }}>Texas</option>
                            <option value="Utah" {{ old('state') == 'Utah' ? 'selected' : '' }}>Utah</option>
                            <option value="Vermont" {{ old('state') == 'Vermont' ? 'selected' : '' }}>Vermont</option>
                            <option value="Virginia" {{ old('state') == 'Virginia' ? 'selected' : '' }}>Virginia</option>
                            <option value="Washington" {{ old('state') == 'Washington' ? 'selected' : '' }}>Washington</option>
                            <option value="West Virginia" {{ old('state') == 'West Virginia' ? 'selected' : '' }}>West Virginia</option>
                            <option value="Wisconsin" {{ old('state') == 'Wisconsin' ? 'selected' : '' }}>Wisconsin</option>
                            <option value="Wyoming" {{ old('state') == 'Wyoming' ? 'selected' : '' }}>Wyoming</option>
                        </select>
                    </div>

    </div>

<!-- Initialize Select2 -->
<script>
    $(document).ready(function() {
        $('.state-select').select2({
            placeholder: "Select State"
        });
    });
</script>
                                            </div>

                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="mb-0">
                                                        <label class="form-label" for="zip-code">Zip / Postal code</label>
                                                        <input type="text" name="postal_code" class="form-control" id="zip-code" placeholder="Enter Postal code" value="{{ old('postal_code') }}" required>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!--<div class="mt-3">-->
                                            <!--    <label class="form-label" for="delivery-instructions">Delivery Instructions</label>-->
                                            <!--    <textarea name="delivery_instructions" class="form-control" id="delivery-instructions" rows="3" placeholder="Enter delivery instructions if any"></textarea>-->
                                            <!--</div>-->
                                            
                                            <!-- Payment method section HIDE -->
                                            <div class="mt-4" style="display: none;>
                                                <h5 class="font-size-14 mb-3">Payment method :</h5>
                                                <div class="row">
                                                    <div class="col-lg-4 col-sm-12">
                                                        <div data-bs-toggle="collapse">
                                                            <label class="card-radio-label">
                                                                <input type="radio" name="payment" id="pay-methodoption1" class="card-radio-input" onclick="showCreditCardForm()" value="card" {{ old('payment') == 'card' ? 'checked' : '' }} checked>
                                                                <span class="card-radio py-3 text-center text-truncate">
                                                                    <i class="bx bx-credit-card d-block h2 mb-3"></i>
                                                                    💳 Credit / Debit Card
                                                                </span>
                                                            </label>
                                                        </div>
                                                    </div>

                                                    <div class="col-lg-4 col-sm-12">
                                                        <div>
                                                            <label class="card-radio-label">
                                                                <input type="radio" name="payment" id="pay-methodoption3" class="card-radio-input" onclick="hideCreditCardForm()" value="cash" {{ old('payment') == 'cash' ? 'checked' : '' }}>
                                                                <span class="card-radio py-3 text-center text-truncate">
                                                                    <i class="bx bx-money d-block h2 mb-3"></i>
                                                                    <span>💵 Cash on Delivery</span>
                                                                </span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

<input type="hidden" name="bill" id="bill" value="{{ $cartItems->sum(function ($item) { return $item->product->price * $item->quantity; }) + $shippingCharge }}">

                                            <!-- Pay Now button -->
                                            <div class="mt-4">
                                                <button type="button" class="btn btn-primary btn-block" onclick="handlePayment()">Pay Now</button>
                                            </div>
                                        </form>

                                        <script>
                                            function handlePayment() {
                                                var paymentMethod = document.querySelector('input[name="payment"]:checked').value;
                                                if (paymentMethod === 'cash') {
                                                    document.getElementById('orderForm').submit();
                                                } else if (paymentMethod === 'card') {
                                                    var form = document.getElementById('orderForm');
                                                    var formData = new FormData(form);
                                                    var newForm = document.createElement('form');
                                                    newForm.method = 'POST';
                                                    newForm.action = '{{ route('stripe') }}';

                                                    // Add CSRF token
                                                    var csrfToken = document.querySelector('input[name="_token"]').value;
                                                    var csrfInput = document.createElement('input');
                                                    csrfInput.type = 'hidden';
                                                    csrfInput.name = '_token';
                                                    csrfInput.value = csrfToken;
                                                    newForm.appendChild(csrfInput);

                                                    // Append form data to the new form
                                                    formData.forEach(function(value, key) {
                                                        var input = document.createElement('input');
                                                        input.type = 'hidden';
                                                        input.name = key;
                                                        input.value = value;
                                                        newForm.appendChild(input);
                                                    });

                                                    document.body.appendChild(newForm);
                                                    newForm.submit();
                                                }
                                            }
                                        </script>

                                    </div>
                                </div>
                            </div>
                        </li>
                    </ol>
                </div>
            </div>
        </div>

<div class="col-md-6 col-xl-4">
    <div class="card checkout-order-summary">
        <div class="card-body">
            <div class="p-3 bg-light mb-3">
                <h5 class="font-size-5 mb-0"><b>Order Summary</b>
                    <span class="float-end ms-2"><b class="text-secondary">#{{ $orderNumber }}</b></span>
                </h5>
            </div>
            <div>
                @foreach ($cartItems as $item)
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <h5 class="font-size-14 text-truncate mb-1" title="Go to {{ $item->product->name }}">
                                <a href="{{ route('product.details', $item->product->id) }}" style="color: black">{{ $item->product->name }}</a>
                            </h5>
                            <p class="text-muted m-0"><b>Price:</b> ${{ $item->product->price }} |<b> Quantity:</b> {{ $item->quantity }}</p>
                        </div>
                    </div>
                @endforeach

                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="font-size-14 m-0"><b>Sub Total :</b></h5>
                    <div>${{ $cartItems->sum(function ($item) { return $item->product->price * $item->quantity; }) }}</div>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3" id="coupon-discount-container" style="display: none;">
                    <h5 class="font-size-14 m-0"><b>Coupon Discount :</b></h5>
                    <div class="text-success" id="coupon-discount">$0.00</div>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="font-size-14 m-0"><b>Platform Fee :</b></h5>
                    <div>Free</div>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="font-size-14 m-0"><b>Shipping Fee :</b></h5>
                    <div>{{ $shippingCharge > 0 ? '$' . $shippingCharge : 'Free' }}</div>
                </div>

                <div class="d-flex justify-content-between align-items-center bg-light p-2">
                    <h5 class="font-size-14 m-0"><b>Total Amount:</b></h5>
                    <span class="text-primary" id="total-amount">${{ $cartItems->sum(function ($item) { return $item->product->price * $item->quantity; }) + $shippingCharge }}</span>
                </div>

                <div class="d-flex justify-content-between align-items-center mt-3 position-relative">
                    

<input type="text" class="form-control me-2 coupon-code" placeholder="Enter Coupon Code" id="coupon-code" style="width: 100%;">

                        <i class="material-icons" style="position: absolute; right: 120px; top: 50%; transform: translateY(-50%); cursor: pointer; display: none;" id="clear-coupon">close</i>
                    
                    <button type="button" class="btn btn-primary" id="apply-coupon">Apply Coupon</button>
                </div>

                <p id="coupon-message" class="mt-2" style="display: none;"></p>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // Function to handle input in coupon code field
    $('#coupon-code').on('input', function() {
        var value = $(this).val().trim();
        if (value !== '') {
            $('#clear-coupon').show();
        } else {
            $('#clear-coupon').hide();
        }
    });

    // Function to apply the coupon
    $('#apply-coupon').click(function() {
        var couponCode = $('#coupon-code').val().trim();
        
        if (!couponCode) {
            $('#coupon-message').text('Please enter a coupon code.').addClass('text-danger').show();
            $('#coupon-discount-container').hide();
            return;
        }

        var subtotal = {{ $cartItems->sum(function ($item) { return $item->product->price * $item->quantity; }) }};
        var shippingCharge = {{ $shippingCharge }};
        var total = subtotal + shippingCharge;

        $.ajax({
            url: '{{ route('apply.coupon') }}',
            method: 'POST',
            data: {
                code: couponCode,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                console.log(response); // Log the response for debugging
                if (response.success) {
                    var discountPercentage = parseFloat(response.discount); // Assume this is a percentage
                    var discountAmount = total * (discountPercentage / 100); // Calculate discount amount
                    var newTotal = total - discountAmount; // Subtract the discount amount

                    $('#coupon-discount').text(discountPercentage.toFixed(2) + '%'); // Display percentage
                    $('#total-amount').text('$' + newTotal.toFixed(2)); // Update total amount display
                    $('#bill').val(newTotal.toFixed(2)); // Update hidden input value

                    // Set coupon code, discount percentage, and discount amount in hidden inputs
                    $('#coupon_code').val(couponCode);
                    $('#discount').val(discountAmount.toFixed(2)); // Set the discount amount
                    $('#discount_percentage').val(discountPercentage.toFixed(2)); // Set the discount percentage

                    $('#coupon-discount-container').show();
                    $('#coupon-message').hide();
                    
                    // Show SweetAlert success popup
                    Swal.fire({
                        icon: 'success',
                        title: 'Coupon Applied!',
                        text: 'Your discount has been applied successfully.',
                        timer: 3000, // Auto close alert after 3 seconds
                        showConfirmButton: false
                    });
                } else {
                    $('#coupon-message').text(response.message).addClass('text-danger').show();
                    $('#coupon-discount-container').hide();
                }
            },
            error: function() {
                $('#coupon-message').text('An error occurred while applying the coupon.').addClass('text-danger').show();
            }
        });
    });

    // Function to handle click on clear coupon button
    $('#clear-coupon').click(function() {
        $('#coupon-code').val(''); // Clear coupon input
        $('#coupon-discount-container').hide(); // Hide discount container
        $('#coupon-message').hide(); // Hide any messages
        var subtotal = {{ $cartItems->sum(function ($item) { return $item->product->price * $item->quantity; }) }};
        var shippingCharge = {{ $shippingCharge }};
        var total = subtotal + shippingCharge;
        $('#total-amount').text('$' + total.toFixed(2)); // Reset total amount
        $('#bill').val(total.toFixed(2)); // Update hidden input value

        // Clear coupon code, discount amount, and discount percentage from hidden inputs
        $('#coupon_code').val('');
        $('#discount').val('');
        $('#discount_percentage').val('');

        // Hide clear icon after clearing coupon
        $('#clear-coupon').hide();
    });
});
</script>

    </div>
    <!-- end row -->
</div>

@include('layouts.footer')