@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">
                                        @if(Cart::count()>0)
                        <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-5">Service Name</div>
                                            <div class="col-xs-2">Action</div>
                                            <div class="col-xs-2">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-5">
                                                    <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-2">
                                                    {{ Form::open(['route' => ['cart.destroy', $item->rowid], 'method'=>'DELETE']) }}
                                                    {{--@if(is_null($item->options->renew) && !$item->options->service->isDomain() && !$item->options->service->isSslCertificate())--}}
                                                    {{--<a class="btn btn-xs ink-reaction btn-flat btn-primary" href="{{ is_null($item->options->package) ? route('service.'. $item->options->service->slug .'.custom.edit',[$item->rowid]) : route('service.'. $item->options->service->slug .'.edit',[$item->options->package->slug, $item->rowid]) }}">--}}
                                                    {{--<span >Edit</span>--}}
                                                    {{--</a>--}}
                                                    {{--@endif--}}
                                                    <button type="submit"
                                                            class="btn btn-xs ink-reaction btn-flat btn-danger">
                                                        <span>Remove</span>
                                                    </button>
                                                    {{ Form::close() }}
                                                </div>
                                                <div class="col-xs-2">
                                                    {{ $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 Options</header>
                                    </div>
                                    <div class="card-body small-padding">
                                        <div class="row payment-options">
                                            <div class="col-sm-12 text-center">
                                                <p class="text-small">Please select a
                                                    payment option before proceeding to checkout.
                                                </p>
                                            </div>
                                            {{--<div class="col-sm-4"><a href="{{ route('cart.checkout', 'visa') }}"><img src="{{ asset('img/visa.png') }}" class="img-responsive"></a></div>
                                            <div class="col-sm-4"><a href="{{ route('cart.checkout', 'mastercard') }}"><img src="{{ asset('img/mastercard.png') }}" class="img-responsive"></a></div>
                                            <div class="col-sm-4"><a href="{{ route('cart.checkout', 'maestro') }}"><img src="{{ asset('img/maestro.png') }}" class="img-responsive"></a></div>--}}
                                            <div class="col-sm-12 text-center">
                                                {{ Form::open(['route' => 'cart.checkout', 'id' => 'checkout']) }}
                                                <label class="radio-inline radio-styled">
                                                    <input type="radio" name="payment" value="esewa">
                                                    <span>
                                                            <img src="{{ asset('img/esewa.png') }}" class="img-responsive payment-logo">
                                                        </span>
                                                </label>
                                                <label class="radio-inline radio-styled">
                                                    <input type="radio" name="payment" value="khalti">
                                                    <span>
                                                            <img src="{{ asset('img/khalti.png') }}" class="img-responsive payment-logo">
                                                        </span>
                                                </label>
                                                <label class="radio-inline radio-styled">
                                                    <input type="radio" name="payment" value="connect-ips">
                                                    <span>
                                                            <img src="{{ asset('img/logos/connectIPS.png') }}" class="img-responsive payment-logo">
                                                        </span>
                                                </label>
                                                <label class="radio-inline radio-styled">
                                                    <input type="radio" name="payment" value="hbl">
                                                    <span>
                                                            <img src="{{ asset('img/hbl.png') }}" class="img-responsive payment-logo">
                                                        </span>
                                                </label>
                                                <label class="radio-inline radio-styled">
                                                    <input type="radio" name="payment" value="awtpay">
                                                    <span>
                                                            <img src="{{ asset('img/awtpay.png') }}" class="img-responsive payment-logo">
                                                        </span>
                                                </label>
                                                {{ Form::close() }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-lg ink-reaction btn-info btn-block btn-checkout">
                                    <i class="md md-shopping-cart md-2x"></i>
                                    <p>Proceed to Checkout</p>
                                </button>
                            </div>
                            <div class="col-sm-6" >
                                <a href="{{url('/page/services')}}" class="btn btn-lg ink-reaction btn-info btn-block" style="padding: 30px;">View Other Services</a>
                            </div>
                        </div>
                    @else
                        <div class="card">
                            <div class="card-head text-center">
                                <h2>No items in Cart.</h2>
                                <a href="{{ route('page.show', 'services') }}"
                                   class="btn btn-flat btn-primary ink-reaction text-lg">View Services
                                </a>
                            </div>
                        </div>
                    @endif
                </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