@extends(config('mio.theme').'.app')

@section('content')

    <div class="holder breadcrumbs-wrap mt-0">
        <div class="container">
            <ul class="breadcrumbs">
                <li><a href="{{asset('/')}}">{{__('general.home')}}</a></li>
                <li><span>{{__('general.order')}}</span></li>
            </ul>
        </div>
    </div>
    <div class="holder">
        <div class="container">
            <div class="row">
                <div class="col-md-10">
                    <div class="steps-progress">
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a disabled="disabled" class="nav-link active"><span>01.</span><span>{{__('general.orders.choose-address')}}</span></a>
                            </li>
                            <li class="nav-item">
                                <a disabled="disabled" class="nav-link active"><span>02.</span><span>{{__('general.orders.shipping-payment')}}</span></a>
                            </li>
                            <li class="nav-item">
                                <a disabled="disabled" class="nav-link" ><span>03.</span><span>{{__('general.orders.order-finish')}}</span></a>
                            </li>
                        </ul>
                        <div class="progress">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="5" style="width: 50%;"></div>
                        </div>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="step1">
                            <div class="tab-pane-inside">
                                <div class="card mb-lg-0">
                                    <div class="card-body">
                                        <div class="container boxed">
                                        <div class="row">
                                    @if ($errors->any())
                                        <div class="alert alert-danger">
                                            <ul>
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                    <h3 class="card-title">{{__('general.orders.choose-shipping')}} </h3>

                                    <form id="shippings-form" class="row">
                                        @foreach($shippings as $shipping)
                                            <div class="form-holder form-holder-2 col-4 sspng" data-iid="{{$shipping->id}}"
                                                 onclick="$('.shipping-id').val($(this).children('input').val())">
                                                <input type="radio" name="shipping" class="select-shipping"
                                                       data-id="{{$shipping->id}}" id="pay-{{$shipping->id}}"
                                                       value="{{$shipping->id}}" @if($shipping->default) checked @endif>
                                                <label class="pay-{{$shipping->id}}-label" for="pay-{{$shipping->id}}">
                                                    <div class="imgWrap" style="height: 65px;">
                                                        <img src="{{asset($shipping->shipping_logo)}}"
                                                             alt="pay-{{$shipping->id}}" style="height: 100%; padding: 0;">
                                                    </div>
                                                    {{$shipping->shipping_name}}
                                                </label>
                                            </div>
                                        @endforeach
                                    </form>
                                    <div class="row" style="margin-top: 40px">
                                        <p><input type="checkbox" id="agreement-cb"><label for="agreement-cb"><a
                                                    href="javascript:;" onclick="aggreementModal()">
                                                    Mesafeli satış sözleşmesini </a>kabul ediyorum.</label></p>
                                        <p class="alert alert-danger" style="display: none" id="agr-alert"></p>
                                    </div>

                                    <div class="payment-area">
                                        <ul class="nav nav-tabs mb-3 mt-3" id="pills-tab" role="tablist">
                                            @foreach($payments as $k=>$payment)
                                                <li class="nav-item pr-4" >
                                                    <a class="nav-link payment_t @if($k == 0) active @endif"
                                                       id="payment-tab-{{$payment->id}}" data-toggle="pill"
                                                       href="#payment-{{$payment->id}}"
                                                       data-aditional="@if($payment->aditional_price){{$payment->aditional_price.'_'.$payment->payment_code.'_'.$payment->aditional_type.'_'.$order->total_order}}@endif"
                                                       role="tab" aria-controls="pills-home"
                                                       aria-selected="true">{{$payment->name}}</a>
                                                </li>
                                            @endforeach

                                        </ul>
                                        <div class="tab-content" id="pills-tabContent">
                                            @foreach($payments as $k => $payment)
                                                <div class="tab-pane @if($k == 0) show active @endif"
                                                     id="payment-{{$payment->id}}" role="tabpanel"
                                                     aria-labelledby="pills-home-tab">

                                                    <div class="payment-area">
                                                        {!! \Illuminate\Support\Facades\App::call('\\Modules\\'.$payment->module_name.'\Http\Controllers\\'.$payment->module_name.'Controller@index',['order_id' => $order->id,'module_id' => $payment->id]) !!}
                                                    </div>

                                                </div>
                                            @endforeach
                                        </div>

                                    </div>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 pl-lg-8 mt-2 mt-md-0">
                    <h2 class="custom-color">{{__('general.order_summary')}}</h2>
                    <div class="panel-group panel-group--style1 prd-block_accordion" id="productAccordion2">
                        <div class="panel">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#productAccordion2" href="#collapse3">{{__('general.my_cart')}}</a>
                                    <span class="toggle-arrow"><span></span><span></span></span>
                                </h4>
                            </div>
                            <div id="collapse3" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div class="form-inline mt-2">
                                        <div class="cart-table cart-table--sm pt-3 pt-md-0 mt-2">
                                            <div class="cart-table-prd cart-table-prd--head py-1 d-none d-md-flex">
                                                <div class="cart-table-prd-image text-center">
                                                    {{__('general.image')}}
                                                </div>
                                                <div class="cart-table-prd-content-wrap">
                                                    <div class="cart-table-prd-info">{{__('general.product')}}</div>
                                                    <div class="cart-table-prd-qty">{{__('general.quantity')}}</div>
                                                    <div class="cart-table-prd-price">{{__('general.total')}}</div>
                                                    <div class="cart-table-prd-action">&nbsp;</div>
                                                </div>
                                            </div>
                                            @if(!empty($order->products))

                                                    {{csrf_field()}}
                                                    @foreach($order->products as $product)
                                                        <div class="cart-table-prd">
                                                            <div class="cart-table-prd-image">
                                                                <img class="lazyload fade-up" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{$product['image_dest']}}" alt="">
                                                            </div>
                                                            <div class="cart-table-prd-content-wrap">
                                                                <div class="cart-table-prd-info">

                                                                    <h2 class="cart-table-prd-name">{{$product['product_name']}}</h2>
                                                                    <ul>
                                                                        @if(@json_decode($product['options'],true))
                                                                    @foreach(json_decode($product['options'],true) as $opts)
                                                                        <li>{{$opts['option_name']}} : {{$opts['value_name']}}</li>
                                                                    @endforeach
                                                                            @endif
                                                                    </ul>
                                                                </div>
                                                                <div class="cart-table-prd-qty">
                                                                    <div class="qty qty-changer">
                                                                       <label>{{$product['quantity']}}</label>
                                                                    </div>
                                                                </div>
                                                                <div class="cart-table-prd-price-total">
                                                                    {{priceFormat($product['product_price'])}}
                                                                </div>
                                                            </div>
                                                            <div class="cart-table-prd-action">

                                                            </div>
                                                        </div>
                                                    @endforeach
                                            @endif
                                        </div>

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

                    <div class="mt-2"></div>
                    <div class="card-total">


                        <div class="row d-flex">
                            <div class="col card-total-txt" style="font-size: 15px">{{__('general.sub_total')}}</div>
                            <div class="col-auto card-total-price text-right">{{priceFormat($order->total_price)}}</div>
                        </div>
                        @if(isset($order->totals))
                            @foreach($order->totals as $totals)
                                <div class="row d-flex">
                                    <div class="col card-total-txt" style="font-size: 15px">{{$totals->name}}</div>
                                    <div class="col-auto card-total-price text-right">{{priceFormat($totals->price)}}</div>
                                </div>
                            @endforeach
                        @endif
                        <div class="row d-flex">
                            <div class="col card-total-txt" style="font-size: 15px">{{__('general.cart_total')}}</div>
                            <div class="col-auto card-total-price text-right">{{priceFormat($order->total_order)}}</div>
                        </div>
                    </div>
                    <div class="mt-2"></div>



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

        <div id="popupAggreement" class="modal-info-content js-aggreementmodal newslettermodal--classic p-0" style="display: none;" data-pause="12000" data-expires="0" data-only-index="false">
            <div class="row align-items-center">
                <div class="col-sm-18" style="padding: 50px">
                    <p class="popup-newsletter-content">
                        {!! $order->order_agreement !!}
                    </p>
                </div>
            </div>
        </div>
        <div data-fancybox-close class="fancybox-close-small modal-close"><i class="icon-close"></i></div>




