@extends('seller.layout.index')

{{-- ===========  meta Title  =================== --}}
@section('title')
    سبد خرید
@endsection
{{-- ===========  My Css Style  =================== --}}
@section('style')
    <link rel="stylesheet" href="{{ asset('home/css/cart.css') }}">
    <link rel="stylesheet" type="text/css" href="{{asset('home/css/checkout.css')}}">
    <style>
        .cart-main{
            padding: 5px 10px !important;
        }
        .cart-summary h5{
            background-color: black;
            color: white;
            padding: 5px;
        }
        .cart-summary{
            border: 1px solid #cecece;
            border-radius: 5px;
            overflow: hidden;
        }
        .remove_btn{
            display: flex !important;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 10px;
            background: red;
            color: white;
            justify-content: center;
            align-content: center;
        }
        .remove_btn > i {
            color: white !important;
            margin-top: 3px;
        }
        .p-relative{
            position: relative;
        }
        tr > td {
            text-align: center !important;
        }

        .number-input {
            border: none !important;
        }
        .shadow-box-md{
            width: 3rem;
            height: 3rem;
            display:flex;

            align-items:center;
        }
        .border-opacity-90{
            width:25%;
            border-width: 4px;
            border-color: rgb(34 197 94);

            border : 4px solid rgb(209 213 219);
        }
        .border-opacity-90.active{
            border : 4px solid rgb(34 197 94);
        }
        .flex{
            display:flex;
        }
        .h-full {
            height: 100%;
        }
        .font-semibold {
            font-weight: 600;
        }
        .shadow-box-md h1 {
            font-size: 1.6rem;
            line-height: 1.75rem;
            text-align:center;
            margin:0;
        }
        .bg-gray-200 {
            --tw-bg-opacity: 1;
            background-color: rgb(229 231 235);
        }
        input[type=number] {
            -moz-appearance:textfield;
        }
        .order-total > label{
            font-size: 1.6rem !important;
        }
        .cart-subtotal > label{
            font-size: 1.6rem !important;
        }
        .table .btn-close {
            top: -8px;
            left: -7px;
            font-size: 16px;
        }
        .table .btn-close {
            position: absolute;
            padding: 0;
            background: #fff;
            border: 2px solid #fff;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            -webkit-box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
            box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
            top: 3px;
            right: 8px;
        }
        td,th{
            min-width: 80px;
            width: auto;
            text-align: center;
            font-size: 14px;
            vertical-align: initial;
            padding: 11px;
        }
        tr{
            border-bottom: 1px solid #d5d5d5;
        }
        @media screen and (max-width: 576px) {
            td,th{
                min-width: 150px;
                text-align: center;
            }
            .min-width-200{
                min-width: 200px !important;
            }
        }
        .cart-thead{
            background: #000;
            color: white !important;
        }
        th{
            height: 85px;
            vertical-align:middle;
        }
        .cart-summary  .divider {
            display: inline-block;
            /* vertical-align: middle; */
            margin-right: 0 !important;
            height: auto !important;
            width: 100% !important;
            background-color: #000 !important;
        }
        .z-20 {
            z-index: 20;
        }
        .inline-flex {
            display: inline-flex;
        }
        .w-full {
            width: 100%;
        }
        .justify-between {
            justify-content: space-between;
        }

        .title-cart{
            font-size: 1.5rem;
            line-height: 1.5rem;
        }

        .bg-green-400 {
            --tw-bg-opacity: 1;
            background-color: rgb(74 222 128 );
        }
        .rounded-full {
            border-radius: 9999px;
        }

        .relative{
            position:relative;
        }
        .absolute{
            position:absolute;
        }
        .-top-10 {
            top: -2.5rem;
        }
        .top-0 {
            top: 0;
        }
        .header-cart{
            margin-bottom:50px
        }
    </style>
@endsection

