@extends('layout.app')
@section('content')

    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{ asset('front/images/innerbnr1.png') }}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>Cart</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->

    <div class="col-md-11 mx-auto">
        <nav aria-label="breadcrumb" class="bg-white">
            <ol class="breadcrumb bg-white">
                <li class="breadcrumb-item"><a href="{{ route('front.home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Browser Art</a></li>
                <li class="breadcrumb-item active" aria-current="page">Cart</li>
            </ol>
        </nav>
    </div>

    @if(!empty($items) && count($items) > 0)
        <div class="checkOutStyle">
            <div class="container-fluid">
                <!-- <div class="row">
                    <div class="col-md-12 p-md-0">
                        <div class="title">
                            <h2 class="section-heading">Confirm Your Purchase</h2>
                        </div>
                    </div>
                </div> -->

                {{--                    @dd($item->options)--}}
                <div class="mainbdr">
                    <div class="maincntntbr">
                        <h3>Products Cart</h3>
                    </div>
                    @foreach($items as $item)

                        <div class="row cartItemCard">
{{--                            <div class="col-sm-2">--}}
{{--                                <img src="{{ asset('product_images/'.$item->images) }}" alt="">--}}
{{--                            </div>--}}
                            <div class="col-md-5 col-sm-4">
                                <div class="priceCont">
                                    <h4>
                                        {{ $item->name }}
                                        <span>SKU#: {{ $item->options['sku'] }}</span>
                                    </h4>
                                    <p><strong>Price: </strong>${{ $item->price }}</p>
                                </div>
                                @if(!empty($item->options['description']))
                                    <p><strong>Descriptions: </strong>{{ $item->options['description'] }}</p>
                                @endif

