@extends('layouts.app2')

@section('content')
    <div class="container">
        <div class="card card-primary">

            <aside class="panel panel-default">
                <div class="panel-heading">
                    <a href="{{route('mainShop')}}" class="btn btn-raised btn-primary">Continue Shopping</a>
                    {{--<hr/>--}}
                    {{--<h3 class="text-center">CHECKOUT</h3>--}}
                </div>

                <div class="panel-body" id="chekout_panel">

                    @if(sizeof(Cart::content()) > 0)
                        <div class="page-header">
                            <h1>Checkout</h1>
                        </div>

                        <div class="row">
                            <div class="well">
                                {{--&hellip;--}}

                                <div class="table">
                                    <h3>
                                        Items Ordered
                                    </h3>
                                    <div class="load_item" id="cart_items">
                                        @include('shop.load')
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <h3 class="text-center">
                                Select Food Collection Mode
                            </h3>
                            <div class="col-sm-6 col-xs-6">
                                <div class="radio">
                                    <label data-toggle="collapse" data-target="#center">
                                        <input type="radio" id="collect" value="2" name="collect"> Collection Center
                                    </label>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xs-6">
                                <div class="radio">
                                    <label data-toggle="collapse" data-target="#myaddress">
                                        <input type="radio" value="1" id="myadd" name="collect"> Ship to My Address
                                        &nbsp;
                                        <small>
                                            $15 per 30KG - anywhere within Nigeria
                                        </small>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row nomargins">

                            <div class="collapse" id="myaddress">
                                <form role="form" class="" id="addressForm" disabled="disabled">
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        <input type="text" class="form-control form-control-large"
                                               id="name" placeholder="Enter name">
                                    </div>
                                    <div class="form-group">
                                        <label for="address">Street address 1</label>
                                        <input type="text" class="form-control form-control-large"
                                               id="address" placeholder="Enter address">
                                    </div>
                                    <div class="form-group">
                                        <label for="address2">Street address 2</label>
                                        <input type="text" class="form-control form-control-large"
                                               id="address2" placeholder="Enter address">
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <div class="form-group">
                                                <label for="zip">ZIP Code</label>
                                                <input type="text"
                                                       class="form-control form-control-small"
                                                       id="zip" placeholder="Enter zip">
                                            </div>
                                        </div>
                                        <div class="col-xs-9">
                                            <div class="form-group">
                                                <label for="city">City</label>
                                                <input type="text" class="form-control"
                                                       id="city" placeholder="Enter city">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group required">
                                        <label class="col-sm-2 control-label"
                                               for="country">Country</label>
                                        <div class="col-sm-8">
                                            <select name="country" required id="country"
                                                    class="form-control">
                                                <option value="0">
                                                    Select country
                                                </option>
                                                @foreach ($countries as $country)
                                                    <option value="{{$country}}" <?php if (isset($country) && $country == 'Nigeria') {
                                                        echo 'selected';
                                                    } else {
                                                        echo '';
                                                    } ?> >
                                                        {!! $country !!}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-sm-2"></div>
                                    </div>


                                    <div class="clearfix"></div>

                                    <div class="form-group required">
                                        <label class="col-sm-2 control-label" for="state">State</label>
                                        <div class="col-sm-6" id="statesBox">
                                            @include('includes.states')
                                        </div>
                                        <div class="col-sm-4">
                                            <span class="alert alert-warning" id="loader"
                                                  style="display:none;"></span>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>


                                    <div class="form-group">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" id="terms" name="terms"> Agree to terms &amp;
                                                conditions.
                                                <small>
                                                    <a href="javascript:void(0);">Terms</a>
                                                </small>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="well">
                                            <button type="button" disabled id="order"
                                                    class="btn btn-primary btn-lg btn-block">Place Order
                                            </button>
                                        </div>
                                    </div>

                                </form>
                            </div>

                            {{--collapse Collection--}}

                            <div class="collapse" id="center">
                                <form action="#" id="centerForm">
                                    <div class="form-group required">
                                        <label class="col-sm-2 control-label" for="collectionCountry">Country</label>
                                        <div class="col-sm-8">
                                            <select name="collectionCountry" required id="collectionCountry"
                                                    class="form-control  country">
                                                <option value="0">
                                                    Select country
                                                </option>
                                                @foreach ($countries as $country)
                                                    <option value="{{$country}}" <?php if (isset($country) && $country == 'Nigeria') {
                                                        echo 'selected';
                                                    } else {
                                                        echo '';
                                                    } ?>>{!! $country !!}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-sm-2"></div>
                                    </div>
                                    <div class="clearfix"></div>

                                    <div class="form-group required">
                                        <label class="col-sm-2 control-label" for="collectionState">State</label>
                                        <div class="col-sm-6 collectionStatesBox" id="collectionStatesBox">
                                            @include('includes.collectionStates')
                                        </div>
                                        <div class="col-sm-4">
                                            <span class="alert alert-warning" id="collectionLoader"
                                                  style="display:none;">

                                            </span>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>

                                    <div class="form-group required">
                                        <label class="col-sm-2 control-label" for="collectionCenter">Center</label>
                                        <div class="col-sm-8" id="collectionCenter">
                                            @include('includes.collectionCenters')
                                        </div>
                                        <div class="col-sm-2">
                                        <span class="alert alert-warning" id="collectionCenterLoader"
                                              style="display:none;"></span>
                                        </div>
                                    </div>

                                    <div class="clearfix"></div>


                                    <div class="form-group ">
                                        <label class="col-sm-2 control-label" for="leader">Team Leader</label>
                                        <div class="col-sm-8">
                                            <select name="leader" id="leader" class="form-control">
                                                <option value="0">
                                                    Select Team
                                                </option>
                                            </select>
                                        </div>


                                        <div class="col-sm-2">
                                            <span class="alert alert-warning" id="collectionTeamLoader"
                                                  style="display:none;"></span>
                                        </div>
                                    </div>

                                    <div class="checkbox" style="padding-left: 15px; 15px;">
                                        <label>
                                            Agree to
                                            terms &amp; conditions.
                                            <small>
                                                <a href="javascript:void(0);">Terms</a>
                                            </small>
                                            <input type="checkbox" id="collectionTerms" name="collectionTerms">
                                        </label>
                                    </div>

                                    <div class="well">
                                        <button type="button" disabled id="collectionOrder" onclick="submitOrder();"
                                                class="btn btn-primary btn-lg btn-block">
                                            Place
                                            Order
                                        </button>
                                    </div>
                                </form>

                                {{--end collapse2--}}
                            </div>
                        </div>

                    @else

                        <p class="text-center heading">
                            <a href='{{route("mainShop")}}' class='btn btn-raised btn-primary btn-lg'>Continue
                                Shopping</a>
                            <a href='javascript:void(0);' class='btn btn-raised btn-primary btn-lg'>See History</a>
                        </p>
                    @endif


                </div>


                <div class="panel-footer">
                    <div class="alert alert-success result" id="result">
                        Orders must be collected on specified dates - Extra Charges may apply subsequently
                    </div>
                </div>
            </aside>

        </div>
    </div>



@endsection




















