@extends("admin.main")
@section("content")
    @if(auth()->guard('admins')->user()->can("add order"))
        <div class="card card-outline card-primary">
            <form action="{{ route('admin.order.store') }}" method="post">
                @csrf
                <div class="card-header p-0 border-bottom-0">
                    <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="pill"
                               href="#detail" role="tab"
                               aria-controls="detail" aria-selected="true">Customer Information</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="pill"
                               href="#product" role="tab"
                               aria-controls="product" aria-selected="false">Product Service</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="custom-tabs-four-tabContent">
                        <div class="tab-pane fade active show"
                             id="detail" role="tabpanel"
                             aria-labelledby="detail">
                            <div class="card-body">
                                {{--Client User--}}
                                <div class="form-group row">
                                    <label class="col-md-4" for="customer_id">Client User</label>
                                    <div class="col-md-8">
                                        <select class="form-control select2" name="customer_id" id="customer_id"
                                                style="width: 100%">
                                            @if($customer->count())
                                                @foreach($customer->all() as $item)
                                                    <option value="{{ $item->id }}">
                                                        {{ $item->firstname . ' ' . $item->lastname }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                {{--Payment Method--}}
                                <div class="form-group row">
                                    <label class="col-md-4" for="payment_id">Payment Method</label>
                                    <div class="col-md-8">
                                        <select class="form-control" name="payment_id" id="payment_id">
                                            @if($payment->count())
                                                @foreach($payment->all() as $item)
                                                    <option value="{{ $item->id }}">
                                                        {{ $item->name }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                {{--Promotion Code--}}
                                <div class="form-group row">
                                    <label class="col-md-4" for="discount_id">Promotion Code</label>
                                    <div class="col-md-8">
                                        <select class="form-control" name="discount_id" id="discount_id">
                                            <option value="">--------</option>
                                            @if($discount->count())
                                                @foreach($discount->all() as $item)
                                                    <option value="{{ $item->id }}">
                                                        {{ $item->code }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                {{--Orders Status--}}
                                <div class="form-group row">
                                    <label class="col-md-4" for="status">Orders Status</label>
                                    <div class="col-md-8">
                                        <select class="form-control" name="status" id="status">
                                            <option value="0">Pending</option>
                                            <option value="1">Active</option>
                                        </select>
                                    </div>
                                </div>

                                {{--Orders Action--}}
                                <div class="form-group row">
                                    <label class="col-md-4" for="status">Orders Status</label>
                                    <div class="col-md-8 form-group row">
                                        <div class="col align-items-center d-flex">
                                            <label class="mr-2" for="Invoice">Create Invoice</label>
                                            <input type="checkbox" name="create_invoice" checked id="Invoice">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade"
                             id="product"
                             role="tabpanel"
                             aria-labelledby="product">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="card-body append-new__product">
                                        <div class="box clients-summary__box p-4">
                                            {{--Product Type--}}
                                            <div class="row form-group">
                                                <label for="order_product_type" class="col-md-4">Product Type
                                                    (*)</label>
                                                <div class="col-md-8">
                                                    <select class="form-control order_product_type"
                                                            data-append="product[0][product_id]"
                                                            name="product[0][type]">
                                                        <option value="0">-----------</option>
                                                        @if($type->count())
                                                            @foreach($type->all() as $item)
                                                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                            {{--Product--}}
                                            <div class="row form-group">
                                                <label for="product_id" class="col-md-4">Product (*)</label>
                                                <div class="col-md-8">
                                                    <select class="form-control product_id"
                                                            name="product[0][product_id]">
                                                        <option value="0">-----------</option>
                                                    </select>
                                                </div>
                                            </div>
                                            {{--Domain--}}
                                            <div class="row form-group">
                                                <label for="Domain" class="col-md-4">Domain</label>
                                                <div class="col-md-8">
                                                    <input type="text" class="form-control Domain"
                                                           name="product[0][domain]"
                                                           value="">
                                                </div>
                                            </div>
                                            {{--Billing Cycle--}}
                                            <div class="row form-group">
                                                <label for="billing" class="col-md-4">Billing Cycle (*)</label>
                                                <div class="col-md-8">
                                                    <select class="form-control billing" name="product[0][billing]">
                                                        <option value="0">Free</option>
                                                        <option value="1">One Time</option>
                                                        <option value="2" selected>Monthly</option>
                                                        <option value="3">Quarterly</option>
                                                        <option value="4">Semi-Annually</option>
                                                        <option value="5">Annually</option>
                                                    </select>
                                                </div>
                                            </div>
                                            {{--Product Quantity--}}
                                            <div class="row form-group">
                                                <label for="quantity" class="col-md-4">Quantity (*)</label>
                                                <div class="col-md-8">
                                                    <input type="number" class="form-control quantity"
                                                           name="product[0][quantity]"
                                                           value="1" min="1">
                                                </div>
                                            </div>
                                            {{--Product Price--}}
                                            <div class="row form-group">
                                                <label for="price_custom" class="col-md-4">Price Override</label>
                                                <div class="col-md-8">
                                                    <input type="number" class="form-control price_custom"
                                                           name="product[0][price_custom]" value="" min="1">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <a href="javascript:void(0)"
                                           class="btn btn-outline-primary btn-add__newProduct">Add
                                            new Product</a>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="clients-summary__box">
                                        <h4 class="title">Order Summary</h4>
                                        <!--Box info-->
                                        <div class="summary__box">
                                            <table class="table table-borderless">
                                                <tbody class="append-element__js">

                                                </tbody>
                                                <tfoot>
                                                <tr class="tax">
                                                    <td class="fs-20">VAT @ 10.00%</td>
                                                    <td></td>
                                                    <td class="text-right fs-20" id="tax_append">0đ</td>
                                                </tr>
                                                <tr class="total">
                                                    <td class="fs-20">Total</td>
                                                    <td></td>
                                                    <td class="text-right fs-20" id="total_append">0đ</td>
                                                </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-right">
                    <a href="{{ route('admin.order.index') }}" class="btn bg-gradient-secondary">Cancel</a>
                    <button type="submit" class="btn bg-gradient-primary">Confirm Order</button>
                </div>
            </form>
        </div>
    @else
        <div class="alert alert-danger alert-dismissible">
            <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Order
                management department</h5>
        </div>
    @endif
@endsection
@push('scripts')
    <script type="text/javascript">
        const apiGetProduct = '{{ route('api.getProduct') }}';
        const apiGetProductType = '{{route('api.getProductType')}}';
    </script>
@endpush