@extends('site.layout.layout')

@section('title',__('Shipping'))

@section('content')
    <main class="shipping_page shopping_cart_page product_details_page py-2">
        <!-- ------- breadcrumb ---------- -->
        <nav aria-label="breadcrumb" class="py-2 px-3 px-lg-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('home') }}"><i class="fas fa-arrow-right-long"></i> {{ __('Home') }}</a>
                </li>
                <li class="breadcrumb-item"><a href="{{ route('Site.carts.index') }}">{{ __('Shopping cart') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page"> {{ __('Shipping') }}</li>
            </ol>
        </nav>
        <section class="title_sec py-3 px-3 px-lg-4">
            <h3 class="section_title mb-2"> {{ __('Shipping') }}</h3>
            <p> {{ __('Please enter your shipping details to ensure your product arrives on time. Make sure to update your delivery address and any special notes that may help expedite the shipping process.') }}</p>
        </section>
        <section class="all_products row py-3 px-3 px-lg-4">
            <div class="col-xl-8">
                <div id="addressesCard">
                    <h6> {{ __('Shipping details') }}</h6>
                    @forelse(auth()->user()->addresses ?? [] as $address)
                        <div class="info_card d-xl-flex justify-content-between align-items-center my-3 position-relative">
                            <figure class="d-flex align-items-center mb-2 mb-xl-0">
                                <input id="address_{{ $address->id }}_input" name="address" class="form-check-input mt-0 mx-2" type="radio" @if(auth()->user()->addresses()->count() == 1) checked @endif>
                                <div class="figure_container">
                                    <img src="{{ asset('site/img/light/Feature Icon.png') }}" class="mode_icon img-fluid" data-light="{{ asset('site/img/light/Feature Icon.png') }}" data-dark="{{ asset('site/img/dark/Feature Icon.png') }}" alt="">
                                </div>
                                <figcaption class="mx-2">
                                    <h5> {{ $address->first_name . ' ' . $address->second_name }} </h5>
                                    <h5 class="my-2"> {{ $address->city?->getTranslation('city',app()->getLocale()) . ' ' . $address->region . ' ' . $address->street . ' ' . $address->distinct }}</h5>
                                    <h5> {{ $address->country_code}} {{ $address->mobile }}</h5>
                                </figcaption>
                            </figure>
                            <div class="buttons justify-content-end">
                                <button type="button" data-bs-toggle="modal" data-bs-target="#editAddress{{ $address->id }}"><i class="fas fa-pen-to-square"></i></button>
                            </div>
                        </div>
                        <div class="modal fade modal-md" id="editAddress{{ $address->id }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="section_title" id="staticBackdropLabel"> {{ __('Edit Address') }}</h1>
                                        <button type="button" data-bs-dismiss="modal" aria-label="Close"><i class="far fa-circle-xmark"></i></button>
                                    </div>
                                    <div class="modal-body pb-5">
                                        <div class="form-horizontal form-label-right">
                                            <form class="general_form" id="storeAddressForm{{ $address->id }}">
                                                @csrf
                                                <div class="row mx-0">
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="first_name"> {{ __('First Name') }}</label>
                                                        <input type="text" name="first_name" placeholder="{{ __('First Name') }}" class="form-control" id="first_name" value="{{ $address->first_name }}">
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="second_name"> {{ __('Second Name') }}</label>
                                                        <input type="text" name="second_name" placeholder="{{ __('Second Name') }}" class="form-control" id="second_name" value="{{ $address->second_name }}">
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="postal_code"> {{ __('Postal Code') }}</label>
                                                        <input type="text" name="postal_code" placeholder="{{ __('Postal Code') }}" class="form-control" id="postal_code" value="{{ $address->postal_code }}">
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="email"> {{ __('Email') }}</label>
                                                        <input type="text" name="email" placeholder="{{ __('Email') }}" class="form-control" id="email" value="{{ $address->email }}">
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="phone"> {{ __('Phone') }}</label>
                                                        <input type="tel" name="mobile" placeholder="{{ __('Phone') }}" class="form-control" id="phone" value="{{ $address->mobile }}">
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="city"> {{ __('City') }}</label>
                                                        <select class="form-control" name="city_id" id="city">
                                                            @foreach($cities ?? [] as $city)
                                                                <option value="{{ $city->id }}" {{ $city->id == $address->city_id ? 'selected' : ''}}>{{ $city->getTranslation('city',app()->getLocale()) }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="region"> {{ __('Region') }}</label>
                                                        <input type="text" name="region" placeholder="{{ __('Region') }}" class="form-control" id="region" value="{{ $address->region }}">
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="street"> {{ __('Street') }}</label>
                                                        <input type="text" name="street" placeholder="{{ __('Street') }}" class="form-control" id="street" value="{{ $address->street }}">
                                                    </div>
                                                    <div class="form-group col-lg-12 px-1 mb-2">
                                                        <label for="distinct"> {{ __('Distinct') }}</label>
                                                        <input type="text" name="distinct" placeholder="{{ __('Distinct') }}" class="form-control" id="distinct" value="{{ $address->distinct }}">
                                                    </div>
                                                    <div class="d-flex justify-content-center col-12 mt-5">
                                                        <button class="primaryBgBtn floatBtn w-50 text-center d-block" onclick="submitForm({{ $address->id }})"> {{ __('Save') }}</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @php
                            $address_country_iso = App\Helpers\CodeHelper::iso($address->country_code);
                        @endphp
                    @empty
                        <a type="button" data-bs-toggle="modal" data-bs-target="#addAddress" class="primaryBgBtn d-block text-center w-25 mt-3" style="margin: auto;">
                            <img src="{{ asset('site/img/dark/location.png') }}" class="mode_icon" data-light="{{ asset('site/img/dark/location.png') }}" data-dark="{{ asset('site/img/light/location.png') }}" alt=""> {{ __('Add New Address') }}
                        </a>
                        <div class="modal fade modal-md" id="addAddress" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="section_title " id="staticBackdropLabel"> {{ __('Add a new address') }}</h1>
                                        <button type="button" data-bs-dismiss="modal" aria-label="Close"><i class="far fa-circle-xmark"></i></button>
                                    </div>
                                    <div class="modal-body pb-5">
                                        <div class="form-horizontal form-label-right">
                                            <form class="general_form" id="storeAddressForm">
                                                @csrf
                                                <div class="row mx-0">
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="first_name"> {{ __('First Name') }}</label>
                                                        <input type="text" name="first_name" placeholder="{{ __('First Name') }}" class="form-control" id="first_name">
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="second_name"> {{ __('Second Name') }}</label>
                                                        <input type="text" name="second_name" placeholder="{{ __('Second Name') }}" class="form-control" id="second_name">
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="postal_code"> {{ __('Postal Code') }}</label>
                                                        <input type="text" name="postal_code" placeholder="{{ __('Postal Code') }}" class="form-control" id="postal_code">
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="email"> {{ __('Email') }}</label>
                                                        <input type="text" name="email" placeholder="{{ __('Email') }}" class="form-control" id="email">
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="phone"> {{ __('Phone') }}</label>
                                                        <input type="tel" name="mobile" placeholder="{{ __('Phone') }}" class="form-control" id="phone">
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="city"> {{ __('City') }}</label>
                                                        <select class="form-control" name="city_id" id="city">
                                                            @foreach($cities ?? [] as $city)
                                                                <option value="{{ $city->id }}">{{ $city->getTranslation('city',app()->getLocale()) }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="region"> {{ __('Region') }}</label>
                                                        <input type="text" name="region" placeholder="{{ __('Region') }}" class="form-control" id="region">
                                                    </div>
                                                    <div class="form-group col-lg-6 px-1 mb-2">
                                                        <label for="street"> {{ __('Street') }}</label>
                                                        <input type="text" name="street" placeholder="{{ __('Street') }}" class="form-control" id="street">
                                                    </div>
                                                    <div class="form-group col-lg-12 px-1 mb-2">
                                                        <label for="distinct"> {{ __('Distinct') }}</label>
                                                        <input type="text" name="distinct" placeholder="{{ __('Distinct') }}" class="form-control" id="distinct">
                                                    </div>
                                                    <div class="d-flex justify-content-center col-12 mt-5">
                                                        <button class="primaryBgBtn floatBtn w-50 text-center d-block" onclick="submitForm()"> {{ __('Save') }}</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforelse
                </div>
                <hr class="my-4">
                <h6 class="mb-3"> {{ __('Specify shipping companies for each product.') }}</h6>
                <div class="store">
                    @foreach ($stores as $store)
                    <p class="mb-2">{{ __('Store Title') }}: {{ $store->getTranslation('title', app()->getLocale()) }} </p>
                        @foreach ($store->products as $product)
                            @php
                                $cart = $product->carts()->where('user_id', auth()->id())->first();
                            @endphp
                            @if ($cart)
                                <input type="hidden" id="cartProductQty{{$product->id }}" value="{{ $cart->qty }}">
                                <div class="info_card mb-3">
                                    <figure class="d-flex align-items-center mb-2 mb-xl-0">
                                        <div class="product_container">
                                            <img src="{{ Storage::disk('public')->url($product->images?->first()->image) }}" class="img-fluid" alt="">
                                        </div>
                                        <figcaption class=" mx-2">
                                            <span>{{ __('Store Title') }}: {{ $store->getTranslation('title', app()->getLocale()) }}</span>
                                            <h5 class="my-2">{{ $product->getTranslation('description', app()->getLocale()) }}</h5>
                                            <p class="mb-2">{{ number_format($product->product_net_price, 2) }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></p>
                                        </figcaption>
                                    </figure>
                                    <div class="d-flex justify-content-between align-items-center">
                                        {{-- Shipping method placeholder --}}
                                        <!-- <input type="hidden" id="shippingCost_{{ $product->id }}"> -->
                                        <input type="hidden" id="shippingCost_{{ $product->id }}" data-store-id="{{ $product->store?->id }}" data-type-text="" data-cost="">

                                        <h5 id="selectedMethodText_{{ $product->id }}">
                                            @if(app()->getLocale() == 'en')
                                                <img src="{{ asset('site/img/shipping-icon-en.png') }}" alt=""> {{ __('No selection yet') }}
                                            @else
                                                <img src="{{ asset('site/img/shipping-icon.png') }}" alt=""> {{ __('No selection yet') }}
                                            @endif
                                        </h5>
                                        <button type="button" data-bs-toggle="modal" data-bs-target="#deliveryMethodModal{{ $product->id }}" class="secondaryBgBtn">
                                            {{ __('Choose the delivery method') }}
                                        </button>
                                    </div>
                                </div>
                                <!-- Modal -->
                                <div class="modal fade" id="deliveryMethodModal{{ $product->id }}" data-product-id="{{ $product->id }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 class="section_title " id="staticBackdropLabel"> {{ __('Select the shipping type') }}</h1>
                                                <button type="button" data-bs-dismiss="modal" aria-label="Close" onclick="updateShippingCost({{ $product->id }})"><i class="far fa-circle-xmark"></i></button>
                                            </div>
                                            <div class="modal-body">
                                                <form id="productColorsForm">
                                                    @foreach(collect($product->getTypes())->whereIn('id', json_decode($product->shipping_types))->values()->all() as $type)
                                                        @if($type['id'] == 1)
                                                            <label for="regular_delivery_input{{ $product->id }}">
                                                                <input type="radio" name="rating{{ $product->id }}" class="select_color" id="regular_delivery_input{{ $product->id }}" value="0" data-type-text="{{ __('PickUp') }}" onchange="handleShippingSelection({{ $product->id }})"/>
                                                                <div class="info_card mb-3">
                                                                    <figure class="d-flex align-items-center">
                                                                        <div class="figure_container">
                                                                            <img src="{{ asset('site/img/pickup.png') }}" class="img-fluid" alt="">
                                                                        </div>
                                                                        <figcaption class="mx-2">
                                                                            <h5>{{ __('PickUp') }}</h5>
                                                                            <!-- <p class="my-1"> شحن خلال 2-3 أيام</p> -->
                                                                            <p class="primary_span">0</p>
                                                                        </figcaption>
                                                                    </figure>
                                                                </div>
                                                            </label>
                                                        @elseif($type['id'] == 2)
                                                            <label for="fast_delivery_input{{ $product->id }}">
                                                                <input type="radio" name="rating{{ $product->id }}" class="select_color" id="fast_delivery_input{{ $product->id }}" value="{{ $type['cost'] }}" data-type-text="{{ __('Store Delivery') }}" onchange="handleShippingSelection({{ $product->id }})"/>
                                                                <div class="info_card mb-3">
                                                                    <figure class="d-flex align-items-center">
                                                                        <div class="figure_container">
                                                                            <img src="{{ asset('site/img/store-delivery.png') }}" class="img-fluid" alt="">
                                                                        </div>
                                                                        <figcaption class="mx-2">
                                                                            <h5> {{ __('Store Delivery') }}</h5>
                                                                            <!-- <p class="my-1"> شحن خلال 24 ساعة</p> -->
                                                                            <p class="primary_span"> {{ $type['cost'] }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></p>
                                                                        </figcaption>
                                                                    </figure>
                                                                </div>
                                                            </label>
                                                        @else
                                                            @foreach($product->store?->storeShippingSetting?->activeCompanies() ?? [] as $company)
                                                                <label for="direct_delivery_input{{ $product->id }}{{$company->id}}">
                                                                    <input type="radio" name="rating{{ $product->id }}" class="select_color" id="direct_delivery_input{{ $product->id }}{{$company->id}}" value="{{ $company->shipping_costs }}" data-type-text="{{ $company->title }}" data-type-id="{{ $company->id }}" onchange="handleShippingSelection({{ $product->id }})"/>
                                                                    <div class="info_card mb-3">
                                                                        <figure class="d-flex align-items-center">
                                                                            <div class="figure_container">
                                                                                <img src="{{ Storage::disk('public')->url($company->logo) }}" class="img-fluid" alt="">
                                                                            </div>
                                                                            <figcaption class="mx-2">
                                                                                <h5>{{ $company->title }}</h5>
                                                                                <!-- <p class="my-1"> المدينة - المنطقة</p> -->
                                                                                <p class="primary_span">{{ $company->shipping_costs }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></p>
                                                                            </figcaption>
                                                                        </figure>
                                                                    </div>
                                                                </label>
                                                            @endforeach
                                                        @endif
                                                    @endforeach
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    @endforeach
                </div>
                <hr class="my-4">
                <h6 class="mb-3"> {{ __('Choose payment method') }}</h6>
                <!-- <div class="info_card mb-2">
                    <div class="form-group d-flex align-items-center">
                        <input id="visa_input" name="payment_method" class="form-check-input mt-0" type="radio">
                        <label for="visa_input" class="mx-2">
                            <img src="{{ asset('site/img/visa.png') }}" alt="">
                            <img src="{{ asset('site/img/mastercard.png') }}" alt="">
                            Visa / Mastercard
                        </label>
                    </div>
                </div> -->
                <div class="info_card mb-2">
                    <div class="form-group d-flex align-items-center">
                        <input id="paymob_input" name="payment_method" value="paymob" class="form-check-input mt-0" type="radio">
                        <label for="paymob_input" class="mx-2">
                            <!-- <img src="{{ asset('site/img/paymobLogo.png') }}" alt="Paymob" style="height: 20px; margin-right: 5px;"> -->
                            <img src="{{ asset('site/img/PaymentMethodsLogo.png') }}" alt="payment methods" style="height: 50px;">
                        </label>
                    </div>
                </div>
                <div class="info_card mb-2">
                    <div class="form-group d-flex align-items-center">
                        <input id="cash_input" name="payment_method" value="cash" class="form-check-input mt-0" type="radio">
                        <label for="cash_input" class="mx-2"> {{ __('Cash on delivery') }}</label>
                    </div>
                </div>
                <div class="buttons justify-content-center mb-5">
                    <button type="button" id="payNowBtn" class="primaryBgBtn pay" onclick="completeOrder()"> {{ __('Pay now') }}</button>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="product_info">
                    <h3 class="section_title mb-3"> {{ __('Order summary') }}</h3>
                    @php
                        $subtotal = auth()->user()->carts()->sum('total');
                        $vat = $subtotal * 0.15;
                    @endphp

                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <h5>{{ __('Total products') }}</h5>
                            <input type="hidden" id="subTotalHere" value="{{ number_format($subtotal, 2) }}">
                            <h5>{{ number_format($subtotal, 2) }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></h5>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <h5>{{ __('Discount') }}</h5>
                            <input type="hidden" id="discountAmountCode">
                            <h5 class="in_stock"><span id="discountAmount">0</span> <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></h5>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <h5>{{ __('Shipping Cost') }}</h5>
                            <h5 id="totalShippingCost" class="in_stock">0 <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></h5>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <h5>{{ __('VAT') }} (15%)</h5>
                            <h5 id="vatForTotal">{{ number_format($vat, 2) }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></h5>
                        </div>
                    </div>
                    <form class="mb-3">
                        <h5> {{ __('Do you have a discount code?') }}</h5>
                        <div class="form-group d-flex mt-1">
                            <input type="text" class="form-control with_btn" id="code_input" placeholder="{{ __('Enter the discount code') }}">
                            <button type="button" class="primaryBorderBtn" onclick="checkDiscountCode()">{{ __('Add') }}</button>
                        </div>
                    </form>
                    <hr>
                    <div class="mt-3">
                        <div class="d-flex justify-content-between mb-1">
                            <h4> {{ __('Total') }}</h4>
                            <h4><span id="totalOrderValue">{{ number_format($subtotal + $vat, 2) }}</span> <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></h4>
                        </div>
                        <p>{{ __('Prices include tax') }}<span class="astric">*</span></p>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@push('scripts')
    <script>
        function checkDiscountCode()
        {
            var _token = $('meta[name="csrf-token"]').attr('content');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var code = $('#code_input').val();
            if(code)
            {
                $.ajax({
                    type: 'GET',
                    url: `/discount-codes/${code}`,
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(data)
                    {
                        data.status ? toastr.success('{{ __('Discount code value added') }}') : toastr.error('{{ __('The discount code is invalid') }}');

                        $('#totalOrderValue').text(data.value);

                        let subtotal =