@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()">
                    {{__('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('update_order',$order['id'])}}" method="POST" id="checkout_form">
            @csrf
            <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>
                                    @php
                                        $count=0;
                                    @endphp
                                    @if(count($order['order_products']))
                                        @foreach($order['order_products'] as $product)
                                            @php
                                                $count++;
                                            @endphp
                                            <tr>
                                                <td>
                                                    <div class="thumb_cart">
                                                        <img class="img-fluid lazy" data-src="{{product_image($product['product'])}}" src="">
                                                    </div>
                                                    <span class="item_cart">{{$product['product']['name']}}</span>
                                                    <input type="hidden" name="product[{{$count}}][product_id]" value="{{$product['product']['id']}}">
                                                    @php
                                                        $product_weight=$product['product']['weight']*$product['quantity'];
                                                    @endphp
                                                    <input type="hidden" class="product_weight" value="{{$product_weight}}">
                                                </td>
                                                <td>
                                                    <ul>
                                                        @foreach($product['options'] as $product_option)
                                                            <li>
                                                                {{$product_option['option']['attribute']['name']}} : {{$product_option['option']['name']}}
                                                                <input type="hidden" name="product[{{$count}}][option][]" value="{{$product_option['option']['id']}}">
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </td>
                                                <td>{{formated_price($product['product']['new_price'])}}
                                                    <span class="price" style="display:none">{{$product['product']['new_price']}}
                                                    </span></td>
                                                <td>{{$product['real_quantity']}} <input type="hidden" class="quantity" value="{{$product['real_quantity']}}"> <input type="hidden"  name="product[{{$count}}][quantity]" value="{{$product['quantity']}}"></td>
                                                <td>{{formated_price($product['commission'])}}<input type="hidden" class="commission" name="product[{{$count}}][commission]" value="{{$product['commission']}}"></td>
                                                <td>
                                                    <i class="fa fa-trash delete_product" style="color:red;cursor:pointer"></i>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                    <tr class="empty_cart">
                                        <td colspan="6" class="text-center">{{__('Cart empty')}}</td>
                                    </tr>
                                    @endif
							</tbody>
            </table>


					<!-- /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" value="{{$order['name']}}" required>
                                            </div>
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="{{__('Phone')}}" name="phone" value="{{$order['phone']}}" required>
                                            </div>
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="{{__('Alternative Phone')}}" value="{{$order['phone_2']}}" 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" value="{{$order['street']}}" required>
                                            </div>
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="{{__('House')}}" name="home" value="{{$order['home']}}" required>
                                            </div>
                                            <div class="form-group">
                                                <input type="text" class="form-control" placeholder="{{__('Flat')}}" name="flat" value="{{$order['flat']}}" required>
                                            </div>
                                            <div class="form-group">
                                                <textarea name="note" id="note" cols="30" rows="5" placeholder="{{__('notes')}}" class="form-control">{{$order['note']}}</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