@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>
                                {{ __('Subtotal') }}
                            </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 hidden class="product_weight"
                                            data-single-weight="{{ $product['product']['weight'] }}"
                                            value="{{ $product['product']['weight'] * $product['quantity'] }}">
                                    </td>
                                    <td>
                                        <ul>
                                            @foreach ($product['options'] as $product_option)
                                                <li>
                                                    {{ $product_option['option']->option['attribute']['name'] }} :
                                                    {{ $product_option['option']->option['name'] }}
                                                    <input type="hidden" name="product[{{ $count }}][option][]"
                                                        value="{{ $product_option['option']['id'] }}">
                                                    <input type="hidden" name="" id="" class="optionMaxQty" value="{{ $product_option['option']['stock'] + $product['quantity']   }} ">
                                                </li>
                                            @endforeach
                                        </ul>
                                    </td>
                                    <td>{{ formated_price($product['product']['new_price']) }}
                                        <span class="price" style="display:none">{{ $product['product']['new_price'] }}
                                        </span>
                                    </td>
                                    <td>
                                        {{-- <input type="hidden" name="product[{{ $count }}][quantity]"
                                            value="{{ $product['quantity'] }}"> --}}
                                        <div class="quantity-wrapper d-flex align-items-center">
                                            <button type="button" class="btn btn-sm btn-light qty-minus" value="{{ $product['inventory']['stock'] + $product['quantity']}}"
                                                data-key="{{ $count }}">-</button>
                                            <input type="number" min="1" max="{{ $product['inventory']['stock'] + $product['quantity']}}"
                                                class="form-control text-center quantity-input"
                                                name="product[{{ $count }}][quantity]]"
                                                value="{{ $product['quantity'] }}" style="width:70px;">
                                            <button type="button" class="btn btn-sm btn-light qty-plus"
                                                data-key="{{ $count }}" value="{{ $product['inventory']['stock'] + $product['quantity']}}">+</button>
                                        </div>
                                    </td>

                                    <td>
                                         <span class="line-total">{{ formated_price($product['product']['new_price'] * $product['quantity']) }}</span>
                                    </td>

                                    <td>{{ formated_price($product['total_commission']) }}
                                        <input type="hidden" class="commission"
                                            name="product[{{ $count }}][commission]"
                                            value="{{ $product['commission'] }}">

                                        <input type="hidden" class="site_commission"
                                            name="product[{{ $count }}][site_commission]"
                                            value="{{ $product['site_commission'] }}">
                                    </td>

                                    <td>
                                        <i class="fa fa-trash delete_product" data-id="{{ $count }}" 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['customer']['name'] }}" required>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="{{ __('Phone') }}"
                                            name="phone" value="{{ $order['customer']['phone'] }}" required>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control"
                                            placeholder="{{ __('Alternative Phone') }}"
                                            value="{{ $order['customer']['phone_2'] }}" name="phone_2" required>
                                    </div>

                                    <div class="form-group">
                                        <select name="state_id" class="form-control" id="state" required>
                                            <option disabled selected value="">{{ __('Select state') }}</option>
                                            @foreach ($states as $state)
                                                <option
                                                    {{ $order['customer']['state']['id'] == $state->id ? 'selected' : '' }}
                                                    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['customer']['street'] }}" required>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="{{ __('House') }}"
                                            name="home" value="{{ $order['customer']['home'] }}" required>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="{{ __('Flat') }}"
                                            name="flat" value="{{ $order['customer']['flat'] }}" required>
                                    </div>
                                    <div class="form-group">
                                        <textarea name="note" id="note" cols="30" rows="5" placeholder="{{ __('notes') }}"
                                            class="form-control">{{ $order['customer']['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