@extends('admin::index')

@section('content')

    <section class="content-header flex space-between">
        <h1>
            {{ $header or trans('admin.title') }}
            <small>{{ $description or trans('admin.description') }}</small>
        </h1>
        <a class="m-l-20 is-uppercase none-draft-mode" data-toggle="modal" id="getDraftBtn" data-target="#getDraftModal" style="cursor: pointer;">{{ __('Xem Đơn Nháp') }}</a>
    </section>

    <section class="content">

        @include('partials.error')
        @include('admin::partials.exception')
        @include('admin::partials.toastr')
        @if(Session::has('swal'))
            <script>
                $(function () {
                    swal(DON_HANG_THANH_CONG_MSG, '', 'success');
                })
            </script>
        @endif
        {{ Form::open(array('url' => '/orders', 'method' => 'POST', 'pjax-container'=>'', 'id' => 'pos_form' )) }}
        {{-- MAIN CONTENT --}}
        <input name="_method" type="hidden" value="POST">
        <div class="row">
            <div class="col-sm-7">
                <div class="box box-pos">
                    <div class="box-header">
                        <div id="orderDraftZone">
                            <div class="draft-mode flex space-between" style="display: none">
                                <h4 class="is-uppercase">{{ __('Chỉnh sửa') }}: <strong><span data-model="code"></span></strong></h4>
                                <div>
                                    <span class="status-label is-uppercase label label-default" data-model="status" style="font-size: 100%"></span>
                                </div>
                            </div>
                            <input name="id" data-model="id" hidden />
                        </div>
                        <div class="scanner-input-cont">
                            <input type="text" id="scannerInput" class="form-control input-lg scanner-input"
                                   placeholder="{{ __('Nhập tên sản phẩm / Barcode (F2)') }}" autocomplete="off">
                            <ul class="scanner-input-autocomplete"></ul>
                        </div>
                    </div>
                    <div class="box-body flex-grow">
                        <table class="table table-bordered with-bg">
                            <thead>
                                <tr>
                                    <th class="shirk">{{__('Mã SP')}}</th>
                                    <th>{{__('Tên')}}</th>
                                    <th width="128px">{{__('Số lượng')}}</th>
                                    <th width="20%">{{__('Thành tiền')}}</th>
                                    <th width="50px"></th>
                                </tr>
                            </thead>
                            <tbody id="POSitemsCont"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="box box-pos" style="min-height: calc(100vh - 160px); margin-bottom: 0">
                    <div class="box-header p-t-0">
                        <h4 class="is-uppercase">{{ __('Thông tin khách hàng') }}</h4>
                    </div>
                    <div class="box-body" id="customerZone">
                        <div class="form-group flex customer-search">
                            <div class="flex-grow">
                                <style data-scope="local">
                                    .select2-container--open .select2-search--dropdown .select2-search__field {
                                        font-size: 1.5em;
                                    }
                                    .select2-container--open .select2-results .select2-results__options {
                                        font-size: 1.125em;
                                        max-height: 400px;
                                    }
                                    select[name="customer[phone]"] {
                                        height: 40px;
                                    }
                                </style>
                                <select name="customer[phone]" type="text" class="form-control" placeholder="{{ __("SĐT") }}" autocomplete="off" id="customerKey"></select>
                            </div>
                            <a class="btn btn-info m-l-5" data-toggle="modal" data-target="#addCustomerModal" tabindex="-1" style="padding-top: 10px"><i class="fa fa-plus"></i> </a>
                        </div>
                        <div class="form-group">
                            <div class="form-control bold flex space-between" readonly>
                                <div type="text" placeholder="{{ __("SĐT") }}" data-model="phone" tabindex="-1"></div>
                                <div data-model="type_label"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" tabindex="-1" placeholder="{{ __("Địa chỉ") }}" readonly data-model="address">
                        </div>
                        <div class="form-group" id="customerDebtGroup" style="display: none">
                            <input type="text" class="form-control bold text-danger" tabindex="-1" placeholder="{{ __("Nợ hiện tại") }}" readonly id="customerDebtTotal">
                        </div>
                        <div class="text-right" style="display: none" id="customerMore">
                            <a tabindex="-1" target="_blank" href="/customers">Xem thêm → </a>
                        </div>
                    </div>
                    <div class="box-header">
                        <h4 class="is-uppercase">{{ __('Thông tin đơn hàng') }}</h4>
                    </div>

                    <div class="box-body p-t-0">
                        {{--<div class="form-group flex">--}}
                            {{--<input type="text" name="sale_price" class="form-control flex-grow" autocomplete="off"--}}
                                   {{--placeholder="{{ __('Mã giảm giá') }}">--}}
                            {{--<a class="btn btn-default m-l-5">{{ __('Áp dụng') }}</a>--}}
                        {{--</div>--}}
                        <div class="form-group m-t-10">
                            <textarea class="form-control" name="notes" placeholder="Ghi chú đơn hàng"></textarea>
                        </div>
                        <div class="cart-info-wrapper d-table bg-gray-light" id="totalPOS">
                            <div class="d-table-row h4">
                                <div class="d-table-cell w60">{{ __('Số sản phẩm') }}</div>
                                <div class="d-table-cell text-right"><span data-model="count">0</span></div>
                            </div>
                            <div class="d-table-row h4 bold">
                                <div class="d-table-cell w60">{{ __('Tổng tiền hàng') }}</div>
                                <div class="d-table-cell text-right"><span data-model="subtotal">0</span> ₫</div>
                            </div>
                            <div class="d-table-row h4">
                                <div class="d-table-cell w60">{{ __('Tiền giảm') }}</div>
                                <div class="d-table-cell p-r-5">
                                    <input class="form-control text-right" data-model="discount" name="discount_amount">
                                </div>
                            </div>
                            <div class="d-table-row h4">
                                <div class="d-table-cell w60">
                                    {{ __('Tiền nợ') }}
                                </div>
                                <div class="d-table-cell p-r-5">
                                    <input class="form-control text-right" data-model="debt" name="debt_amount" id="debtInput" disabled placeholder="0">
                                </div>
                            </div>
                            <div class="d-table-row h2 bold">
                                <div class="d-table-cell w50 p-t-20 p-b-20">{{ __('Thành tiền') }}</div>
                                <div class="d-table-cell text-right text-success"><span data-model="total">0</span> ₫</div>
                            </div>

                        </div>
                    </div>
                    <input name="status" id="status" hidden value="done" />
                    <div class="box-footer text-right flex">
                        <a href="/pos" class="btn btn-lg btn-danger">{{ __('Huỷ bỏ') }}</a>
                        <button type="button" class="btn btn-lg btn-default m-l-20 uppercase submit-pos--btn" data-status="draft">
                         {{ __('Lưu nháp') }}</button>
                        <button type="button" class="btn btn-lg btn-warning flex-grow m-l-20 uppercase submit-pos--btn" data-status="done"><i
                                    class="fa fa-plus"></i>
                            <span class="none-draft-mode">{{ __('Tạo đơn hàng') }}</span>
                            <span class="draft-mode" style="display: none">{{ __('Lưu đơn hàng') }}</span></button>
                    </div>
                </div>
            </div>
        </div>

        {{ Form::close() }}
    </section>

    <div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" id="addCustomerModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                {{ Form::open(array('route' => 'customers.store', 'method' => 'POST', 'class'=>'form-horizontal')) }}
                <div class="modal-header">
                    <h4 class="modal-title bold">{{ __('Thêm khách hàng') }}</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group bold">
                        <label class="col-sm-3 control-label">{{ __('Họ tên *') }}</label>
                        <div class="col-sm-9">
                            <input name="fullname" class="form-control" autofocus>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">{{ __('SĐT *') }}</label>
                        <div class="col-sm-9">
                            <input name="phone" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">{{ __('Email') }}</label>
                        <div class="col-sm-9">
                            <input type="email" name="email" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">{{ __('Địa chỉ') }}</label>
                        <div class="col-sm-9">
                            <input name="address" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">{{ __('Ngày sinh') }}</label>
                        <div class="col-sm-3">
                            <input name="birthday" class="form-control" placeholder="25/7/2018">
                        </div>
                        <label class="col-sm-2 control-label" style="color: #333 !important">{{ __('Giới tính') }}</label>
                        <div class="col-sm-4">
                            {{ \Form::select('gender', ['male'=>'Nam','female'=>'Nữ','other'=>'Khác'], old('gender'), ['class'=>'form-control', 'style' => 'border-color: #d2d6de !important']) }}

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">{{ __('Người thân') }}</label>
                        <div class="col-sm-9">
                            <input name="dependant" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default " data-dismiss="modal">{{ __('Lúc khác') }}</button>
                    <button type="submit" class="btn btn-warning p-l-30 p-r-30"><i class="fa fa-plus "></i> {{ __('Thêm') }}</button>
                </div>
                {{ Form::close() }}
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" tabindex="-1" id="getDraftModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="bold">{{ __('Đơn nháp') }}</h4>
                </div>
                <div class="modal-body">
                    <select name="orderDraft[phone]" type="text" class="form-control" placeholder="{{ __("SĐT") }}" autocomplete="off" id="orderDraftKey"></select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div> <!-- /.modal -->
    <style>
        [data-model=phone]:empty:before {
            content: attr(placeholder);
            opacity: 0.6;
        }
        .pointer-events-none {
            pointer-events: none;
            opacity: 0.6;
        }
    </style>
@endsection


@push('styles')

    {{-- cannot use in pjax--}}
@endpush