@extends('layouts.admin')

@section('content')
    @push('css')

        {{-- dropzone --}}
        <link href="{{ asset('') }}/assets/libs/dropzone/min/dropzone.min.css" rel="stylesheet" type="text/css" />
        <link href="{{ asset('') }}/assets/libs/dropify/css/dropify.min.css" rel="stylesheet" type="text/css" />

    @endpush

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
            </div>
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-6">
                                <h5>Create Incentive</h5>
                            </div>
                            <div class="col-md-6 text-right">
                                <a href="{{ route('admin.incentive.index') }}" class="btn btn-secondary btn-sm">Incentive List</a>
                            </div>
                        </div>

                    </div>
                    <div class="card-body">
                        <form method="POST" class="from-submit" action="{{ route('admin.incentive.store') }}" enctype="multipart/form-data">
                            @csrf

                            <div class="row">

                                <div class="col-md-6">
                                    <div class="form-group ">
                                        <label for="incentive_name" class="col-form-label pt-0">Incentive Name <span class="text-danger">*</span></label>
                                        <input class="form-control{{ $errors->has('incentive_name') ? ' is-invalid' : '' }}" type="text" name="incentive_name" id="incentive_name" value="{{ old('incentive_name') }}">
                                        @if ($errors->has('incentive_name'))
                                            <span class="text-danger" role="alert">
                                            <strong>{{ $errors->first('incentive_name') }}</strong>
                                        </span>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group ">
                                        <label for="start_date" class="col-form-label pt-0">Start Date <span class="text-danger">*</span></label>
                                        <input autocomplete="off" class="form-control my_date {{ $errors->has('start_date') ? ' is-invalid' : '' }}" type="text" name="start_date" value="{{ old('start_date') }}">
                                        @if ($errors->has('start_date'))
                                            <span class="text-danger" role="alert">
                                            <strong>{{ $errors->first('start_date') }}</strong>
                                        </span>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group ">
                                        <label for="end_date" class="col-form-label pt-0">End Date <span class="text-danger">*</span></label>
                                        <input autocomplete="off" class="form-control my_date {{ $errors->has('end_date') ? ' is-invalid' : '' }}" type="text" name="end_date" value="{{ old('end_date') }}">
                                        @if ($errors->has('end_date'))
                                            <span class="text-danger" role="alert">
                                            <strong>{{ $errors->first('end_date') }}</strong>
                                        </span>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-12"></div>

                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group ">
                                                <label  class="col-form-label pt-0">Designation <span class="text-danger">*</span></label>
                                                <select class="form-control select2" name="designation_id[]" >
                                                    <option value="">Select One</option>
                                                    @foreach($designations as $designation)
                                                        <option {{ old('designation_id') == $designation->id ? 'selected' : '' }} value="{{ $designation->id }}">{{ $designation->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-5 ">
                                            <div class="form-group ">
                                                <label for="target_amount" class="col-form-label pt-0">Target Amount <span class="text-danger">*</span></label>
                                                <input class="form-control {{ $errors->has('target_amount') ? ' is-invalid' : '' }}" type="number" name="target_amount[]" value="{{ old('target_amount') }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="newRow1" class="col-md-12"></div>

                                <div class="col-md-12" style="margin-bottom: 18px">
                                    <button id="addRow1" type="button" class="btn btn-info rect-btn"><i class="fa fa-plus-square "></i> Add another item</button>
                                </div>

                                <div class="col-md-12 text-right mt-4">
                                    <button type="submit" class="btn btn-dribbble">
                                        <i class="fas fa-save mr-2"></i> Save
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div> <!-- end col -->
        </div><!--end row-->

    </div> <!-- container-fluid -->
    @push('alljs')
        <script src="{{asset('assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>

        <script type="text/javascript">
            $('.my_date').datepicker({
                format: 'dd-mm-yyyy',
                autoclose:!0,
                todayHighlight:!0
            });

            // add remove row 1
            $("#addRow1").click(function () {
                var html = '';
                html += '<div class="row" id="inputFormRow1">';



                //input
                html += '<div class="form-group col-md-6">';
                html += '<label class="col-form-label pt-0">Designation <span class="text-danger">*</span></label>';
                html += '<select class="form-control select2" name="designation_id[]">';
                html += '<option value="">Select One</option>';
                @foreach($designations as $designation)
                html += '<option value="{{ $designation->id }}">{{ $designation->name }}</option>';
                @endforeach
                html += '</select>';
                html += '</div>';

                //input
                html += '<div class="form-group col-md-5">';
                html += '<label for="target_amount" class="col-form-label pt-0">Target Amount <span class="text-danger">*</span></label>';
                html += ' <input class="form-control" type="number" name="target_amount[]" >';
                html += '</div>';

                //button
                html += '<div class="col-md-1">';
                html += '<a style="margin-top: 27px;" id="removeRow1" href="javascript:void(0)" class="btn btn-danger rect-btn"><i class="fa fa-trash "></i> </a>';
                html += '</div>';

                html += '</div>';

                $('#newRow1').append(html);
                $(".select2").select2();
            });
            // remove row
            $(document).on('click', '#removeRow1', function () {
                $(this).closest('#inputFormRow1').remove();
            });
            // End add remove row 1

        </script>


    @endpush
@endsection