@extends('layouts.front_end')
@section('title', 'Cart')
@section('content')
<div>
    <style>
        #headerOneCheckOut,
        #sticky-header,
        #headerThreeCheckout,
        #footerOneCheckOut {
            display: none;
        }

        @media only screen and (min-width: 768px) {
            #cartForMobile {
                display: none;
            }
        }

        @media only screen and (max-width: 768px) {

            #cartForDeskTop,
            #headerOneCheckOut,
            #sticky-header,
            #headerThreeCheckout {
                display: none;
            }
        }

        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            width: 100%;
            table-layout: fixed;
        }

        table caption {
            font-size: 1.5em;
            margin: .5em 0 .75em;
        }

        table tr {
            background-color: #fdfdfd;
            border: 1px solid #ddd;
            padding: .35em;
        }

        table th,
        table td {
            padding: .625em;
            text-align: center;
        }

        table th {
            font-size: .85em;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        @media screen and (max-width: 600px) {
            table {
                border: 0;
            }

            table caption {
                font-size: 1.3em;
            }

            table thead {
                border: none;
                clip: rect(0 0 0 0);
                height: 1px;
                margin: -1px;
                overflow: hidden;
                padding: 0;
                position: absolute;
                width: 1px;
            }

            table tr {
                border-bottom: 3px solid #ddd;
                display: block;
                margin-bottom: .625em;
            }

            table td {
                border-bottom: 1px solid #ddd;
                display: block;
                font-size: .8em;
                text-align: right;
            }

            table td::before {
                /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
                content: attr(data-label);
                float: left;
                font-weight: bold;
                text-transform: uppercase;
            }

            table td:last-child {
                border-bottom: 0;
            }
        }

        /* general styling */
        body {
            font-family: "Open Sans", sans-serif;
            line-height: 1.25;
        }

        #mobileResponsiveFooter {
            display: none;
        }
    </style>

    @if(\Illuminate\Support\Facades\Session::has('reorder_message'))
        <!--start confirmation modal -->
        <div class="modal fade confirm_modal_message" id="confirmModal" role="dialog" aria-labelledby="mySmallModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-sm m-0">
                <div class="modal-content p-3">
                    <h5><span><i class="fas fa-shopping-basket" style="color: #ff5c00;"></i></span>
                        <span style="color: #ff5c00;">PAIKARI ELECTRONICS</span>
                    </h5>
                    <hr style="margin: 3px"/>
                    <h4 style="font-size: 17px;margin-top: 19px;">আপনার পণ্য শপিং ব্যাগ যোগ করা হয়েছে. আপনি চাইলে শপিং ব্যাগে নতুন পণ্য যোগ করতে পারেন।</h4>
                    <div class="row" style="margin-top: 15px;">
                        <div class="col-12">
                            <center>
                                <button onclick="closeModal()" type="button" class="btn btn-primary" style="background-color: rgb(139, 39, 39); color: white; font-weight: bold;">বন্ধ করুন</button>
                            </center>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <script>
            $(document).ready(function (){
                $('.confirm_modal_message').modal('show');
            })

            function closeModal(){
                $('#confirmModal').modal('hide')
            }
        </script>
        <!--end confirmation modal -->
    @endif

    <!-- main-area -->
    <form action="{{ route('check-out') }}">
        <main>

            @if(\Illuminate\Support\Facades\Session::has('re-order-success'))
                <script>alert("আপনার পণ্যটি শপিং ব্যাগ এ অ্যাড হয়েছে ।  আপনি চাইলে নতুন প্রোডাক্ট শপিং ব্যাগ এ অ্যাড করতে পারেন । ")</script>
            @endif

            <!-- shop-cart-area -->
            <section class="shop-cart-area wishlist-area">
                <div class="text-center py-2 rounded"
                    style="background-color: black;position:fixed;width: 100%; z-index:2;">
                    <a href="{{ route('home') }}" class="float-left">
                        {{-- <i class="fas fa-backspace"
                        style="color: rgb(0, 0, 0);font-size: 30px;"></i> --}}
                        <i class="fas fa-arrow-left pl-1" style="color: white;font-size: 20px;"></i>
                    </a>
                    <span class="mt-1" style="color: white;font-weight: bold;font-size: 20px;">
                        @if (isset($language->cart_page_header_title))
                        {{$language->cart_page_header_title}}
                        @else
                        Shopping Bag
                        @endif
                    </span>
                </div>
                <div class="container pt-50">
                    <div class="row justify-content-center">
                        {{-- For Block In Mobile id="cartForDeskTop" --}}
                        {{-- Start Cart --}}
                        <div class="col-lg-8 mb-1" id="">
                            {{-- <h6 class="text-center" style="color: #ff5c00;">শপিং ব্যাগ</h6> --}}
                            <div class="table-responsive-xl">
                                @php $totalPrice = 0; @endphp
                                @if($cardBadge['data']['products'])
                                @php $totalPrice = $cardBadge['data']['total_price'] @endphp
                                <table class="">
                                    <thead>
                                        <tr>
                                            <th class="product-thumbnail"></th>
                                            {{-- <th scope="col" class="product-name" style="font-weight: bold;">পণ্য</th> --}}
                                            <th scope="col" class="product-price" style="font-weight: bold;">Price</th>
                                            <th scope="col" class="product-quantity" style="font-weight: bold;">Quantity
                                            </th>
                                            <th scope="col" class="product-subtotal" style="font-weight: bold;">SUBTOTAL
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        @foreach($cardBadge['data']['products'] as $productId => $product)

                                            @php
						$db_product_slug = \App\Models\Backend\ProductInfo\Product::where(['id'=>$product['product_id']])->first(['slug']);
                                                $min_order_quantity =  $product['minimum_order_quantity'];
                                                if($product['is_multiplication'] == 1){
                                                    $min_order_quantity = $product['multiplication_value'];
                                                }
                                            @endphp
                                        <tr id="row_{{ $productId }}" style="color: black;">
                                            <td class="product-thumbnail" style="border-style: none;">
                                                <a href="javascript:void(0)" class="wishlist-remove"
                                                    data-product-id="{{ $productId }}"><i
                                                        class="flaticon-cancel-1 text-danger"
                                                        style="font-weight: bold;"></i></a>
                                                <a href="{{ route('product-details',['id'=>$db_product_slug?->slug]) }}"
                                                    style="float:left;min-height: 110px;">
                                                    <img loading="lazy" @if($product['Info']['image']!='blank-product-image.png' )
                                                        src="{{ asset('storage/photo/'.$product['Info']['image']) }}"
                                                        @else src="{{ asset('image-not-available.jpg') }}" @endif
                                                        style="height: 90px;width:103px;129px;" alt="">
                                                </a>
                                                {{-- </td>
                                                <td class="product-name">
                                                    <h4> --}}
                                                <a href="{{ route('product-details',['id'=>$db_product_slug?->slug]) }}"
                                                    style="text-transform: capitalize;float: left;color: black;font-weight: bold;">
                                                    @if(strlen($product['Info']['product_name'])>23)
                                                    {{ substr($product['Info']['product_name'], 0,22).'...' }}
                                                    @else
                                                    {{ $product['Info']['product_name'] }}
                                                    @endif

                                                        @if(isset($product['Info']['modelData']) && $product['Info']['product_type'] == '1')
                                                            @php $model_json = json_decode($product['Info']['modelData']);@endphp
                                                            <p style="margin: 0px;padding: 0px;display: block; font-size: 11px;max-width: 160px;color: black;font-weight: 600;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">
                                                                @foreach($model_json as $mmodel)
                                                                    @php
                                                                        $mm = (array)$mmodel;
                                                                    @endphp
                                                                    <span> {{$mm['model']}} - {{$mm['qty']}} </span>,
                                                                @endforeach
                                                            </p>
                                                        @endif

                                                </a>



                                                {{-- </h4> --}}
                                                {{-- <p>Cramond Leopard & Pythong Anorak</p>
                                                    <span>65% poly, 35% rayon</span> --}}
                                            </td>
                                            <td data-label="মূল্য" class="product-price"
                                                style="border-style: none;color: black; @if(isset($product['Info']['modelData']) && $product['Info']['product_type'] == '1') margin-top: 24px; @endif">
                                                @if($currencySymbol)
                                                {{ $currencySymbol->symbol }}
                                                @endif
                                                <span id="product_unit_price_{{ $productId }}">{{ $product['unit_price'] }}</span>
                                            </td>
                                            <td data-label="সংখ্যা" class="product-quantity" style="color: black;">
                                                <div class="cart-plus float-right">
                                                    @if($product['product_type'] != '1')
                                                    <form action="#">
                                                        <div class="cart-plus-minus" data-product-id="{{ $productId }}" data-device="desktop">
                                                            <input type="text"
                                                                id="product_min_quantity_{{ $productId }}"
                                                                value="{{ $min_order_quantity }}" hidden>
                                                            <input type="text"
                                                                class="product_quantity product-quantity-cart"
                                                                id="product_quantity_{{ $productId }}"
                                                                data-product-id="{{ $productId }}"
                                                                data-minimum-quantity="{{ $min_order_quantity }}"
                                                                value="{{ $product['quantity'] }}">
                                                            <div class="dec qtybutton">-</div>
                                                            <div class="inc qtybutton">+</div>
                                                        </div>
                                                    </form>
                                                    @else
                                                        <div class="cart-plus-minus" data-product-id="{{ $productId }}" data-device="desktop">
                                                            <input type="text"
                                                                   id="product_min_quantity_{{ $productId }}"
                                                                   value="{{ $min_order_quantity }}" hidden>
                                                        <input type="text"
                                                               class="product_quantity product-quantity-cart"
                                                               id="product_quantity_{{ $productId }}"
                                                               data-product-id="{{ $productId }}"
                                                               data-minimum-quantity="{{ $min_order_quantity }}"
                                                               value="{{ $product['quantity'] }}" readonly></div>
                                                    @endif

                                                </div>
                                                <input type="hidden" id="checkout_page_product_type_{{ $productId }}" value="{{$product['product_type']}}">
                                                <input type="hidden" id="is_multiplication_{{ $productId }}" value="{{$product['is_multiplication']}}">
                                                <input type="hidden" id="multiplication_value_{{ $productId }}" value="{{$product['multiplication_value']}}">
                                                <br>
                                            </td>
                                            <td data-label="SUBTOTAL" class="product-subtotal"
                                                 style="color: black;">
                                                <span style="color: black;">
                                                    @if($currencySymbol)
                                                    {{ $currencySymbol->symbol }}
                                                    @endif
                                                    <span id="product_subtotal_{{ $productId }}" style="color: black">{{ $product['total_price'] }}</span>
                                                </span>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                @else
                                <div class="alert alert-warning text-center">
                                    @if (isset($language->no_product_in_shopping_bag_alert_text))
                                    {{$language->no_product_in_shopping_bag_alert_text}}
                                    @else
                                    There is no product added by you!
                                    @endif
                                </div>
                                @endif
                            </div>
                            {{-- <div class="shop-cart-bottom mt-20">
                                <div class="row">
                                    <div class="col-md-7">
                                        <div class="cart-coupon">
                                            <form action="#">
                                                <input type="text" placeholder="Enter Coupon Code...">
                                                <button class="btn">Apply Coupon</button>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="continue-shopping">
                                            <a href="{{route('search-category-wise')}}" class="btn">Continue
                            Shopping</a>
                        </div>
                    </div>
                </div>
</div> --}}
</div>
{{-- End Cart --}}
<div class="col-lg-4 col-md-8">
    <aside class="shop-cart-sidebar pt-3">
        <div class="shop-cart-widget py-0 my-0 pt-1">
            <h6 class="title text-center pt-3" style="font-size: 14px;">
                @if (isset($language->bill_total_title))
                {{$language->bill_total_title}}
                @else
                Bill Total
                @endif
            </h6>

            <form id="coupon_form" class="mb-3">
                @if($cardBadge['data']['coupon_discount_code'] != "") <span style="color: darkred;font-weight: bold;margin-bottom: 10px;display: inline-block">Apply Coupon "{{$cardBadge['data']['coupon_discount_code']}}"</span> @endif
                <div>
                    <input id="coupon_input" style="width: 150px;float: left;margin-right: 5px;" type="text" class="form-control" placeholder="Enter Coupon" aria-label="Coupon" aria-describedby="basic-addon2">
                    <button type="submit"  style="width:70px;margin: 0px;padding: 0px 20px;font-size: 14px;height: 20px !important;min-height: 39px;color: white;border: none;" id="basic-addon2">Apply</button>
                </div>
                @if($cardBadge['data']['coupon_discount_code'] != "") <span style="color: darkred;font-weight: bold;margin-bottom: 10px;display: inline-block"><a style="border: 0.4px solid #ff6000;color: #ff6000;padding: 5px;border-radius: 4px;margin-top: 10px;display: inline-block;" href="#" onclick="clearCoupon()">Clear <i class="flaticon-cancel-1 text-danger"></i> </a></span> @endif
                <p id="cupon_message"></p>
            </form>
            <script>

                $('#coupon_form').submit(function (e){
                    e.preventDefault();

                    let total_amount = {{ $totalPrice }};
                    let coupon = $("#coupon_input").val();

                    $.ajax({
                        method: 'POST',
                        url: '{{ route('ajax-apply-coupon') }}',
                        data: {
                            "total_amount": total_amount,
                            "coupon_code": coupon,
                        },
                        success: function(result, text) {
                            location.reload();
                        },
                        error: function(request, status, error) {
                            var responseText = JSON.parse(request.responseText);
                            //console.log(responseText.message)
                            var errorText = '';
                            $.each(responseText.errors, function(key, item) {
                                //console.log(key+' ---- ' +item);
                                errorText += item + '\n';
                            });
                            alert(errorText)
                        }
                    })

                })

                function clearCoupon(){
                    $.ajax({
                        method: 'POST',
                        url: '{{ route('ajax-apply-coupon-remove') }}',
                        success: function(result, text) {
                            location.reload();
                        },
                        error: function(request, status, error) {
                            var responseText = JSON.parse(request.responseText);
                            //console.log(responseText.message)
                            var errorText = '';
                            $.each(responseText.errors, function(key, item) {
                                //console.log(key+' ---- ' +item);
                                errorText += item + '\n';
                            });
                            alert(errorText)
                        }
                    })
                }
            </script>



            <ul>
                <li style="color: black;">
                    <span>
                        @if (isset($language->sub_total))
                        {{$language->sub_total}}
                        @else
                        SUBTOTAL
                        @endif
                        :
                    </span>
                    <span class="cart-total-price">
                        @if($currencySymbol)
                        {{ $currencySymbol->symbol }}
                        @endif
                        {{ $totalPrice }}
                    </span>
                </li>
                <li class="py-1" style="color: black;">
                    <span>
                        @if (isset($language->discount))
                        {{$language->discount}}
                        @else
                        Discount
                        @endif
                        :
                    </span>
                    <span class="">
                        @if($currencySymbol)
                        {{ $currencySymbol->symbol }}
                        @endif
                        {{$cardBadge['data']['coupon_discount']}}
                    </span>
                </li>
                <li class="cart-total-amount pt-2" style="color: black;font-weight: bold;">
                    <span>
                        @if (isset($language->total))
                        {{$language->total}}
                        @else
                        Total
                        @endif
                        :
                    </span>
                    <span class="amount cart-total-price">
                        @if($currencySymbol)
                        {{ $currencySymbol->symbol }}
                        @endif
                        {{ $totalPrice - $cardBadge['data']['coupon_discount'] }}
                        <br>
                        <br>
                    </span>
                </li>
            </ul>
            <button class="btn mb-3 btn-hover" id="orderFinishMobile">
                @if (isset($language->cart_page_order_finish_button_text))
                {{$language->cart_page_order_finish_button_text}}
                @else
                Finish Order
                @endif
            </button>
        </div>
    </aside>
</div>
</div>
</div>
</section>
<!-- shop-cart-area-end -->
<button class="btn btn-hover" style="position: fixed;bottom: 0px;right: 0px;width: 100%;background-color:red;"
    id="orderFinish">
    @if (isset($language->cart_page_order_finish_button_text))
      {{$language->cart_page_order_finish_button_text}}
    @else
    Finish Order
    @endif
</button>
</main>
</form>
@endsection

<!-- main-area-end -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
{{--<script>--}}
{{--    $(document).ready(function () {--}}

{{--    });--}}
{{--</script>--}}
</div>
@push('scripts')

@endpush