@extends('front.layout')
@section('title')
{{__('Checkout')}}
@endsection
@section('css')
<link href="{{url('assets/front/css/cart.css')}}" rel="stylesheet">
<link href="{{url('assets/front/css/checkout.css')}}" rel="stylesheet">
<link href="{{url('assets/front/css/product_page.css')}}" rel="stylesheet">
@endsection
@section('content')
<main class="bg_gray">
    <div class="container margin_30">
        <div class="page_header">
            <div class="breadcrumbs">
                <ul>
                    <li><a href="{{url('/')}}">{{__('Home')}}</a></li>
                    <li>{{__('Cart')}}</li>
                </ul>
            </div>
            <h1>{{__('Checkout')}}</h1>
        </div>
        <div class="row rtl">
            <div class="col-md-12">
                <button type="button" class="btn_1 checkout-btn" onclick="add_product()">
                   <i class="fa fa-plus"></i> {{__('Add product')}}
                </button>
                <button type="button" class="btn_1 checkout-btn" onclick="favourite()">
                   <i class="fa fa-heart"></i> {{__('Favourites')}}
                </button>
            </div>
        </div>
        <br>

        <!-- /page_header -->
        <form action="{{route('checkout.submit')}}" method="POST" id="checkout_form">
            @csrf
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th width="30%">
                                {{__('Product')}}
                            </th>
                            <th width="30%">
                                {{__('Description')}}
                            </th>
                            <th width="10%">
                                {{__('Price')}}
                            </th>
                            <th width="10%">
                                {{__('Quantity')}}
                            </th>
                            <th width="10%">
                                {{__('Commission')}}
                            </th>
                            <th width="10%"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="empty_cart">
                            <td colspan="6" class="text-center">{{__('Cart empty')}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>


            <!-- /cart_actions -->
            <div class="row checkout_row">
                <div class="col-lg-6 col-md-6">
                    <div class="step last">
                        <h3>{{__('Customer info')}}</h3>

                        <div class="box_general summary">
                            <div class="tab-pane fade show active rtl" id="tab_1" role="tabpanel"
                                aria-labelledby="tab_1">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="{{__('Name')}}" name="name"
                                        required>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="{{__('Phone')}}" name="phone"
                                        required>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="{{__('Alternative Phone')}}"
                                        name="phone_2" required>
                                </div>
                                <div class="form-group">
                                    <select name="state_id" class="form-control select2" id="state" required>
                                        <option disabled selected value="">{{__('Select state')}}</option>
                                        @foreach($states as $state)
                                        <option value="{{$state->id}}">{{$state->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <select name="city_id" class="form-control select2" id="city" required>
                                        <option disabled selected value="">{{__('Select state first')}}</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <select name="brand" class="form-control select2" id="brand" required>
                                        <option disabled selected value="">{{__('Select brand')}}</option>
                                        @foreach($brands as $brand)
                                        <option value="{{$brand}}">{{$brand}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="{{__('Street')}}" name="street"
                                        required>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="{{__('House')}}" name="home"
                                        required>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="{{__('Flat')}}" name="flat"
                                        required>
                                </div>
                                <div class="form-group">
                                    <textarea name="note" id="note" cols="30" rows="5" placeholder="{{__('notes')}}" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /step -->
                </div>

                <div class="col-lg-6 col-md-6">
                    <div class="step last">
                        <h3>{{__('Order summary')}}</h3>
                        <div class="box_general summary">
                            <ul>
                                <li class="clearfix"><em><strong>{{__('Subtotal')}}</strong></em> <span
                                        id="subtotal"></span></li>
                                <li class="clearfix"><em><strong>{{__('Shipping')}}</strong></em> <span
                                        class="shipping">{{formated_price(0)}}</span></li>
                                <li class="clearfix"><em><strong>{{__('Overweight Total Price')}}</strong></em> <span
                                            class="overweight_total_price">{{formated_price(0)}}</span></li>
                                <li class="clearfix"><em><strong>{{__('Commission')}}</strong></em> <span
                                        class="order_commission"></span></li>
                                <input type="number" style="display:none" class="shipping_calculate" value="0">
                            </ul>
                            <div class="total clearfix">
                                <span id="total_text">{{__('Total')}}</span> <span id="total"></span>
                            </div>
                            <input type="submit" class="btn_1 full-width checkout-btn" value="{{__('Confirm Order')}}">
                        </div>
                        <!-- /box_general -->
                    </div>
                    <!-- /step -->
                </div>
            </div>
        </form>
    </div>
    <!-- /container -->
</main>

<!--Modal-->
@include('front.pages.checkout.modal')

@endsection

@section('scripts')
@include('front.pages.checkout.checkout_js')
@endsection