@extends('layouts.listings')
@section('content')
<style type="text/css">

      .btn-circle {
        width: 30px;
        height: 30px;
        text-align: center;
        padding: 6px 0;
        font-size: 12px;
        line-height: 1.428571429;
        border-radius: 15px;
      }
      .btn-circle.btn-lg {
        width: 50px;
        height: 50px;
        padding: 13px 13px;
        font-size: 18px;
        line-height: 1.33;
        border-radius: 25px;
      }

  </style>
<div class='container'>

    @include('partials.alerts')

    <div class='row' style='padding-top:25px; padding-bottom:25px;'>
        <div class='col-md-12'>
            <div id='mainContentWrapper'>
                <div class="col-md-8">
                    <h2 style="text-align: center;">
                        Review Your Order &amp; Complete Checkout
                    </h2>
                    <hr/>
                    <div class="shopping_cart">
                        <form action="{{ url('cart/checkout') }}" method="post" id="payment-form">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Contact
                                            and Billing Information</a>
                                    </h4>
                                </div>
                                <div class="panel-body">
                                    <b>Help us keep your account safe and secure, please verify your billing
                                        information.</b>
                                    <br/><br/>
                                    <div class="container-fluid">

                                        <div class="form-group">
                                            <label>Contact Email</label>
                                            <input type="text" name="email" id="id_email" value="{{ $user->email }}"
                                            class="form-control" required>
                                        </div>
                                        <div class="form-group">
                                            <label>Name</label>
                                            <input type="text" name="name" id="id_first_name" class="form-control"
                                            value="{{ $user->fullname() }}" required>
                                        </div>
                                        <div class="form-group">
                                            <label>Address</label>
                                            <input type="text" name="address" id="id_address_line_1" class="form-control" required="">
                                        </div>
                                        <div class="form-group">
                                            <label>Delivery Region</label>
                                            <select name="deliveryState" id="deliveryState" class="form-control" required onchange="updateDeliveryPrice()">
                                                <option value="">Choose Region...</option>
                                                @foreach ($deliveryRates as $state => $price)
                                                    <option value="{{ $price }}">{{ $state }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <input type="hidden" name="deliveryPrice" id="deliveryPrice">
                                        <div class="form-group">
                                            <label>Phone</label>
                                            <input type="text" name="phone" id="id_phone" class="form-control"
                                            value="{{ $user->phone }}" required>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="panel-group" id="accordion">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Review
                                                Your Order</a>
                                        </h4>
                                    </div>
                                    <div class="panel-body">
                                        <div class="items">
                                            <div class="col-md-9">
                                                <ul class="list-group">
                                                    @forelse($items as $item)
                                                        <a class="list-group" href="javascript:void(0)">
                                                            <h4 class="list-group-item-heading">
                                                                {{ $item->name }}
                                                            </h4>
                                                            <p>
                                                                Quantity: {{ $item->qty }}<br>
                                                                Price: {{ config('sitedata.currency').$item->price }}
                                                            </p>

                                                        </a>
                                                    @empty
                                                        There are no items in your cart
                                                    @endforelse
                                                </ul>

                                            </div>
                                            <div class="col-md-3">
                                                <div style="text-align: center;">
                                                    <h3>Order Total</h3>
                                                    <h3>
                                                        <span style="color:green;">
                                                            {{ config('sitedata.currency') }}
                                                            {{ Session::has('total_amount') ? number_format(Session::get('total_amount')) : $total_amount }}
                                                            @if (Session::has('total_amount'))
                                                            <a href="{{ url('/removecoupon') }}" class="btn btn-danger">Remove Coupon</a>
                                                            @endif
                                                        </span>
                                                    </h3>
                                                    <br>
                                                    <h3>Delivery Fee: <span style="color:green">{{ config('sitedata.currency') }}<span id="deliveryFee">{{ number_format($deliveryFee) }}</span></span></h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                            <b>Choose Payment Option</b>
                                        </a>
                                    </h4>
                                </div>
                                <div class="panel-body">
                                    <span class='payment-errors'></span>
                                        <legend>How would you like to pay?</legend>
                                        <div class="form-group">
                                            <div class="text-center">
                                                <div data-toggle="">
                                                    {{--<label class="btn btn-default btn-circle {{ $user->payment_mode == "pay_online" ? 'active' : '' }}">
                                                        <input type="radio" name="payment_option" value="pay_online" {{ $user->payment_mode == "pay_online" ? 'checked' : '' }}>
                                                        Pay Online
                                                    </label>--}}
                                                    <label class="btn btn-default btn-circle {{ $user->payment_mode == "pay_on_delivery" ? 'active' : '' }}">
                                                        <input type="radio" name="payment_option" value="pay_on_delivery" {{ $user->payment_mode == "pay_on_delivery" ? 'checked': '' }}>
                                                        Pay on Delivery
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    <button type="submit" class="btn btn-success btn-lg" style="width:100%;">
                                        Complete Order
                                    </button>
                                    <br/>
                                    <div style="text-align: left;"><br/>
                                        By submiting this order you are agreeing to our <a href="#">universal
                                            billing agreement</a>, and <a href="#">terms of service</a>.
                                        If you have any questions about our products or services please contact us
                                        before placing this order.
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h4 class="panel-title">Coupon</h4>
                        </div>
                        <div class="panel-body">
                            <p class="text-info"><em>Do you have a coupon code? Insert it here and apply.</em></p>
                            <form action="{{ url('/applycoupon') }}" method="post">
                                {{ csrf_field() }}
                                <div class="form-group">
                                    <input type="text" name="coupon_code" placeholder="Coupon Code" value="{{ Session::has('total_amount') ? Session::get('coupon_code') : '' }}"
                                    {{ Session::has('total_amount') ? 'readonly' : '' }} class="form-control">
                                </div>

                                <button type="submit" class="btn btn-primary" {{ Session::has('total_amount') ? 'disabled' : '' }}>Apply</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('after_scripts')
<script>
    function updateDeliveryPrice() {
        let price = $('#deliveryState').val();
        $('#deliveryPrice').val(price);
        $('span#deliveryFee').html(price);
    }
</script>
@endsection