{{--                                <p class="description">{{ $item->options['description'] }}</p>--}}
                                <div class="descriptionCont">

                                    {{--Media--}}
                                    @if(!empty($item->options['media']))
                                    <p><strong>Media: </strong>{{ $item->options['media'] }}</p>
                                    @endif

                                    {{--Treatment--}}
                                    @if(!empty($item->options['treatment']))
                                    <p><strong>Treatment: </strong>{{ $item->options['treatment'] }}</p>
                                    @endif

                                    {{--Length--}}
                                    @if(!empty($item->options['length']))
                                    <p><strong>Length: </strong>{{ $item->options['length'] }}</p>
                                    @endif

                                    {{--Width--}}
                                    @if(!empty($item->options['width']))
                                    <p><strong>Width: </strong>{{ $item->options['width'] }}</p>
                                    @endif

                                    {{--Size--}}
                                    @if(!empty($item->options['size']))
                                    <p><strong>Size: </strong>{{ $item->options['size'] }}</p>
                                    @endif

                                    {{--Color Group--}}
                                    @if(!empty($item->options['color_group']))
                                        <p><strong>Color Group: </strong>
                                            <span
                                                style="color: {{ $item->options['color_group'] }}; font-weight: 700;">
                                            {{ $item->options['color_group'] }}</span>
                                        </p>
                                    @endif

                                    {{--Frame Color--}}
                                    @if(!empty($item->options['frame_color']))
                                    <p><strong>Frame Color: </strong>
                                        <span
                                            style="color: {{ $item->options['frame_color'] }}; font-weight: 700;">
                                            {{ $item->options['frame_color'] }}</span>
                                    </p>
                                    @endif

                                    {{--Frame DropDown Color--}}
                                    @if(!empty($item->options['frame_dropdown']))
                                    <p><strong>Frame Color: </strong>
                                        <span
                                            style="color: {{ $item->options['frame_dropdown'] }}; font-weight: 700;">
                                            {{ $item->options['frame_dropdown'] }}</span>
                                    </p>
                                    @endif

                                    {{--Mat Floated Dropdown Background Color--}}
                                    @if(!empty($item->options['floated_dropdown']))
                                        <p><strong>Mat Background Color: </strong>
                                            <span
                                                style="color: {{ $item->options['floated_dropdown'] }}; font-weight: 700;">
                                                {{ $item->options['floated_dropdown'] }}</span>
                                        </p>
                                    @endif

                                    {{--Mat Background Color--}}
                                    @if(!empty($item->options['mat_option_color']))
                                        <p><strong>Mat Background Color: </strong>
                                            <span
                                                style="color: {{ $item->options['mat_option_color'] }}; font-weight: 700;">
                                                {{ $item->options['mat_option_color'] }}</span>
                                        </p>
                                    @endif

                                    {{--DropDown Top Color--}}
                                    @if(!empty($item->options['dropdown_top_color']))
                                        <p><strong>Mat Top Color: </strong>
                                            <span
                                                style="color: {{ $item->options['dropdown_top_color'] }}; font-weight: 700;">
                                                {{ $item->options['dropdown_top_color'] }}</span>
                                        </p>
                                    @endif

                                    {{--DropDown Bottom Color--}}
                                    @if(!empty($item->options['dropdown_bottom_color']))
                                        <p><strong>Mat Bottom Color: </strong>
                                            <span
                                                style="color: {{ $item->options['dropdown_bottom_color'] }}; font-weight: 700;">
                                                {{ $item->options['dropdown_bottom_color'] }}</span>
                                        </p>
                                    @endif

                                    {{--DropDown Single Top Color--}}
                                    @if(!empty($item->options['single_color_dropdown']))
                                        <p><strong>Top Mat Color: </strong>
                                            <span
                                                style="color: {{ $item->options['single_color_dropdown'] }}; font-weight: 700;">
                                                {{ $item->options['single_color_dropdown'] }}</span>
                                        </p>
                                    @endif

                                    {{--Mat Single Color--}}
                                    @if(!empty($item->options['mat_single_color']))
                                        <p><strong>Top Mat Color: </strong>
                                            <span
                                                style="color: {{ $item->options['mat_single_color'] }}; font-weight: 700;">
                                                {{ $item->options['mat_single_color'] }}</span>
                                        </p>
                                    @endif

                                    {{--Mat Top Color--}}
                                    @if(!empty($item->options['mat_option_top_color']))
                                        <p><strong>Mat Top Color: </strong>
                                            <span
                                                style="color: {{ $item->options['mat_option_top_color'] }}; font-weight: 700;">
                                                {{ $item->options['mat_option_top_color'] }}</span>
                                        </p>
                                    @endif

                                    {{--Mat Bottom Color--}}
                                    @if(!empty($item->options['mat_option_bottom_color']))
                                        <p><strong>Mat Bottom Color: </strong>
                                            <span
                                                style="color: {{ $item->options['mat_option_bottom_color'] }}; font-weight: 700;">
                                                {{ $item->options['mat_option_bottom_color'] }}</span>
                                        </p>
                                    @endif

                                    {{--Mat Fillet Color--}}
                                    @if(!empty($item->options['fillet_color']))
                                        <p><strong>Fillet Color: </strong>
                                            <span
                                                style="color: {{ $item->options['fillet_color'] }}; font-weight: 700;">
                                                {{ $item->options['fillet_color'] }}</span>
                                        </p>
                                    @endif

                                    {{--Color--}}
                                    @if(!empty($item->options['color']))
                                        <p><strong>Color: </strong>
                                            {{ $item->options['color'] }}
                                        </p>
                                    @endif
                                </div>

                            </div>
                            <div class="col-md-3 col-sm-3">
                                <div class="quantity">
                                    <h3>quantity</h3>
                                </div>
                                <div class="proCounter">
                                    {{--                                    <span class="minus">-</span>--}}
                                    {{--                                    <input type="text" value="{{ $item->qty }}"/>--}}
                                    <input type="hidden" data-price="{{$item->price}}" value="{{$item->price}}">
                                    <input type="hidden" data-treatment="{{$item->options['treatment']}}" value="{{$item->options['treatment']}}">
                                    <input type="hidden" data-size="{{$item->options['size']}}" value="{{$item->options['size']}}">
                                    <input type="hidden" data-profile="{{$item->options['profile_style']}}" value="{{$item->options['profile_style']}}">
                                    <input type="hidden" data-frame="{{$item->options['frame_dropdown']}}" value="{{$item->options['frame_dropdown']}}">
                                    <input type="hidden" data-media="{{$item->options['media']}}" value="{{$item->options['media']}}">
                                    <input data-id={{ $item->id }} type="number"
                                           class="input-text qty text input-quantity "
                                           step="1" min="1" name="quantity[]"
                                           value="{{ $item->qty }}" title="Qty" size="4">
                                    {{--                                    <span class="plus">+</span>--}}
                                </div>
                            </div>
                            <div class="col-md-2">
                                <p class="totalPrice"><strong>Total
                                        Price: </strong>${{ $item->price * $item->qty }}</p>
                                {{--                                <a href="" class="delete"><i class="far fa-times"></i></a>--}}
                                <form action="{{ route('front.delete.cart', $item->rowId) }}" method="Post"
                                      enctype="multipart/form-data">
                                    @csrf
                                    <button type="submit" class="delete"><i class="far fa-times"></i></button>
                                </form>
                            </div>
                        </div>
                    @endforeach

                    {{--                    @dd(Cart::subTotal(), Cart::content(), Cart::total(), (Cart::total() - $item->taxRate))--}}
                    <div class="maincntntbr">
                        <h4 id="info_subtotal">${{ Cart::subTotal() }} <span>SUBTOTAL </span></h4>
                        <p>Shipping & taxes calculated at checkout. We accept Visa, MasterCard, American Express, <br>
                            and Discover cards.</p>
                        <a href="{{ route('front.checkout') }}" class="themeBtn">CHECK OUT</a>
                        <button class="themeBtn my3 update-cart disabled" onclick="window.location.reload()" disabled>
                            Update Cart
                        </button>
                    </div>
                </div>

            </div>
        </div>
    @else
        <div class="checkOutStyle">
            <div class="container-fluid">
                <div class="mainbdr">
                    <div class="maincntntbr">
                        <h3>Empty Cart</h3>
                        <a href="{{ route('front.home') }}">continue shopping</a>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <!-- END: Step 2 -->

