@extends('layouts.frontend')
@section('content')

@include('layouts.frontend-partial.breadcrumb')

{{-- ================================
cart section begins here
================================= --}}
<section class="sectionGap">
    <div class="container ">
        <div class="overflow-x-auto">
            <table class="border border-gray-300  w-full">
                <thead class="bg-[#F5F1FF] text-darkblue">
                    <tr>
                        <th class="border border-gray-300 p-4 font-heading text-center w-16">SL</th>
                        <th class="border border-gray-300 p-4 font-heading text-left">Details</th>
                        <th class="border border-gray-300 p-4 font-heading w-36 text-right">Final Price</th>
                    </tr>
                </thead>
                <tbody>
                    @php($orderType = [1 => 'Link insertion', 2 => 'Guest posting'])
                    @php($slNo = 0)
                    @foreach ($cart as $id => $row)
                    @php($row = (object)$row)
                    <tr>
                        <td class="border border-gray-300 px-4 py-2 text-center">{{++$slNo}}</td>
                        <td class="border border-gray-300 px-4 py-2">
                            <span class="space-y-6 block">
                                <div class="flex items-center justify-between">
                                    <h3 class="text-darkblue text-xl font-medium">{{$row->title}}</h3>
                                    <button
                                        class="inline-flex items-center gap-2 text-red-600 font-medium mt-2 remove-from-cart"
                                        data-id="{{$id}}">
                                        <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                                            viewBox="0 0 512 512" height="1em" width="1em"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path fill="none" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="32"
                                                d="m112 112 20 320c.95 18.49 14.4 32 32 32h184c17.67 0 30.87-13.51 32-32l20-320">
                                            </path>
                                            <path stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"
                                                d="M80 112h352"></path>
                                            <path fill="none" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="32"
                                                d="M192 112V72h0a23.93 23.93 0 0 1 24-24h80a23.93 23.93 0 0 1 24 24h0v40m-64 64v224m-72-224 8 224m136-224-8 224">
                                            </path>
                                        </svg>
                                        Remove item
                                    </button>
                                </div>
                                <ul
                                    class="text-lg space-y-2 [&>li]:grid [&>li]:grid-cols-[220px_1fr] [&>li]:items-center [&>li]:pl-4 [&>li]:relative [&>li]:after:absolute [&>li]:after:size-2.5 [&>li]:after:rounded-full [&>li]:after:bg-primary [&>li]:after:left-0">
                                    <li>
                                        <span>Order type</span>
                                        <span>
                                            <span
                                                class="bg-primary  whitespace-nowrap leading-none text-sm text-white font-normal px-2.5 h-6 inline-flex items-center justify-center rounded-full">{{$orderType[$row->billing_type]}}</span>
                                        </span>
                                    </li>
                                    <li>
                                        <span>Base price</span>
                                        <span>{{$row->general_price}}</span>
                                    </li>
                                    @if($row->niche == "others")
                                    <li>
                                        <span>Others price</span>
                                        <span>+${{$row->other_price}}</span>
                                    </li>
                                    @endif
                                </ul>
                            </span>
                        </td>
                        <td class="border border-gray-300 px-4 py-2 text-right">${{$row->price}}</td>
                    </tr>
                    @endforeach
                    <tr>
                        <td colspan="3" class="border border-gray-300 p-4">
                            <form class="border w-auto inline-flex items-center">
                                <input type="text" id="couponCode" placeholder="Coupon code" autocomplete="off"
                                    class="inputField h-9 w-auto inline-block border-none ">
                                <button type="submit" class="primary-btn px-5 py-2 text-sm !rounded-none"
                                    id="applyCoupon" data-text="Apply coupon">Apply coupon
                                </button>
                                <button type="button" class="secondary-btn px-5 py-2 text-sm !rounded-none"
                                    id="removeCoupon">Cancel
                                    cart
                                </button>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="border border-gray-300 p-4 text-right text-primary text-lg">
                            Subtotal
                        </td>
                        <td class="border border-gray-300 p-4 text-right text-primary text-lg">
                            $<span id="cartSubtotal">{{number_format($subtotal, 2)}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="border border-gray-300 p-4 text-right text-primary text-lg">
                            Discount
                        </td>
                        <td class="border border-gray-300 p-4 text-right text-primary text-lg">
                            $<span id="cartDiscount">{{number_format($discount, 2)}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="border border-gray-300 p-4 text-2xl text-right text-darkblue">
                            Total Amount
                        </td>
                        <td class="p-4 text-right text-2xl text-darkblue">
                            $<span id="cartTotal">{{number_format($totalAmount, 2)}}</span>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="text-right mt-6">
                <a href="{{route('checkout')}}" class="primary-btn  " data-text="Proceed to checkout">Proceed to
                    checkout
                </a>
            </div>
        </div>
    </div>
</section>
{{-- ================================
cart section ends here
================================= --}}
@endsection


@push('footerPartial')
<script>
    @if(!empty($coupon->code))
        $('#couponCode').val('{{$coupon->code}}').attr('readonly', true);
        $('#applyCoupon').hide();
        $('#removeCoupon').show();
        @else
        $('#couponCode').val('').removeAttr('readonly');
        $('#applyCoupon').show();
        $('#removeCoupon').hide();
        @endif

        $(document).ready(function () {

            // Remove Item
            $('.remove-from-cart').on('click', function () {
                const productId = $(this).data('id');
                $.ajax({
                    url: "{{ route('cart.remove') }}",
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        product_id: productId,
                    },
                    success: function (response) {
                        console.log(response.message);
                        if (response.success) {
                            window.location.href = '{{ route("cart") }}';
                        }
                    },
                    error: function () {
                        console.log('Failed to add item to cart.');
                    }
                });
            });


            // Apply Coupon
            $('#applyCoupon').on('click', function (e) {
                e.preventDefault();
                const couponCode = $('#couponCode').val().trim();

                if (couponCode.length > 0) {

                    $.ajax({
                        url: "{{ route('cart.applyCoupon') }}",
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            coupon_code: couponCode
                        },
                        success: function (response) {
                            if (response.success) {
                                $('#cartSubtotal').text(response.subtotal.toFixed(2));
                                $('#cartDiscount').text(response.discount.toFixed(2));
                                $('#cartTotal').text(response.total.toFixed(2));

                                $('#couponCode').val(response.coupon.code).attr('readonly', true);
                                $('#applyCoupon').hide();
                                $('#removeCoupon').show();
                            }

                            toastr.success(response.message, 'Success')
                        },
                        error: function () {
                            //console.log('Failed to apply coupon code.');
                            toastr.error('Failed to apply coupon code.', 'Error')
                        }
                    });
                }
            });


            // Remove Coupon
            $('#removeCoupon').on('click', function (e) {
                e.preventDefault();
                const couponCode = $('#couponCode').val();

                if (couponCode.length > 0) {

                    $.ajax({
                        url: "{{ route('cart.removeCoupon') }}",
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            coupon_code: couponCode
                        },
                        success: function (response) {
                            if (response.success) {
                                $('#cartSubtotal').text(response.subtotal.toFixed(2));
                                $('#cartDiscount').text(response.discount.toFixed(2));
                                $('#cartTotal').text(response.total.toFixed(2));

                                $('#couponCode').val('').removeAttr('readonly');
                                $('#applyCoupon').show();
                                $('#removeCoupon').hide();

                                toastr.success(response.message, 'Success')
                            }
                        },
                        error: function () {
                            //console.log('Failed to apply coupon code.');
                            toastr.error('Failed to remove coupon code.', 'Error')
                        }
                    });
                }
            });
        });
</script>
@endpush