@extends('pages.layouts.app')

@section('content')
    @push('styles')
        <style>
            .shop_table {
                width: 100%;
                border-collapse: collapse;
                font-size: 14px;
            }

            .shop_table th,
            .shop_table td {
                text-align: left;
                padding: 8px;
                border-bottom: 1px solid #ddd;
            }

            .shop_table .product-details {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .product-img img {
                border-radius: 4px;
                width: 50px;
                height: 50px;
            }

            .product-info {
                display: flex;
                flex-direction: column;
            }

            .product-name {
                font-size: 14px;
                font-weight: bold;
            }

            .quantity-control {
                display: flex;
                align-items: center;
                gap: 5px;
            }

            .quantity-control input {
                width: 50px;
                text-align: center;
                font-size: 12px;
            }

            .quantity-control button {
                padding: 0 8px;
                font-size: 12px;
                cursor: pointer;
                background-color: #f5f5f5;
                border: 1px solid #ddd;
                border-radius: 3px;
            }

            .cart-subtotal,
            .woocommerce-shipping-totals,
            .order-total {
                font-weight: bold;
            }

            .empty-cart {
                text-align: center;
                font-size: 14px;
                color: #666;
            }

            .product-details {
                display: flex;
                align-items: center;
                gap: 10px;
                /* Adjust spacing between items */
            }

            .remove-container {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .remove-product {
                background-color: #f44336;
                color: white;
                border: none;
                border-radius: 50%;
                width: 20px;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                font-size: 12px;
            }

            .remove-product:hover {
                background-color: #d32f2f;
            }

            .product-img img {
                width: 50px;
                height: 50px;
                border-radius: 4px;
            }

            .product-info {
                display: flex;
                flex-direction: column;
                gap: 5px;
                /* Space between name and quantity controls */
            }

            .quantity {
                display: flex;
                gap: 5px;
                /* Adjust spacing between +/- buttons and input */
            }
        </style>
    @endpush
    <div class="main-page-wrapper">



        <!-- MAIN CONTENT AREA -->
        <div class="container">
            <div class="row content-layout-wrapper align-items-start">
                <div class="site-content col-lg-12 col-12 col-md-12 wd-builder-on" role="main">


                    <div data-elementor-type="wp-post" data-elementor-id="1646" class="elementor elementor-1646">

                        <div
                            class="elementor-element elementor-element-e7593fe e-flex e-con-boxed e-con e-parent e-lazyloaded">
                            <div class="e-con-inner">
                                <div
                                    class="elementor-element elementor-element-53f4e4c wd-wc-notices elementor-widget elementor-widget-wd_wc_notices">
                                    <div class="elementor-widget-container">
                                        <div class="woocommerce-notices-wrapper"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <form id="orderform" action="{{ route('placeOrder') }}" method="post"
                        class="checkout woocommerce-checkout" enctype="multipart/form-data">
                        @csrf

                        <div class="elementor elementor-1650">
                            <div
                                class="elementor-element elementor-element-f9211dc e-flex e-con-boxed e-con e-parent e-lazyloaded">
                                <div class="e-con-inner">
                                    <div
                                        class="elementor-element elementor-element-5b69235 e-con-full e-flex e-con e-child">
                                        <div
                                            class="elementor-element elementor-element-9d6f1a7 e-con-full e-flex e-con e-child">
                                            <div
                                                class="elementor-element elementor-element-540d883 wd-width-100 elementor-widget elementor-widget-wd_title">
                                                <div class="elementor-widget-container">
                                                    <div
                                                        class="title-wrapper set-mb-s reset-last-child wd-title-color-default wd-title-style-default wd-title-size-default text-left">


                                                        <div class="liner-continer">
                                                            <h4 class="woodmart-title-container title wd-fontsize-l">
                                                                {{ __('Shipping') }} &amp; {{ __('Billing Details') }}</h4>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="elementor-element elementor-element-0db8891 wd-billing-details elementor-widget elementor-widget-wd_checkout_billing_details_form">
                                                <div class="elementor-widget-container">
                                                    <div class="woocommerce-billing-fields">




                                                        <div class="woocommerce-billing-fields__field-wrapper">


                                                            <p class="form-row form-row-wide address-field thwcfd-required thwcfd-field-wrapper thwcfd-field-text validate-required"
                                                                id=""
                                                                data-o_class="form-row form-row-wide address-field thwcfd-required thwcfd-field-wrapper thwcfd-field-text validate-required">

                                                                <label for="selectaddress"
                                                                    class="">{{ __('Address') }}&nbsp;<abbr
                                                                        class="required" title="required">*</abbr></label>
                                                                <span class="woocommerce-input-wrapper">
                                                                    <select name="selectaddress" id="address"
                                                                        class="select" aria-required="true" autocomplete="1"
                                                                        style="height: 50px;">
                                                                        <option value="">{{ __('Select Address') }}
                                                                        </option>
                                                                        <option value="new_address"
                                                                            {{ !$hasOldAddress ? 'selected' : '' }}>
                                                                            {{ __('New Address') }}</option>
                                                                        @auth
                                                                            @if ($hasOldAddress)
                                                                                <option value="old_address">
                                                                                    {{ __('Old Address') }}</option>
                                                                            @endif
                                                                        @endauth
                                                                    </select>
                                                                </span>

                                                                <script>
                                                                    document.addEventListener('DOMContentLoaded', function() {
                                                                        const hasOldAddress = {{ $hasOldAddress ? 'true' : 'false' }};
                                                                        const selectElement = document.getElementById('address');

                                                                        if (!hasOldAddress) {
                                                                            // Automatically select "New Address" and hide "Old Address" option
                                                                            selectElement.value = 'new_address';
                                                                            const oldAddressOption = selectElement.querySelector('option[value="old_address"]');
                                                                            const newAddressElement = document.getElementById(
                                                                            'newaddress'); // Ensure this ID exists in your HTML
                                                                            if (newAddressElement) {
                                                                                newAddressElement.style.display = 'block'; // Explicitly show the element
                                                                            }
                                                                            if (oldAddressOption) {
                                                                                oldAddressOption.style.display = 'none';
                                                                            }
                                                                        }
                                                                    });
                                                                </script>

                                                            </p>

                                                            <div id="oldaddress" style="display: none">
                                                                <p class="form-row form-row-wide address-field thwcfd-required thwcfd-field-wrapper thwcfd-field-text validate-required"
                                                                    id="billing_city_field"
                                                                    data-o_class="form-row form-row-wide address-field thwcfd-required thwcfd-field-wrapper thwcfd-field-text validate-required">

                                                                    <label for="city"
                                                                        class="">{{ __('Old Address') }}&nbsp;<abbr
                                                                            class="required"
                                                                            title="required">*</abbr></label>
                                                                    <span class="woocommerce-input-wrapper">
                                                                        <select name="address_id" id="address_id"
                                                                            class="select " aria-required="true"
                                                                            autocomplete="1" data-placeholder=""
                                                                            style="height: 50px;">
                                                                            <option value="">
                                                                                {{ __('Select Address') }}
                                                                            </option>

                                                                            @foreach ($address as $addres)
                                                                                <option value="{{ $addres->id }}"
                                                                                    data-city="{{ $addres->city->id }}">
                                                                                    {{ $addres->first_name }}
                                                                                    {{ $addres->last_name }} -
                                                                                    {{ $addres->city->name }} -
                                                                                    {{ $addres->address }} -
                                                                                    {{ $addres->phone }}
                                                                                </option>
                                                                            @endforeach


                                                                        </select>
                                                                    </span>
                                                                </p>
                                                            </div>

                                                            <div id="newaddress" style="display: none">

                                                                <p class="form-row form-row-first thwcfd-required thwcfd-field-wrapper thwcfd-field-text validate-required"
                                                                    id="billing_first_name_field" data-priority="10"><label
                                                                        for="first_name"
                                                                        class="">{{ __('First Name') }}&nbsp;<abbr
                                                                            class="required"
                                                                            title="required">*</abbr></label><span
                                                                        class="woocommerce-input-wrapper"><input
                                                                            type="text" class="input-text "
                                                                            name="first_name" id="first_name" placeholder=""
                                                                            value="" aria-required="true"
                                                                            autocomplete="given-name"></span></p>

                                                                <p class="form-row form-row-last thwcfd-required thwcfd-field-wrapper thwcfd-field-text validate-required"
                                                                    id="billing_last_name_field" data-priority="20"><label
                                                                        for="last_name"
                                                                        class="">{{ __('Last Name') }}&nbsp;<abbr
                                                                            class="required"
                                                                            title="required">*</abbr></label><span
                                                                        class="woocommerce-input-wrapper"><input
                                                                            type="text" class="input-text "
                                                                            name="last_name" id="last_name" placeholder=""
                                                                            value="" aria-required="true"
                                                                            autocomplete="family-name"></span>
                                                                </p>

                                                                <p class="form-row form-row-wide address-field thwcfd-required thwcfd-field-wrapper thwcfd-field-text validate-required"
                                                                    id="billing_city_field"
                                                                    data-o_class="form-row form-row-wide address-field thwcfd-required thwcfd-field-wrapper thwcfd-field-text validate-required">

                                                                    <label for="city"
                                                                        class="">{{ __('Town/City') }}&nbsp;<abbr
                                                                            class="required"
                                                                            title="required">*</abbr></label>
                                                                    <span class="woocommerce-input-wrapper">
                                                                        <select name="city" id="city"
                                                                            class="select " aria-required="true"
                                                                            autocomplete="1" style="height: 50px;">
                                                                            <option value="">{{ __('Select City') }}
                                                                            </option>

                                                                            @foreach ($cities as $city)
                                                                                <option value="{{ $city->id }}">
                                                                                    {{ app()->getLocale() == 'ar' ? $city->name_ar : $city->name }}
                                                                                </option>
                                                                            @endforeach

                                                                        </select>
                                                                    </span>
                                                                </p>



                                                                <p class="form-row form-row-wide address-field thwcfd-required thwcfd-field-wrapper thwcfd-field-text validate-required"
                                                                    id="billing_address_1_field" data-priority="50"><label
                                                                        for="address"
                                                                        class="">{{ __('District and Street Address') }}&nbsp;<abbr
                                                                            class="required"
                                                                            title="required">*</abbr></label><span
                                                                        class="woocommerce-input-wrapper"><input
                                                                            type="text" class="input-text "
                                                                            name="address" id="address"
                                                                            placeholder="{{ __('District and Street Address') }}"
                                                                            value="" aria-required="true"
                                                                            autocomplete="address-line1"></span></p>


                                                                {{-- <p class="form-row form-row-wide address-field thwcfd-required thwcfd-field-wrapper thwcfd-field-text validate-required"
                                                                id="billing_address_2_field" data-priority="60"><label
                                                                    for="billing_address_2" class="">Apartment,
                                                                    suite, unit, etc.&nbsp;<abbr class="required"
                                                                        title="required">*</abbr></label><span
                                                                    class="woocommerce-input-wrapper"><input
                                                                        type="text" class="input-text "
                                                                        name="billing_address_2" id="billing_address_2"
                                                                        placeholder="Apartment, suite, unit, etc."
                                                                        value="" aria-required="true"
                                                                        autocomplete="address-line2"></span></p> --}}



                                                                <p class="form-row form-row-wide thwcfd-required thwcfd-field-wrapper thwcfd-field-tel validate-required validate-phone"
                                                                    id="billing_phone_field"><label for="phone"
                                                                        class="">{{ __('Phone') }}&nbsp;<abbr
                                                                            class="required"
                                                                            title="required">*</abbr></label><span
                                                                        class="woocommerce-input-wrapper"><input
                                                                            type="tel" class="input-text "
                                                                            name="phone" id="phone" placeholder=""
                                                                            value="" aria-required="true"
                                                                            autocomplete="tel"></span>
                                                                </p>

                                                            </div>


                                                        </div>


                                                    </div>

                                                </div>
                                            </div>
                                            <div
                                                class="elementor-element elementor-element-c73cb53 wd-shipping-details elementor-widget elementor-widget-wd_checkout_shipping_details_from">
                                                <div class="elementor-widget-container">
                                                    <div class="woocommerce-shipping-fields">
                                                    </div>
                                                    <div class="woocommerce-additional-fields">



                                                        <h3>{{ __('Additional information') }}</h3>


                                                        <div class="woocommerce-additional-fields__field-wrapper">
                                                            <p class="form-row notes thwcfd-field-wrapper thwcfd-field-textarea"
                                                                id="order_comments_field" data-priority="10"><label
                                                                    for="note"
                                                                    class="">{{ __('Order Notes') }}&nbsp;<span
                                                                        class="optional">({{ __('optional') }})</span></label><span
                                                                    class="woocommerce-input-wrapper">
                                                                    <textarea name="note" class="input-text " id="note"
                                                                        placeholder="{{ __('Notes about your order, e.g. special notes for delivery') }}" rows="2" cols="5"></textarea>
                                                                </span></p>
                                                        </div>


                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div
                                            class="elementor-element elementor-element-695ea74 e-con-full e-flex e-con e-child">
                                            <div
                                                class="elementor-element elementor-element-a90d5fc wd-width-100 elementor-widget elementor-widget-wd_title">
                                                <div class="elementor-widget-container">
                                                    <div
                                                        class="title-wrapper set-mb-s reset-last-child wd-title-color-default wd-title-style-default wd-title-size-default text-left">


                                                        <div class="liner-continer">
                                                            <h4 class="woodmart-title-container title wd-fontsize-l">
                                                                {{ __('Payment Information') }}</h4>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="elementor-element elementor-element-e21d0ad wd-btn-align-full-width wd-payment-methods elementor-widget elementor-widget-wd_checkout_payment_methods">
                                                <div class="elementor-widget-container">
                                                    <div id="payment" class="woocommerce-checkout-payment">
                                                        <ul class="wc_payment_methods payment_methods methods">
                                                            <li class="wc_payment_method payment_method_cod">
                                                                <input id="payment_method_cod" type="radio"
                                                                    class="input-radio" name="payment_method"
                                                                    value="cod" checked="checked"
                                                                    data-order_button_text="" style="display: none;">

                                                                <label for="payment_method_cod">
                                                                    {{ __('Cash on delivery') }} </label>
                                                                <div class="payment_box payment_method_cod">
                                                                    <p>{{ __('Pay with cash upon delivery.') }}</p>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                        <div class="form-row place-order">


                                                            <div class="woocommerce-terms-and-conditions-wrapper">
                                                                <div class="woocommerce-privacy-policy-text">
                                                                    <p> {{ __('Your personal data will be used to process your order, support your experience throughout this website, and for other purposes described in our') }}
                                                                        <a class="woocommerce-privacy-policy-link"
                                                                            target="_blank">{{ __('Privacy policy') }}</a>.
                                                                    </p>
                                                                </div>
                                                            </div>


                                                            <button type="submit" class="button alt"
                                                                name="woocommerce_checkout_place_order" id="place_order"
                                                                value="Place order"
                                                                data-value="Place order">{{ __('Place Order') }}</button>

                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="elementor-element elementor-element-bf9235e e-con-full e-flex e-con e-child">
                                        <div
                                            class="elementor-element elementor-element-f57a155 e-con-full e-flex e-con e-child">
                                            <div
                                                class="elementor-element elementor-element-5938f73 wd-width-100 elementor-widget elementor-widget-wd_title">
                                                <div class="elementor-widget-container">
                                                    <div
                                                        class="title-wrapper set-mb-s reset-last-child wd-title-color-default wd-title-style-default wd-title-size-default text-left">


                                                        <div class="liner-continer">
                                                            <h4 class="woodmart-title-container title wd-fontsize-l">
                                                                {{ __('Your Order') }}</h4>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="elementor-element elementor-element-352618b wd-order-table wd-manage-on elementor-widget elementor-widget-wd_checkout_order_review">
                                                <div class="elementor-widget-container">

                                                    <table class="shop_table woocommerce-checkout-review-order-table">
                                                        <thead>
                                                            <tr>
                                                                <th class="product-name">{{ __('Product') }}</th>
                                                                <th class="product-total">{{ __('Subtotal') }}</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @forelse ($order->orderItems as $item)
                                                                <tr class="cart_item">
                                                                    <td class="product-details">
                                                                        <a href="javascript:void(0);"
                                                                            class="remove remove_from_cart_button"
                                                                            data-product-id="{{ $item->product->id }}"
                                                                            aria-label="Remove Alfonso Buckley from cart">
                                                                            ×
                                                                        </a>
                                                                        <div class="product-img">

                                                                            <img src="{{ asset('storage/' . $item->product->images->first()->image) }}"
                                                                                alt="{{ $item->product->name }}"
                                                                                width="50" height="50">
                                                                        </div>
                                                                        @if ($item->color)
                                                                            <!-- Check if color exists -->
                                                                            <p class="product-color">
                                                                                <span
                                                                                    style="display: inline-block; width: 20px; height: 20px; background-color: {{ $item->color->hex_code }}; border: 1px solid #000; margin-right: 10px;">
                                                                                </span>
                                                                                {{ app()->getLocale() === 'ar' ? $item->color->name_ar : $item->color->name }}
                                                                            </p>
                                                                        @endif
                                                                        <div class="product-info">
                                                                            <span
                                                                                class="product-name">{{ app()->getLocale() === 'ar' ? $item->product->name_ar : $item->product->name }}</span>
                                                                            <div class="quantity">

                                                                                <input type="button" value="-"
                                                                                    class="minus"
                                                                                    data-product-id="{{ $item->product->id }}">

                                                                                <input type="number"
                                                                                    id="quantity{{ $item->product->id }}"
                                                                                    class="input-text qty text"
                                                                                    value="{{ $item->quantity }}"
                                                                                    aria-label="Product quantity"
                                                                                    min="1" max=""
                                                                                    name="quantity" step="1"
                                                                                    placeholder="" inputmode="numeric"
                                                                                    autocomplete="off" readonly>

                                                                                <input type="button" value="+"
                                                                                    class="plus"
                                                                                    data-product-id="{{ $item->product->id }}">

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="product-price">
                                                                        <span>{{ app()->getLocale() === 'ar' ? 'دأ ' : 'JD' }}{{ $item->total }}</span>
                                                                    </td>
                                                                </tr>
                                                            @empty
                                                                <tr>
                                                                    <td colspan="2" class="empty-cart">
                                                                        {{ __('Your cart is empty.') }}</td>
                                                                </tr>
                                                            @endforelse
                                                        </tbody>
                                                        <tfoot>
                                                            <tr class="cart-subtotal">
                                                                <th>{{ __('Subtotal') }}</th>
                                                                <td>{{ app()->getLocale() === 'ar' ? 'دأ ' : 'JD' }}<span
                                                                        class="woocommerce-Price-amount"
                                                                        id="subtotal_price">{{ $order->total_amount }}</span>
                                                                </td>
                                                            </tr>
                                                            <tr class="woocommerce-shipping-totals shipping">
                                                                <th>{{ __('Shipping') }}</th>
                                                                <td>{{ app()->getLocale() === 'ar' ? 'دأ ' : 'JD' }}<strong
                                                                        id="delivery_priceid"></strong>

                                                                </td>
                                                            </tr>
                                                            <tr class="order-total">
                                                                <th>{{ __('Total') }}</th>
                                                                <td>{{ app()->getLocale() === 'ar' ? 'دأ ' : 'JD' }}<strong
                                                                        id="total_price">{{ $order->total_amount }}</strong>
                                                                </td>
                                                            </tr>
                                                        </tfoot>
                                                    </table>

                                                </div>
                                            </div>
                                            {{-- <div class="elementor-element elementor-element-995361e wd-style-default wd-shipping-progress-bar text-left elementor-widget elementor-widget-wd_single_product_shipping_progress_bar"
                                                data-id="995361e" data-element_type="widget"
                                                data-widget_type="wd_single_product_shipping_progress_bar.default">
                                                <div class="elementor-widget-container">
                                                    <div class="wd-progress-bar wd-free-progress-bar">
                                                        <div class="progress-msg">
                                                            Your order qualifies for free shipping! </div>
                                                        <div class="progress-area">
                                                            <div class="progress-bar" style="width: 100%"></div>
                                                        </div>
                                                    </div>


                                                </div>
                                            </div> --}}
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
            </div><!-- .main-page-wrapper -->
        </div> <!-- end row -->
    </div> <!-- end container -->

    @push('scripts')
        <script src="{{ asset('home/checkout.js') }}?v={{ time() }}"></script>

        <script>
            var selectcity = '{{ __('Select City') }}';
        </script>
    @endpush
@endsection