@extends ('backend.layouts.app')

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

@section('breadcrumb-links')
    @include('coupon::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") }}   
@endpush

@section('content')
{{ html()->form('POST', route('admin.coupon.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">
                        {{ __('coupon::labels.backend.coupon.management') }}
                        <small class="text-muted">{{ __('coupon::labels.backend.coupon.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(__('coupon::labels.backend.coupon.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 row">
                    {{ html()->label(__('coupon::labels.backend.coupon.table.reward').' <span class="text-danger">*</span>')->class('col-md-2 form-control-label')->for('reward') }}

                        <div class="col-md-10">
                            <select name="reward_id" id="reward" class="form-control" >
                                <option></option>
                                @foreach($rewards as $key=>$value)
                                    <option value="{{$key}}" id="{{$value}}" name="reward_id" {{ $value == old('reward') ? ' selected' : ''}}>{{$value}}</option>    
                                @endforeach
                            </select>
                        </div><!--col-->
                    </div><!--form-group-->

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

                        <div class="col-md-5">
                            <div class="input-group">
                                <input type="text" id="coupon_code" name="coupon_code" readOnly="true" value="" class="form-control">
                                <span class="input-group-btn" style="display:none;">
                                    <a id="generate" class="btn btn-info" href="javascript:;">
                                    <i class="fa fa-plus"></i> New </a>
                                </span>
                            </div>
                        </div><!--col-->
                    </div><!--form-group-->

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

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

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

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

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

                        <div class="col-md-10">
                            {{ html()->text('expiry')
                                ->class('form-control expiry')
                                ->placeholder(__('coupon::labels.backend.coupon.table.expiry'))
                                ->attribute('maxlength', 191)
                                ->readonly() }}
                        </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.coupon.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>
    $(function () {

        $('.expiry').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true
        });

        $('#reward').select2({
           placeholder: "Choose Reward"
        });

        var rewardId;

        $('#reward').change(function(){
            rewardId = $(this).val();
            $.get('{{ url('admin/coupon/generate' ) }}' + '/' + rewardId,{}, function (data) {
                $('#coupon_code').val(data.code);
                $('#used_point').val(data.redeem_points);
                $('.input-group-btn').show();
            });
        })

        $('#generate').click(function(){
            $('#coupon_code').addClass('spinner-border spinner-border-sm');
            $.get('{{ url('admin/coupon/generate' ) }}' + '/' + rewardId,{},function(data) {
                $('#coupon_code').val(data.code);
                $('#coupon_code').removeClass('spinner-border spinner-border-sm');
            });
        });

        

    });

</script>
@endpush