@extends('home.layouts.index')

@section('title')
    سبد خرید
@endsection

@section('description')

@endsection

@section('keywords')

@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('home/css/cart.css') }}">
    <link rel="stylesheet" type="text/css" href="{{asset('home/css/checkout.css')}}">
    <style>
    .installment-container {
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 786px) {
            .modal{
                transform:translate(-150%,-50%) !important;
            }
        }

.content .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--main-color-one);
    color: white;
}

.installment-text {
    font-size: 24px;
    font-weight: bold;
    color: #28a745; /* سبز */
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
        figure img {
            width: 135px !important;
            max-width: unset;
        }
        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 #7273EC;
        }
        .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: #222;
            color: white !important;
        }
        th{
            height: 60px;
            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: #7273EC;
        }
        .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
        }
        .btn-close i {
            color:#000;
        }
        .btn-blue{

            color: #fff !important;
            background-color: #000 !important;
            border-color: #000 !important;
            border-radius: 25px;
            padding: 1.07em 2.15em !important;
        }

        .button-container {
            display: flex;
            gap: 10px;
        }
        .button-choose-gateway {
            border: 2px solid black;
            background-color: white;
            color: black;
            padding: 20px 20px;
            width:50%;
            border-radius:25px !important;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;

            transition: background-color 0.3s;
        }
        .button-choose-gateway:hover {
            background-color: #f0f0f0;
        }
        .button-choose-gateway .icon {
            margin-left: 5px;
        }

        .button-choose-gateway.active{
            color:#fff !important;
            background-color:#000 !important;
        }

    </style>
@endsection