@endsection
@push('script')
    <script>
        $(document).on('click', '.qty', function (e) {
            e.preventDefault();
            var quantity = $(this).val();
            var id = $(this).attr("data-id");
            var price = $(this).parent().find('input[data-price]').data('price');
            var treatment = $(this).parent().find('input[data-treatment]').data('treatment');
            var size = $(this).parent().find('input[data-size]').data('size');
            var profile = $(this).parent().find('input[data-profile]').data('profile');
            var frame = $(this).parent().find('input[data-frame]').data('frame');
            var media = $(this).parent().find('input[data-media]').data('media');

            // Calculate total price based on quantity and price
            var totalPrice = price * quantity;

            // Update the total price element
            $(this).closest('.col-md-3').next('.col-md-2').find('.totalPrice').html('<strong>Total Price: </strong>$' + totalPrice.toLocaleString());

            $.ajax({
                url: '{{ route('front.update.cart') }}',
                method: 'Post',
                data: {
                    _token: '{{ csrf_token() }}',
                    quantity: quantity,
                    id: id,
                    price: price,
                    treatment: treatment,
                    size: size,
                    profile: profile,
                    frame: frame,
                    media: media,
                },
                beforeSend: function () {
                    $('.update-cart').attr('disabled', true);
                    $('.update-cart').addClass('disabled');
                },
                success: function (response) {
                    $('.update-cart').removeAttr('disabled');
                    $('.update-cart').removeClass('disabled');
                    toastr.success(response.message);
                    $('.cartItem').text(response.count);
                    $('#info_subtotal').html('$'+totalPrice.toLocaleString()+' <span>SUBTOTAL </span>');
                },
                error: function (response) {
                    toastr.error(response.responseJSON.message);
                }
            });
        });

    </script>

@endpush