@extends ('backend.layouts.app')

@section ('title', __('point::labels.backend.withdraw.management') . ' | ' . __('point::labels.backend.withdraw.create'))

@section('breadcrumb-links')
    @include('point::withdraws.includes.breadcrumb-links')
@endsection

@push('after-styles')
    {{ style("assets/plugins/select2/css/select2.min.css") }}
    {{ style("assets/plugins/select2/css/select2-bootstrap.min.css") }}
    {{ style("assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css") }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<style>

        select {
            width: 100%;
        }

    </style>
@endpush

@section('content')
{{ html()->form('POST', route('admin.withdraw.store'))->class('form-horizontal')->open() }}
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-5">
                    <h4 class="card-title mb-0">
                        {{ __('point::labels.backend.withdraw.management') }}
                        <small class="text-muted">{{ __('point::labels.backend.withdraw.create') }}</small>
                    </h4>
                </div><!--col-->
            </div><!--row-->

            <hr />

            <div class="row mt-4 mb-4">
                <div class="col">

                    <div class="form-group row">
                        {{ html()->label(__('point::labels.backend.withdraw.table.customer').' <span class="text-danger">*</span>')->class('col-md-2 form-control-label')->for('customer') }}

                        <div class="col-md-10">
                            <select class="js-data-customer-ajax" name="customer_id" id="customer_id" style="width: 100%;">
                              <option></option>
                            </select>
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group available_point"></div>

                    <div class="form-group row">
                        {{ html()->label(__('point::labels.backend.point.table.point').' <span class="text-danger">*</span>')->class('col-md-2 form-control-label')->for('point') }}

                        <div class="col-md-10">
                            {{ html()->number('point')
                                ->class('form-control')
                                ->placeholder(__('point::labels.backend.point.table.point'))
                                ->attribute('min', 0)
                                ->disabled()
                                ->required() }}
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                        {{ html()->label(__('point::labels.backend.withdraw.date').' <span class="text-danger">*</span>')->class('col-md-2 form-control-label')->for('date') }}

                        <div class="col-md-10">
                            {{ html()->text('date')
                                ->class('form-control withdraw_date')
                                ->placeholder(__('point::labels.backend.withdraw.date'))
                                ->attribute('maxlength', 191)
                                ->required() }}
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                        {{ html()->label(__('point::labels.backend.point.table.remark'))->class('col-md-2 form-control-label')->for('remark') }}

                        <div class="col-md-10">
                            {{ html()->textarea('remark')
                                ->class('form-control')
                                ->placeholder(__('point::labels.backend.point.table.remark')) }}
                        </div><!--col-->
                    </div><!--form-group-->
                </div><!--col-->
            </div><!--row-->
        </div><!--card-body-->

        <div class="card-footer">
            <div class="row">
                <div class="col">
                    {{ form_cancel(route('admin.withdraw.index'), __('buttons.general.cancel')) }}
                </div><!--col-->

                <div class="col text-right">
                    {{ form_submit(__('buttons.general.crud.create')) }}
                </div><!--row-->
            </div><!--row-->
        </div><!--card-footer-->
    </div><!--card-->
{{ html()->closeModelForm() }}
@endsection

@push('after-scripts')
{{ script('assets/plugins/select2/js/select2.full.min.js')}}
{{ script("assets/plugins/select2/component/components-select2.js") }}
{{ script('assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js')}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script>
    $(document).ready(function() {
        var balancePoint;
        $('.select2-single').select2();
        $('.withdraw_date').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            endDate: "today"
        });

        $('#customer_id').on('change', function() {
            $('#point').val('');
            var data =$("#customer_id").select2('data');
            balancePoint = data[0].balance_point;
            if(balancePoint >= 0) {
                $('.available_point .alert').remove();
                $('.available_point').append(`
                    <div class="alert alert-danger text-center" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>Available Point: `+balancePoint+`</div>`
                );
                $('#point').attr('max', balancePoint);
                $('#point').removeAttr('disabled');
            }else {
                $('.available_point .alert').remove();
            }
        })

        $("#point").keydown(function () {
            // Save old value.
            if (!$(this).val() || (parseInt($(this).val()) <= balancePoint && parseInt($(this).val()) >= 0))
            $(this).data("old", $(this).val());
        });
        $("#point").keyup(function () {
            // Check correct, else revert back to old value.
        if (!$(this).val() || (parseInt($(this).val()) <= balancePoint && parseInt($(this).val()) >= 0))
              ;
        else
            $(this).val($(this).data("old"));
        });
    })
</script>
@endpush