@extends('adminlte::page')
@section('title', 'Clear Box')

@section('content')
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            color: red;
        }
    </style>
    <div class="top-header">
        <ol class="breadcrumb">
            <li><a href="#" >{{ __('auth.dashboard') }} / </a></li>
            <li><a href="{{ route('clear-boxes.index') }}"> {{ __('auth.clear_box') }} / </a></li>
            <li><a href="#"> {{ __('auth.create') }}</a></li>
        </ol>
    </div>

    <!-- Main content -->
    <section class="content">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">{{__('auth.clear_box')}}</h3>
                        </div>
                        {!! Form::open(array('route'=>'clear-boxes.store','method'=>'POST','enctype'=>'multiple/form-data')) !!}
                        <div class="card-body">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.transportation')}}</label>
                                <div class="col-sm-10">
                                    <select name="tran_id[]" class="filter_box select2 select2-hidden-accessible" multiple="" data-placeholder="{{ __('auth.please_select') }}" style="width: 100%;" data-select2-id="7" tabindex="-1" aria-hidden="true" required>

                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.customer')}}</label>
                                <div class="col-sm-10">
                                    <select name="customer_id" id="customer" class="form-control select2 filter_customer" >
                                        <option value="">{{ __('auth.please_select') }}</option>
                                    </select>                               
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.weight')}}</label>
                                <div class="col-sm-10">
                                    <div class="input-group mb-3">
                                        {!! Form::text('weight',null,array('id' => 'weight','placeholder'=>__('auth.weight'),'class'=>'form-control number-only','autocomplete' => 'off','required')) !!}
                                        <span class="input-group-append" width="50%">
                                            {!! Form::select('size_id',$size,null,['id' => 'size','class' => 'form-control select2','required']) !!}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.price')}}</label>
                                <div class="col-sm-10">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-dollar-sign"></i></span>
                                        </div>
                                        {!! Form::text('price',null,array('placeholder'=>'0.00','class'=>'form-control number-only','autocomplete' => 'off','required','readonly')) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.discount')}}</label>
                                <div class="col-sm-10">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-percent"></i></span>
                                        </div>
                                        {!! Form::text('discount',null,array('id' => 'discount','placeholder'=>'0.00','class'=>'form-control number-only','autocomplete' => 'off')) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.delivery_fee')}}</label>
                                <div class="col-sm-10">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-dollar-sign"></i></span>
                                        </div>
                                        {!! Form::text('delivery_fee',null,array('id' => 'delivery-fee','placeholder'=>'0.00','class'=>'form-control number-only','autocomplete' => 'off')) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.vat')}}</label>
                                <div class="col-sm-10">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">10%</span>
                                        </div>
                                        {!! Form::text('vat',null,array('placeholder'=>'0.00','class'=>'form-control number-only','autocomplete' => 'off','required','readonly')) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.total')}}</label>
                                <div class="col-sm-10">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-dollar-sign"></i></span>
                                        </div>
                                        {!! Form::text('total',null,array('placeholder'=>'0.00','class'=>'form-control number-only','autocomplete' => 'off','required','readonly')) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.grand_total')}} (USD)</label>
                                <div class="col-sm-10">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-dollar-sign"></i></span>
                                        </div>
                                        {!! Form::text('grand_total_usd',null,array('id' => 'grand-total-usd','placeholder'=>'0.00','class'=>'form-control number-only','autocomplete' => 'off','required','readonly')) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.grand_total')}} (Riel)</label>
                                <div class="col-sm-10">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">{{ $invoiceSetup->curency_riel }} ៛</span>
                                        </div>
                                        {!! Form::text('grand_total_riel',null,array('id' => 'grand-total-riel','placeholder'=>'0.00','class'=>'form-control number-only','autocomplete' => 'off','required','readonly')) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.remark')}}</label>
                                <div class="col-sm-10">
                                    <textarea id="remark" name="remark" class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label required">{{__('auth.address')}}</label>
                                <div class="col-sm-10">
                                    <textarea id="address" name="address" class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="text-right">
                                <button type="submit" class="btn btn-danger" onClick="javascript:history.go(-1)"><i class="fa fa-arrow-circle-left"></i> {{ __('auth.back')}}</button>
                                <button type="submit" class="btn btn-info"><i class="fa fa-save"></i> {{ __('auth.save')}}</button>
                            </div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('js')
    <script type="text/javascript">
        $(".filter_box").select2({
            tags: false,
            tokenSeparators: [','],
            minimumInputLength: 0,
            minimumResultsForSearch: 0,
            maximumInputLength: 10, // only allow terms up to 20 characters long
            ajax: {
                url: "{{route('clear_box.filter_box')}}",
                dataType: "json",
                type: "GET",
                data: function (term) {
                    return {
                        term: term,
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                }
            }
        });

        $(".filter_customer").select2({
            tags: false,
            tokenSeparators: [','],
            minimumInputLength: 0,
            minimumResultsForSearch: 0,
            maximumInputLength: 10, // only allow terms up to 20 characters long
            ajax: {
                url: "{{route('customer.filter_customer')}}",
                dataType: "json",
                type: "GET",
                data: function (term) {
                    return {
                        term: term,
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                }
            }
        });

        $(document).on('change','.filter_customer',function(){
            $.ajax({
                url: '{{route("customer.getCustomerInfo")}}',
                method: "get",
                data: {
                    id: $(this).val()
                },
                dataType: 'json',
                success: function (response) {
                    $('#address').val(response.customer.address);
                    calculatePrice();
                }
            });
        });

        $("#weight").keyup(function() {
            calculatePrice();
        });
        
        $("#delivery-fee").keyup(function() {
            calculatePrice();
        });

        $('#discount').keyup(function(){
            calculatePrice();
        })

        function calculatePrice(){
            let weight          = $('#weight').val();
            let size            = $('#size').val();
            let customer        = $('#customer').val();
            let discount_manual = $('#discount').val() ? $('#discount').val() : 0;
            let delivery_fee    = $('#delivery-fee').val() ? $('#delivery-fee').val() : 0;

            $.ajax({
                url: '{{ route("price_setup.getPricing") }}',
                method: 'GET',
                dataType: 'json',
                data: {
                    weight          : weight,
                    size            : size,
                    customer        : customer,
                    discount_manual : discount_manual,
                    delivery_fee    : delivery_fee,
                },
                success: function(response) {
                    $('input[name="price"]').val(response.price.toFixed(2));
                    $('input[name="total"]').val(response.total.toFixed(2));
                    $('input[name="vat"]').val(response.vat.toFixed(2));
                    $('input[name="grand_total_usd"]').val(response.grand_total_usd.toFixed(2));
                    $('input[name="grand_total_riel"]').val(response.grand_total_riel.toFixed(2));
                }
            });
        }
    </script>
@endsection