@extends('layout')

@section('title','Cart')

@section('meta:title', 'AccessWorld: Cart')
@section('meta:description', 'View, modify or checkout products in your cart.')

@section('header')
    <style>
        #img-bigcart {
            background: url({{ asset('/img/cart-sprite.png') }});
            background-position: 0px 11px;
            background-size: cover;
            background-repeat: no-repeat;
            width: 155px;
            height: 120px;
        }

        .btn {
            white-space: normal !important;
        }
    </style>
@stop

@section('content')
    {{--BANNER--}}
    <section class="slick-carousel full-bleed">
        <div class="slick-carousel-item"
             style="background: url({{ asset(config('paths.banner.cart')) }}) 0 0 / cover no-repeat;">
            <div class="overlay banner-overlay-shade-top stick-top-left height-3"></div>
            <div class="row" style="height: 248px">
            </div>
            <div class="overlay banner-overlay-shade-bottom stick-bottom-left force-padding text-right"></div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="section-body">
                <div class="col-sm-4 hidden-xs">
                    <article>
                        <div id="img-bigcart" class="text-center"></div>
                        <h1>Your cart</h1>
                        <p>Do not compromise on both quality and cost.</p>
                        <p>Get hosting services that match best with your business.</p>
                        <p>Grab the opportunity now.</p>
                    </article>
                </div>
                <div class="col-sm-8 col-xs-12">
                                            <div class="card card-underline">
                            <div class="card-head">
                                <header>My Cart</header>
                            </div>
                            <div class="card-body no-padding">
                                <ul class="list divider-full-bleed">
                                    <li class="tile">
                                        <div class="row padding-1">
                                            <div class="col-xs-6">Service Name</div>
                                            <div class="col-xs-3">Period</div>
                                            <div class="col-xs-3 text-right">Price</div>
                                        </div>
                                    </li>
                                    @foreach(Cart::content() as $rowId => $item)
                                        <li class="tile">
                                            <div class="row padding-1">
                                                @if($discount = $item->discount)
                                                    <div class="ribbon">
                                                        <span>Discounted</span>
                                                    </div>
                                                @endif

                                                <div class="col-xs-6">
                                                    <dl class="no-margin">
                                                        <dd class="text-light text-lg">{{ str_limit($item->name, 25) }}</dd>
                                                        <dd class="text-medium text-lg">
                                                            {{ $item->options->service->name }}
                                                            @if(!is_null($item->options->renew))
                                                                <span class="text-xs">(Renewal)</span>
                                                            @endif
                                                        </dd>
                                                    </dl>
                                                </div>
                                                <div class="col-xs-3">
                                                    {{ $item->options->service->slug == 'domain' || $item->options->service->slug == 'ssl-certificate' ? $item->qty.' Year(s)' : get_actual_term($item->qty).' Month(s)' }}
                                                </div>
                                                <div class="col-xs-3 text-right">
                                                    @if(intval($item->discount) > 0)
                                                        <s>{{ currency($item->subtotal) }}</s>
                                                    @endif
                                                    <p class="text-lg">
                                                        {{ currency($item->discountedTotal()) }}
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="card">
                                    <div class="card-body small-padding">
                                        <div class="row">
                                            <div class="col-xs-6 col-xs-offset-6">
                                                <ul class="nav nav-pills nav-stacked">
                                                    <li>
                                                        Sub Total
                                                        <span class="pull-right">
                                                        {{ currency(Cart::discountedTotal()) }}
                                                    </span>
                                                    </li>
                                                    <li>
                                                        VAT (13%)
                                                        <span class="pull-right">
                                                        {{ currency(Cart::vat(setting('vat'))) }}
                                                    </span>
                                                    </li>
                                                    <li>
                                                        <div class="text-bold text-lg">
                                                            Total
                                                            <span class="pull-right">
                                                            {{ currency(round(Cart::vatTotal(setting('vat')))) }}
                                                        </span>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-head text-center">
                                        <header>Payment Method eSewa</header>
                                    </div>
                                    <div class="card-body small-padding">
                                        <div class="row payment-options">
                                            <div class="col-sm-12 text-center">
                                                <form action="{{$esewa_url}}" method="POST">
                                                    {{csrf_field()}}
                                                    <input value="{{$amount}}" name="tAmt" type="hidden">
                                                    <input value="{{$principle}}" name="amt" type="hidden">
                                                    <input value="{{$vatAmt}}" name="txAmt" type="hidden">
                                                    <input value="0" name="psc" type="hidden">
                                                    <input value="0" name="pdc" type="hidden">
                                                    <input value="{{$merch_id}}" name="scd" type="hidden">
                                                    <input value="{{$product_id}}" name="pid" type="hidden">
                                                    <input value="{{$success_route}}" type="hidden" name="su">
                                                    <input value="{{$fail_route}}" type="hidden" name="fu">
                                                    <input value="Confirm Payment" type="submit" class="btn btn-lg ink-reaction btn-info btn-block btn-checkout">
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                </div>
            </div>
        </div>
    </section>
    <style>
        form#checkout{
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: center;
        }
        .payment-logo{
            width: 100px;
        }
    </style>
@stop

@push('scripts')
<script src="{{ asset('js/libs/bootbox/bootbox.min.js') }}"></script>
<script src="{{ asset('js/libs/bootbox/bootbox.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var $form = $('#checkout');
        $('.btn-checkout').click(function () {
            var $payment = $('[name=payment]:checked');
            if ($payment.val() === undefined)
                bootbox.co('Please select a payment option before proceeding!');
            else
                bootbox.confirm({
                    title: 'Checkout Confirmation',
                    message: 'This will redirect you to the selected payment gateway. You will be automatically redirected after the payment completes.',
                    callback: function (result) {
                        if (result)
                            $form.submit();
                    }
                });
        });
    });
</script>
@endpush