@endsection
@section('css')

    <style>

    </style>

@endsection
@section('structured')

    <script>
        fbq('track', 'AddPaymentInfo');
    </script>
    <script>
        gtag('event', 'checkout_progress', {
            "items": [
                    @if(isset($order->products) && $order->products)
                    @foreach($order->products as $k => $product)
                {
                    "id": "{{$product->product_id}}",
                    "name": "{{$product->product_name}}",
                    "quantity": "{{$product->quantity}}",
                    "price": "{{number_format($product->product_price,2)}}"
                } @if($k+1 < count($order->products)) , @endif
                @endforeach
                @endif
            ],
            @if(\Illuminate\Support\Facades\Session::get('coupon_code'))
            "coupon": "{{\Illuminate\Support\Facades\Session::get('coupon_code')}}"
            @else
            "coupon": ""
            @endif

        });

    </script>
    <script>

        $('.sspng').on('click', function () {

            gtag('event', 'set_checkout_option', {
                "checkout_step": 1,
                "checkout_option": "shipping method",
                "value": $(this).attr('data-iid')
            });
        });
    </script>
@endsection
@section('js')
    @yield('js-inside')
<script>
    function aggreementModal() {
        $.fancybox.open([{
            src: '.js-aggreementmodal',
            type: 'inline',
            btnTpl: {
                smallBtn: '<div data-fancybox-close class="fancybox-close-small modal-close"><i class="icon-close"></i></div>'
            }
        }], {
            buttons: ['close'],
            touch: false
        });
    }
</script>
    <script>
        $('#waiting-t').modal('show');
        $('.payment_t').on('click', function () {
            var data = $(this).attr('data-aditional');
            $.get('{{route('get-payment-discount')}}?data=' + data, function (response) {
                if (response.status == 'success') {
                    var html = '<th>' + response.name + '</th>';
                    html += '<td>' + response.price + ' ₺</td>';
                    $('#payment_dis').html(html);
                    $('#total_order').html(response.total_order);
                } else {
                    $('#payment_dis').html('');
                    $('#total_order').html('{{number_format($order->total_order,2)}}');
                }

            }).fail(function () {
                $('#payment_dis').html('');
                $('#total_order').html('{{number_format($order->total_order,2)}}');

            });
        });
    </script>
@endsection