@section('script')
    <script>


        function changeGateway(tag){
            console.log($(tag).data('gateway'));
            $('.button-choose-gateway').removeClass('active');
            $('.btn-checkout').removeClass('d-none');
            $('#input-gateway').val($(tag).data('gateway'))
            $(tag).addClass('active');
        };
        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: {
                    gateway:$('#input-gateway').val(),

                    _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')

    <div class="content">
        <div class="container-fluid">

            <div class="payment_navigtions">
                <div class="checkout-headers cart">
                    <ul>
                        <li class="nav active">
                            <a href="">
                                <i class="bi bi-cart"></i>
                                <p>سبد خرید</p>
                            </a>
                        </li>
                        <li class="nav">
                            <a href="">
                                <i class="bi bi-truck"></i>
                                <p>انتخاب آدرس و زمان ارسال</p>
                            </a>
                        </li>
                        <li class="nav">
                            <i class="bi bi-card-list"></i>
                            <p>پرداخت</p>
                        </li>
                    </ul>
                </div>

            </div>

        </div>

        <div class="container-fluid">
            <div class="cart-product">
                <div class="row gy-4">
                    <div class="col-lg-9 mb-5">
                        @foreach($carts as $key => $cart)



                        <div class="cart-product-item {{$key != 0 ? 'mt-3' : ''}}">
                            <div class="content-box">
                                <div class="container-fluid">
                                    <div class="cart-items">
                                        <div class="item">
                                            <div class="row gy-2">
                                                <div class="col-md-2 w-100-in-400">
                                                    <div class="image">
                                                                                       @if($cart->Product->is_installment)
            <div>
                <span  class="badge-installment cursor-pointer mb-2 px-2 text-white w-auto text-body2-strong rounded-full inline-flex items-center justify-center">   امکان خرید اقساطی</span>
                </div>
                @endif
                                                        <img src="{{ imageExist(env('PRODUCT_IMAGES_UPLOAD_PATH'),$cart->Product->primary_image ?? '-') }}" alt=""
                                                             class="img-fluid">
                                                    </div>
                                                </div>
                                                <div class="col-md-10 w-100-in-400">
                                                    <div class="d-flex justify-content-between align-items-md-start align-items-end flex-wrap">
                                                        <div class="d-flex align-items-start flex-column me-2">
                                                            <div class="title d-flex align-items-center flex-wrap">
                                                                <h6 class="font-16">
                                                                    {{ $cart->Product->name }}
                                                                    <br>
                                                                    {{ isset($cart->Color->name) ? $cart->Color->name : '' }}
                                                                    <br>
                                                                    @if(product_price_for_user_normal($cart->product_id,$cart->variation_id)[1]!=0)
                                                                    <span
                                                                        class="badge ms-2 danger-label rounded-pill">{{ number_format(persianToEnglishNumbers(product_price_for_user_normal($cart->product_id,$cart->variation_id)[1])) }}%</span>
                                                                    @endif
                                                                </h6>
                                                            </div>
                                                            <div class="cart-item-feature d-flex flex-column align-items-start flex-wrap mt-3">

                                                                <div class="item d-flex align-items-center mt-3">
{{--                                                                    <div class="counter">--}}
{{--                                                                        <input   min="{{ $cart->Product->minimum_measure_to_order }}" max="100000" id="quantity_{{  $cart->id }}" type="text" name="count" class="counter"--}}
{{--                                                                               value="1">--}}
{{--                                                                    </div>--}}
                                                                    <div class="remove danger-label ms-3">
                                                                        <a onclick="remove_cart({{ $cart->id }})" class="">
                                                                            <i class="bi bi-trash-fill"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="action d-flex flex-wrap flex-column justify-content-sm-end justify-content-center align-items-center">
                                                            <div class="product-box-price flex-column justify-content-end align-items-end">
                                                                @if(product_price_for_user_normal($cart->Product->id)[1]!=0)
                                                                <div class="product-box-price-discount mb-3">
                                                                    <del>{{number_format(product_price_for_user_normal($cart->Product->id)[0])}}</del>
                                                                </div>
                                                                @endif
                                                                <div class="product-box-price-price d-flex">
                                                                    <h5 class="title-font main-color-green-color h2 mb-2">
                                                                        {{number_format(product_price_for_user_normal($cart->product_id,$cart->variation_id)[2]) }}

                                                                    </h5>
                                                                    <p class="mb-0 text-muted-two ms-1 ">تومان</p>


                                                                </div>

                                                            </div>



                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="col-lg-3">
                        <div class="cart-canvases position-sticky top-0">
                            <div class="item">
                                <div class="factor">
                                    <div class="d-flex factor-item mb-3 align-items-center justify-content-between">
                                        <h5 class="title-font mb-0 h6">  کل سبد خرید</h5>
                                        <p class="mb-0 font-17">{{number_format(calculateCartPrice()['original_price'])}} تومان</p>
                                    </div>

                                    <div class="d-flex factor-item mb-3 align-items-center justify-content-between">
                                        <h5 class="title-font mb-0 h6">تخفیف کالا ها</h5>
                                        <p class="mb-0 font-18">{{number_format(calculateCartPrice()['total_sale'])}} تومان</p>
                                    </div>
                                    @if(auth()->user()->organ_id != 0)
                                        @php
                                        $total_sale = calculateCartPrice()['sale_price']- session()->get('coupon.amount');
                                        $discount_percent_sale_organ = auth()->user()->Organ->discount_percent;
                                        $total_sale = $total_sale -  (($total_sale*$discount_percent_sale_organ)/100);
                                        @endphp
                                        <div class="d-flex factor-item mb-3 align-items-center justify-content-between cart-total">
                                            <h5 class="title-font mb-0 h6">تخفیف سازمانی</h5>
                                            <p class="mb-0 font-18">{{number_format( (($total_sale*$discount_percent_sale_organ)/100))}} تومان</p>
                                        </div>

                                        <div class="d-flex factor-item mb-3 align-items-center justify-content-between cart-total">
                                            <h5 class="title-font mb-0 h6">مجموع</h5>
                                            <p class="mb-0 font-18">{{number_format($total_sale)}} تومان</p>
                                        </div>
                                    @else
                                    <div class="d-flex factor-item mb-3 align-items-center justify-content-between cart-total">
                                        <h5 class="title-font mb-0 h6">مجموع</h5>
                                        <p class="mb-0 font-18">{{number_format(calculateCartPrice()['sale_price']- session()->get('coupon.amount'))}} تومان</p>
                                    </div>
                                    @endif

                                    <div class="action mt-3 d-flex align-items-center justify-content-center">
                                        <a onclick="checkCart()"
                                           class="btn main-color-one-outline py-2 rounded-pill rounded-3 d-block w-100">تسویه
                                            حساب</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="show-discount-modal pointer py-3 mb-3" data-bs-toggle="modal" data-bs-target="#discountModal">
                <i class="bi bi-patch-exclamation main-color-one-color me-2" style="font-size: 40px;"></i>
                کوپن تخفیف دارید برای نوشتن کد اینجا کلیک
                کنید
            </div>
        </div>

    </div>
    <div class="discount-modal">
        <div class="modal fade" id="discountModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-md modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="exampleModalLabel">کد تخفیف</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <h4 class="font-16 mb-3">
                            اگر شما کد تخفیف دارید ، برای ثبت آن از طریق زیر اقدام کنید.
                        </h4>
                        <form  method="post" action="{{ route('home.coupons.check') }}">
                               @csrf
                            <div class="form-group">
                                <label for="discount" class="form-label">کد تخفیف:</label>
                                <input name="couponCode" type="text" class="form-control" placeholder="برای مثال eyd1402"
                                       id="discount">
                                              @error('couponCode')
                                        <p class="input-error-validation">
                                            <strong>{{ $message }}</strong>
                                        </p>
                                        @enderror
                            </div>
                            <button class="btn main-color-one-bg border-0">ثبت کد
                                تخفیف</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection