@extends("Front::Layout.master")

@section("title")
  پرداخت
@endsection

@section("content")
        <div class="container">
            <div class="rows">

                <div class="woocommerce" style="position: relative;"><div class="woocommerce-notices-wrapper"></div> <ul class="nav nav-tabs checkout-nav">
                        <li class="isComplete">
                            <a href="{{ route("cart.index") }}">
                                <p>سبد خرید </p>
                            </a>
                        </li>
                        <li class="isComplete">
                            <a data-toggle="tab" href="#info">
                                <p>اطلاعات ارسال</p>
                            </a>
                        </li>
                        <li class="sabt-button-li">
                            <a data-toggle="tab" href="#sabt" class="sabt-button">
                                <p>ثبت سفارش</p>
                            </a>
                        </li>

                    </ul>
                    <div class="row">
                        <div class="col-lg-9">
                            @includeIf("Front::cart_use_wallet")
                            @includeIf("Front::cart_use_club")
                                <div class="tab-content">

                                          <div id="info" class="tab-pane fade in active ">
                                              <form name="checkout" method="post" class="checkout woocommerce-checkout">
                                                 <div class="row" id="customer_details">
                                            <div class="col-12">
                                                <div class="woocommerce-billing-fields">
                                                    <div class="etelat-check">
                                                        <span>جزئیات پرداخت</span>
                                                        <p>لطفا جزئیات آدرس گیرنده سفارش را وارد کنید</p>
                                                    </div>


                                                    <div class="woocommerce-billing-fields__field-wrapper">
                                                        <p class="form-row form-row-first validate-required" id="billing_first_name_field">
                                                            <label for="billing_first_name" class="">نام&nbsp;
                                                                <abbr class="required" title="ضروری">*</abbr>
                                                            </label>
                                                            <span class="woocommerce-input-wrapper">
                                                                <input type="text" class="input-text " value="@if(isset($billing["billing_first_name"])) {{$billing["billing_first_name"]}} @endif" name="billing_first_name" id="billing_first_name" placeholder=""  >
                                                            </span>
                                                        </p>
                                                        <p class="form-row form-row-wide validate-required" id="billing_phone_field" >
                                                            <label for="billing_phone" class="">تلفن همراه&nbsp;
                                                                <abbr class="required" title="ضروری">*</abbr>
                                                            </label>
                                                            <span class="woocommerce-input-wrapper">
                                                                <input type="tel" class="input-text " value="@if(isset($billing["billing_phone"])) {{$billing["billing_phone"]}} @endif" name="billing_phone" id="billing_phone" placeholder="">
                                                            </span>
                                                        </p>
                                                        <p class="form-row address-field validate-required" id="billing_state_field"  data-o_class="form-row form-row-wide ">
                                                            <label for="billing_state" class="">استان&nbsp;
                                                                <abbr class="required" title="ضروری">*</abbr>
                                                            </label>

                                                            <span class="woocommerce-input-wrapper">
                                                               <input type="text" class="input-text " value="@if(isset($billing["billing_state"])) {{$billing["billing_state"]}} @endif" name="billing_state" id="billing_state" placeholder=""  >
                                                            </span>
                                                        </p>
                                                        <p class="form-row form-row-last validate-required" id="billing_last_name_field" data-priority="4">
                                                            <label for="billing_last_name" class="">نام خانوادگی&nbsp;
                                                                <abbr class="required" title="ضروری">*</abbr>
                                                            </label>
                                                            <span class="woocommerce-input-wrapper">
                                                                <input type="text" class="input-text " value="@if(isset($billing["billing_last_name"])) {{$billing["billing_last_name"]}} @endif" name="billing_last_name" id="billing_last_name" placeholder="" autocomplete="family-name">
                                                            </span>
                                                        </p>
                                                        <p class="form-row form-row-wide validate-email" id="billing_email_field" data-priority="5">
                                                            <label for="billing_email" class="">آدرس ایمیل&nbsp;<span class="optional">(اختیاری)</span>
                                                            </label>
                                                            <span class="woocommerce-input-wrapper">
                                                                <input type="email" class="input-text " value="@if(isset($billing["billing_email"])) {{$billing["billing_email"]}} @endif" name="billing_email" id="billing_email" placeholder=""  autocomplete="email username">
                                                            </span>
                                                        </p>
                                                        <p class="form-row address-field validate-required form-row-wide" id="billing_city_field" data-priority="6" data-o_class="form-row form-row-wide address-field validate-required">
                                                            <label for="billing_city" class="">شهر&nbsp;
                                                                <abbr class="required" title="ضروری">*</abbr>
                                                            </label>
                                                            <span class="woocommerce-input-wrapper">
                                                                <input type="text" class="input-text " name="billing_city" value="@if(isset($billing["billing_city"])) {{$billing["billing_city"]}} @endif" id="billing_city" placeholder=""  autocomplete="address-level2">
                                                            </span>
                                                        </p>
                                                        <p class="form-row address-field validate-required form-row-wide" id="billing_address_2_field" data-priority="1">
                                                            <label for="billing_address" class="screen-reader-text">آدرس کامل خود را وارد کنید<abbr class="required" title="ضروری">*</abbr></label><span class="woocommerce-input-wrapper">
                                                                <input type="text" class="input-text " value="@if(isset($billing["billing_address"])) {{$billing["billing_address"]}} @endif" name="billing_address" id="billing_address" placeholder="مثال : تهران - خیابان جمهوری - کوچه شهید ولایتی - پلاک 6 - واحد" autocomplete="address-line2" >
                                                            </span>
                                                        </p>
                                                        <p class="form-row address-field validate-postcode  form-row-wide" id="billing_postcode_field"  data-o_class="form-row form-row-wide address-field validate-postcode">
                                                            <label for="billing_postcode" class="">کدپستی (بدون فاصله و با اعداد انگلیسی)&nbsp;<abbr class="required" title="ضروری">*</abbr></label>
                                                            <span class="woocommerce-input-wrapper">
                                                                <input type="text" class="input-text " name="billing_postcode" value="@if(isset($billing["billing_postcode"])) {{$billing["billing_postcode"]}} @endif" id="billing_postcode" placeholder="" autocomplete="postal-code">
                                                            </span>
                                                        </p>

                                                    </div>

                                                </div>

                                            </div>



                                        </div>

                                                 <div class="actions checkout-action">

                                            <div class="coupon">
                                                <button type="submit"  class="checkout-button button alt wc-forward">
                                                    ثبت اطلاعات و ادامه فرایند خرید
                                                </button>
                                            </div>



                                            					<div style="font-size: 11px;
    color: #a6a3a3; float:left">
                                                مبلغ قابل پرداخت
                                                                    {{ $cart_products_total_price }}
                                            </div>
                                        </div>
                                              </form>
                                    </div>


                                        <div id="sabt" class="tab-pane fade in ">
                                            <form action="{{ route("order.add") }}" class="add_order" method="post">
                                                @csrf

                                                <div id="order_review" class="woocommerce-checkout-review-order">
                                                    <h3 id="order_review_heading">خلاصه سفارش شما</h3>

                                                    <table class="shop_table woocommerce-checkout-review-order-table">
                                                        <thead>
                                                        <tr>
                                                            <th class="product-name">محصول</th>
                                                            <th class="product-total">قیمت</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>

                                                        @if(!empty($cart_products))
                                                            @if($cart_products->isNotEmpty())
                                                                @foreach($cart_products as $cart_product)
                                                                    @if(is_object($cart_product))
                                                                        <tr class="cart_item">
                                                                            <td class="product-name">
                                                                                <a href="{{ $cart_product->url }}">
                                                                                    {{ $cart_product->title }}
                                                                                </a>
                                                                                <strong class="product-quantity">×&nbsp;{{ $cart[$cart_product->id]["quantity"] }}</strong>
                                                                            </td>
                                                                            <td class="product-total">
                                                                                {!! $cart_product->product_price_with_quantity($cart[$cart_product->id]["quantity"],$cart[$cart_product->id]["variation"]) !!}
                                                                            </td>
                                                                        </tr>
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                            @endif
                                                        </tbody>
                                                    </table>

                                                </div>
                                                <div id="coupon_box">
                                                    <h3 id="order_review_heading">کوپن تخفیف</h3>
                                                    <div class="coupon_box_content">
                                                        <input type="text" name="coupon" id="coupon" placeholder="کوپن تخفیف خود را وارد کنید...">
                                                        <button style="padding: 9px;" type="button" class="apply_coupon btn btn-sm button alt">اعمال کردن کوپن تخفیف</button>
                                                    </div>
                                                </div>
                                                <div id="order_gateway">
                                                    <h3 id="order_review_heading">نحوه پرداخت</h3>
                                                    @foreach($gateways as $gateway_key=>$gateway)
                                                        <div class="gateway_item @if($loop->index==0) active @endif" data-gateway="{{ $gateway_key }}">

                                                            <p>{{ $gateway["name"] }}</p>
                                                        </div>
                                                    @endforeach
                                                    <input type="hidden" name="gateway" value="{{ array_key_first($gateways) }}" id="gateway">
                                                </div>

                                                <button style="    margin-right: 60px;font-size: 14px;" type="submit" class="btn btn-lg button alt">پرداخت و ثبت سفارش</button>
                                            </form>
                                        </div>

                                </div>




                        </div>

                        @includeIf("Front::cart_total_box")
                    </div>
                    @includeIf("admin.partials.ajax-loading")
                    @push("js")
                        <script>
                        jQuery(document).ready(function($){
                            jQuery(".gateway_item").click(function(){  jQuery(".gateway_item").removeClass("active"); jQuery(this).addClass("active");var gateway=jQuery(this).data("gateway"); jQuery("input#gateway").val(gateway) })


                            jQuery(".checkout-button").click(function(e){
                                e.preventDefault()
                                jQuery(".admin-ajax-loading").addClass("active")
                                jQuery.ajaxSetup({
                                    headers: {
                                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                                    }
                                });

                                jQuery.ajax({
                                    type: "post",

                                    url: `{{ route("shop.save_billing") }}`,

                                    data: {"data": jQuery('form.checkout.woocommerce-checkout').serializeArray()},

                                    success: function (data) {
                                        e.preventDefault();
                                        document.querySelector(".sabt-button-li").classList.add("isComplete");

                                        $(".sabt-button").click()
                                        window.scrollTo({
                                            top: 100,
                                            left: 100,
                                            behavior: 'smooth'
                                        });
                                        $(".isComplete").click(function(){

                                            $(this).nextAll().removeClass("isComplete");
                                            $(this).addClass("isComplete");
                                            $(this).prevAll().addClass("isComplete");

                                        })
                                        jQuery(" .admin-ajax-loading").removeClass("active")
                                        console.log(data)
                                    },
                                    error: function (data) {
                                        jQuery(" .admin-ajax-loading").removeClass("active")
                                    }
                                })


                            })


                            jQuery(".apply_coupon").click(function(e) {
                                e.preventDefault()
                                jQuery(".admin-ajax-loading").addClass("active")
                                jQuery.ajaxSetup({
                                    headers: {
                                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                                    }
                                });

                                jQuery.ajax({
                                    type: "post",

                                    url: `{{ route("coupon.apply") }}`,

                                    data: {"coupon": jQuery('#coupon').val()},

                                    success: function (data) {
                                        jQuery(" .admin-ajax-loading").removeClass("active")
                                       // var json_data=jQuery.parseJSON(data);


                                        jQuery.toast({
                                            text : data.message,
                                            showHideTransition : 'slide',  // It can be plain, fade or slide
                                            heading: data.heading,
                                            icon: data.type,
                                            loader: true,        // Change it to false to disable loader
                                            loaderBg: "#90e084",
                                            textAlign: 'right',
                                            hideAfter : 5000,
                                        })

                                        if(data.type==="success"){
                                            jQuery("tr.cart-coupon").removeClass("d-none")
                                            jQuery("tr.cart-coupon td").html(jQuery('#coupon').val())
                                            if(data.delivery != null){
                                                jQuery("tr.cart-discount td").html(data.delivery)

                                            }
                                            jQuery("tr.order-total td").html(data.amount)
                                        }

                                    },
                                    error: function (data) {
                                        jQuery(" .admin-ajax-loading").removeClass("active")
                                    }
                                })
                            })

                        })
                    </script>
                    @endpush

                    <style>

                        .checkout-nav { display:flex;margin-bottom:25px;    justify-content: center;}

                        .checkout-nav li {
                            /* margin: 0 10px; */
                            position: relative;
                            width: 351px;
                            text-align: center;
                        }.checkout-nav li a {color:#404040;}
                        .checkout-action {    background: #fff;
                            border-top: 1px solid #999;
                            padding: 20px 60px 10px;}

                        .checkout-action .coupon{display: inline-block;}

                        .c-checkout-steps li.is-completed .c-checkout-steps__item {
                            background-color: #00bfd6;
                        }
                        ul.nav li::before {
                            content: "";
                            display: block;
                            position: absolute;
                            text-align: center;
                            border-radius: 100%;
                            width: 20px;
                            height: 20px;
                            background-color: #d0d0d0;
                            z-index: 1;
                            top: 101%;
                            left: 50%;
                            transform: translateX(-50%);
                        }
                        ul.nav li.isComplete a{
                            color: #00bfd6;
                        }
                        ul.nav li.isComplete::before{
                            background-color: #00bfd6;

                        }
                        ul.nav li::after {
                            content: "";
                            position: absolute;
                            width: 372px;
                            height: 3px;
                            border-radius: 3.5px;
                            background-color: #d0d0d0;
                            top: 93%;
                            right: -56%;
                            z-index: 0;
                            -webkit-transform: translateY(-50%);
                            transform: translateY(-50%);
                        }


                        ul.nav li:first-child::after{
                            display:none;
                        }
                        ul.nav li.isComplete::after{
                            background-color: #00bfd6;
                        }
                        @media(max-width:768px) {

                            ul.nav li::before {
                                top: 67%;
                            }.cart-collaterals {
                                 display: none;
                             }
                            ul.nav li::after {
                                width: 104px !important;
                                /* top: 89% !important; */
                                right: -51% !important;
                            }.checkout-nav li a p {margin-bottom:26px;}
                            .checkout-copun-box  p.form-row.form-row-first{width:100%;}.checkout-copun-box p.form-row.form-row-last {
                                                                                           position: absolute;
                                                                                           left: 22px !important;}
                        }

                        @media only screen and (max-width: 992px){
                            .main-content {
                                padding-top: 107px;
                            }}
                        ul.nav li::before {
                            top: 93%;
                        }.checkout-nav li a p {
                             font-size: 14px;
                         }
                        .woocommerce-form-coupon-toggle > p:first-child{
                            padding-top:20px;
                        }
                        .checkout-copun-box .woocommerce-info{border-top-color:transparent;background:#fff;}
                        .checkout-copun-box {
                            background: #fff;
                            padding: 0 15px 0;
                        }
                        .checkout-copun-box > *:not(.woocommerce-form-coupon-toggle){display:none;}
                        .woocommerce form .form-row input.input-text{border-radius: 5px;
                            border: 1px solid #e0e0e2 !important;
                            padding: 10px 12px 10px 36px;
                            width: 100%;
                            text-align: right;
                            font-size: 14px;
                            line-height: 24px;}
                        .checkout-copun-box   button.button {    height: 46px;}
                        .checkout-copun-box  p.form-row.form-row-last {
                            position: absolute;
                            left: 53%;
                            width: auto;

                        }.main-content{background: #f6f6f6;}
                    </style>
                    @push("js")
                        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.css" />
                        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js"></script>
                    @endpush
                </div>
            </div>
        </div>

@endsection
