@extends('layouts.master')
@section('content')
    <!-- Breadcum Start -->
    @include('components.breadcum')
    <!-- Breadcum End -->
    <!-- Card Details Start -->
    <div class="card-details v1 pt-50 pb-50 pt-md-70 pb-md-70 pt-xl-100 pb-xl-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="pay-info-box buyer-info wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                        data-wow-duration="0.8s">
                        <div class="pay-head">
                            <p class="text-para-2 text-para-xl-1 text-bold">Shipping Address</p>
                        </div>
                        <div class="pay-body">
                            @forelse ($addresses as $address)
                                <div class="col-12 mb-3">
                                    <ul>
                                        <input class="shipping_address" data-id="{{ $address->id }}" type="radio"
                                            name="shipping_address" id="shipping_address1">
                                        <label class="form-check-label" for="shipping_address1">
                                            Select Address
                                        </label>
                                    </ul>
                                    <ul>
                                        <li><b>Name :</b> {{ $address->name }}</li>
                                        <li><b>Phone :</b> {{ $address->phone }}</li>
                                        <li><b>Email :</b> {{ $address->email }}</li>
                                        <li><b>Country :</b> {{ $address->country }}</li>
                                        <li><b>City :</b> {{ $address->city }}</li>
                                        <li><b>Zip Code :</b> {{ $address->zip_code }}</li>
                                        <li><b>Address :</b> {{ $address->address }}</li>
                                    </ul>
                                </div>
                                <hr>
                            @empty
                            @endforelse
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="pay-info-box billing-details wow animate__fadeInUp" data-wow-delay="0.3s"
                        data-wow-offset="20" data-wow-duration="0.8s">
                        <div class="pay-head">
                            <p class="text-para-2 text-para-xl-1 text-bold">Shipping Method</p>
                        </div>
                        <div class="pay-body">
                            <ul class="billing-list mb-4">
                                @foreach ($shippingMethods as $shippingMethod)
                                    @if ($shippingMethod->type === 'min_cost' && cartSubTotal() >= $shippingMethod->min_cost)
                                        <div class="form-check">
                                            <input class="shipping_method" type="radio" name="exampleRadios"
                                                id="shipping_method" value="{{ $shippingMethod->id }}"
                                                data-id="{{ $shippingMethod->cost }}">
                                            <label class="form-check-label" for="shipping_method">
                                                {{ $shippingMethod->name }}
                                                <span>cost: {{ formatAmount($shippingMethod->cost, $settings) }}</span>
                                            </label>
                                        </div>
                                    @elseif($shippingMethod->type === 'flat_cost')
                                        <div class="form-check">
                                            <input class="shipping_method" type="radio" name="exampleRadios"
                                                id="shipping_method" value="{{ $shippingMethod->id }}"
                                                data-id="{{ $shippingMethod->cost }}">
                                            <label class="form-check-label" for="shipping_method">
                                                {{ $shippingMethod->name }}
                                                <span>cost: {{ formatAmount($shippingMethod->cost, $settings) }}</span>
                                            </label>
                                        </div>
                                    @endif
                                @endforeach
                            </ul>
                            <hr>
                            <ul class="billing-list">
                                <li>
                                    <p class="text-para-2 text-para-xl-1 text-reguler">Subtotal</p>
                                    <p class="text-para-2 text-para-xl-1 text-reguler color-orange">
                                        {{ formatAmount(cartSubTotal(), $settings) }}</p>
                                </li>
                                <li>
                                    <p class="text-para-2 text-para-xl-1 text-reguler">Discount(-)</p>
                                    <p class="text-para-2 text-para-xl-1 text-reguler">
                                        {{ formatAmount(calculateCouponDiscount(), $settings) }}</p>
                                </li>
                                <li>
                                    <p class="text-para-2 text-para-xl-1 text-reguler">Shipping Cost</p>
                                    <p class="text-para-2 text-para-xl-1 text-reguler" id="shipping_fee">
                                        {{ formatAmount(0, $settings) }}</p>
                                </li>
                                <li>
                                    <p class="text-para-2 text-para-xl-1 text-bold">Total</p>
                                    <p class="text-para-2 text-para-xl-1 text-bold" id="total_amount"
                                        data-id="{{ getTotalWithAppliedCoupon() }}">
                                        {{ formatAmount(getTotalWithAppliedCoupon(), $settings) }}</p>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <form id="checkOutForm">
                        <input type="hidden" name="shipping_method_id" value="" id="shipping_method_id">
                        <input type="hidden" name="shipping_address_id" value="" id="shipping_address_id">
                        <button class="btn-anime v1 round-border-small mt-20" id="submitCheckOutForm" type="submit">Place
                            Order</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Card Details End -->
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });



            $('#shipping_method_id').val("");
            $('#shipping_address_id').val("");

            $('.shipping_method').on('click', function() {
                let shippingFee = parseInt($(this).data('id'));
                let currrentTotalAmount = $('#total_amount').data('id');
                let totalAmount = currrentTotalAmount + shippingFee;

                $('#shipping_method_id').val($(this).val());
                console.log($('#shipping_method_id').val($(this).val()))
                $('#shipping_fee').text("{{ $settings->currency_icon }}" + number_format($(this).data(
                    'id')));

                $('#total_amount').text("{{ $settings->currency_icon }}" + number_format(totalAmount));
            })

            $('.shipping_address').on('click', function() {
                $('#shipping_address_id').val($(this).data('id'));
            })

            // Submit check out form.
            $('#submitCheckOutForm').on('click', function(e) {
                e.preventDefault();
                if ($('#shipping_method_id').val() == "") {
                    // alert('Please select shipping method')
                    toastr.error('Please select shipping method');
                } else if ($('#shipping_address_id').val() == "") {
                    // alert('Please select shipping address')
                    toastr.error('Please select shipping address');
                } else {
                    $.ajax({
                        url: "{{ route('checkout') }}",
                        method: "POST",
                        data: $('#checkOutForm').serialize(),
                        beforeSend: function() {
                            $('#submitCheckOutForm').html(
                                '<i class="fas fa-spinner fa-spin fa-1x"></i>');
                        },
                        success: function(response) {
                            console.log(response)
                            if (response.status === 'success') {
                                $('#submitCheckOutForm').text(
                                    'Place Order');
                                window.location.href = response.redirect_url;
                            }
                        },
                        error: function(error) {
                            console.log(error)
                        }
                    })
                }


            })
        })
    </script>
@endpush