@section('script')
    <script>
        function change_quantity(cart_id,type){
            let quantity = $('#quantity_'+cart_id).val();
            if (type==1) {
                quantity = parseInt(quantity) + 1;
            }else {
                quantity = parseInt(quantity) -1;
            }
            if (quantity==0){
                quantity=1;
                $('#quantity_'+cart_id).val(quantity);
            }else {
                $('#quantity_'+cart_id).val(quantity);
                updateQuantity(cart_id);
            }


        }

        function remove_cart(cart_id) {
            $.ajax({
                url: "{{ route('home.cart.remove') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    cart_id: cart_id,
                },
                dataType: "json",
                type: 'POST',
                beforeSend: function () {

                },
                success: function (msg) {
                    console.log(msg);
                    if (msg) {
                        if (msg[0] == 1) {
                            let message = msg[1];
                            swal({

                                text: message,
                                icon: 'success',
                                timer: 5000,
                                button: false

                            })
                            setTimeout(function () {
                                window.location.reload();
                            }, 1500)
                        }
                        if (msg[0] == 0) {
                            let message = msg[1];
                            swal({
                                title: 'error',
                                text: message,
                                icon: 'error',

                            })
                        }
                    }
                },
            })
        }

        function remove_carts() {
            $.ajax({
                url: "{{ route('home.carts.remove') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                },
                dataType: "json",
                type: 'POST',
                beforeSend: function () {

                },
                success: function (msg) {
                    console.log(msg);
                    if (msg) {
                        if (msg[0] == 1) {
                            let message = msg[1];
                            swal({

                                text: message,
                                icon: 'success',
                                timer: 5000,
                                button: false

                            })
                            setTimeout(function () {
                                window.location.href = "{{ route('home.index') }}";
                            }, 1500)
                        }
                        if (msg[0] == 0) {
                            let message = msg[1];
                            swal({
                                title: 'error',
                                text: message,
                                icon: 'error',

                            })
                        }
                    }
                },
            })
        }

        function updateQuantity(cart_id, tag) {
            let quantity = $('#quantity_'+cart_id).val();
            $.ajax({
                url: "{{ route('home.cart.update') }}",
                type: "POST",
                dataType: "json",
                data: {
                    quantity: quantity,
                    cart_id: cart_id,
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    if (response[0] === 1) {
                        window.location.reload();
                    }
                    if (response[0] === 0) {
                        swal({
                            title: " دقت کنید",
                            text: "تعداد وارد شده بیش از موجودی کالا است",
                            icon: "error",
                        });

                        $(tag).val(response[1]);
                    }
                }
            });
        }

        function checkCart() {
            $.ajax({
                url: "{{ route('home.cart.checkCartAjax') }}",
                type: "POST",
                dataType: "json",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    if (response[0] == 1) {
                        window.location.href = "{{ route('home.checkout') }}";
                    }
                    if (response[0] == 0) {
                        swal({
                            title: 'خطا',
                            text: response[1],
                            icon: 'error',
                            timer: 5000,
                            button: false
                        })
                        setTimeout(function () {
                            window.location.reload();
                        }, 5000)
                    }
                }
            });
        }

    </script>
@endsection

@section('content')

    <!-- Start of Main -->
    <div class="main cart">
        <!-- Start of PageContent -->
        <div class="page-content mt-2">
            <div  class="container header-cart mx-auto w-full h-full pt-9">
                <div class="relative pl-3 h-full">
                    <div class="flex pt-3 *:border-2 md:*:border-4">
                        <div class="border-opacity-90 active border-green-500 w-1/4"></div>
                        <div class="border-opacity-90 border-gray-300 w-1/4"></div>
                        <div class="border-opacity-90 border-gray-300 w-1/4"></div>
                        <div class="border-opacity-90 border-gray-300 w-1/4"></div>
                    </div>
                    <!-- text -->
                    <div class="absolute -top-10 inline-flex w-full justify-between">
                        <!-- not -->
                        <div class="">
                            <div class="w-8 h-8">
                            </div>
                        </div>
                        <!-- 1 -->
                        <div class="flex items-center">
                            <div class="z-20 flex items-center order-1">
                                <h1 class=" title-cart md:font-semibold text-zinc-700 pr-6 text-xs md:text-base">سبد خرید</h1>
                            </div>
                        </div>
                        <!-- 2 -->
                        <div class="flex items-center">
                            <div class="z-20 flex items-center order-1">
                                <h1 class=" title-cart md:font-semibold text-zinc-500 pr-4 text-xs md:text-base">جزئیات پرداخت</h1>
                            </div>
                        </div>
                        <!-- 3 -->
                        <div class="flex items-center">
                            <div class="z-20 flex items-center order-1">
                                <h1 class=" title-cart md:font-semibold text-zinc-500 pr-1 pl-2 text-xs md:text-base">تکمیل سفارش</h1>
                            </div>
                        </div>
                        <!-- not -->
                        <div class="pl-3">
                            <div class="w-8 h-8">
                            </div>
                        </div>
                    </div>
                    <!-- dots -->
                    <div class="absolute top-0 md:-top-1 inline-flex w-full justify-between">
                        <!-- not -->
                        <div class="flex items-center *:w-6 *:h-6 md:*:w-8 *:md:h-8">
                            <div class="z-20 flex items-center order-1 bg-gray-200 shadow-box-md rounded-full">
                                <h1 class="mx-auto font-semibold text-lg text-zinc-700"></h1>
                            </div>
                        </div>
                        <!-- 1 -->
                        <div class="flex items-center *:w-6 *:h-6 md:*:w-8 *:md:h-8">
                            <div class="z-20 flex items-center order-1 bg-green-400 shadow-box-md rounded-full">
                                <h1 class="mx-auto font-semibold text-base md:text-lg text-white">1</h1>
                            </div>
                        </div>
                        <!-- 2 -->
                        <div class="flex items-center *:w-6 *:h-6 md:*:w-8 *:md:h-8">
                            <div class="z-20 flex items-center order-1 bg-white shadow-box-md rounded-full">
                                <h1 class="mx-auto font-semibold text-base md:text-lg text-zinc-700">2</h1>
                            </div>
                        </div>
                        <!-- 3 -->
                        <div class="flex items-center *:w-6 *:h-6 md:*:w-8 *:md:h-8">
                            <div class="z-20 flex items-center order-1 bg-white shadow-box-md rounded-full">
                                <h1 class="mx-auto font-semibold text-base md:text-lg text-zinc-700">3</h1>
                            </div>
                        </div>
                        <!-- not -->
                        <div class="flex items-center pl-3 *:w-6 *:h-6 md:*:w-8 *:md:h-8">
                            <div class="z-20 flex items-center order-1 bg-gray-200 shadow-box-md rounded-full">
                                <h1 class="mx-auto font-semibold text-lg text-zinc-700"></h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- End of PageContent -->
    </div>
    <!-- End of Main -->
@endsection