@extends('layouts.main')
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon2-group text-primary"></i>
            </span>
            <h3 class="card-label">Create New Incentive</h3>
        </div>
        
    </div>
    <form class="form" enctype="multipart/form-data" id="kt_form_1" action="{{route('incentives.create.submit')}}" method="post" autocomplete="off">
        {{ csrf_field() }}
        <div class="card-body">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="row">
                        @if ($loggedUserDetails['guard'] == 'user' && $loggedUserDetails['team_trainer_id'] == 0)
                        <div class="form-group col-lg-12 col-md-12 col-sm-12">
                            <label>Team<span class="text-danger">*</span></label>
                            <select name="team_id" id="team_id" class="form-control" required="">
                                <option value="" disabled="" selected=selected >Select a Team</option>
                                @if ($teams->count() > 0)
                                    @foreach ($teams as $team)
                                    <option value="{{$team->id}}" >{{$team->team_name}}</option>
                                    @endforeach
                                @endif
                            </select>
                            <span class="invalid-feedback"></span>
                        </div>
                        @else
                        <input class="form-control" type="hidden" name="team_id" value="{{$loggedUserDetails['team_id']}}">
                        @endif

                        <div class="form-group col-lg-12 col-md-12 col-sm-12">
                            <label>Description<span class="text-danger">*</span></label>                   
                            <textarea class="form-control" id="incentive_description" name="incentive_description" rows="6"></textarea>
                        </div>  
                    </div>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-12">
                    <div class="row">
                        <div class="form-group col-lg-6 col-md-6 col-sm-12">
                            <label>Title<span class="text-danger">*</span></label>
                            <input type="text" name="incentive_title" id="incentive_title" class="form-control" required placeholder="Enter Title">
                        </div>

                        <div class="form-group col-lg-6 col-md-6 col-sm-12">
                            <label>Badges to Redeem<span class="text-danger">*</span></label>
                            <input type="text" name="incentive_badge" id="incentive_badge" class="form-control" required placeholder="Badges to Redeem">
                        </div>
                        <div class="form-group col-lg-6 col-md-6 col-sm-12">
                            <label>Upload Image</label><br>
                            <div class="image-input image-input-empty image-input-outline " id="kt_image_5" style="background-image: url({{$common->getTheamUrl('assets/media/no-image.jpg')}})">
                                 <div class="image-input-wrapper"></div>

                                 <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change Image">
                                  <i class="fa fa-pen icon-sm text-muted"></i>
                                  <input type="file" name="imageUpload" id="imageUpload" accept=".png, .jpg, .jpeg"/>                  
                                 </label>

                                 <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel Image">
                                  <i class="ki ki-bold-close icon-xs text-muted"></i>
                                 </span>

                                 <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="remove" data-toggle="tooltip" title="Remove Image">
                                  <i class="ki ki-bold-close icon-xs text-muted"></i>
                                 </span>
                            </div> 
                        </div>
                        <div class="form-group col-lg-6 col-md-6 col-sm-12">
                            <div class="row">
                                <label class="col-form-label col-lg-3 col-md-3 col-sm-12">Status</label>
                                <div class="col-lg-9 col-md-9 col-sm-12">
                                     <input id="incentive_status" name="incentive_status" data-switch="true" type="checkbox" data-on-text="Active" data-handle-width="80" data-off-text="Inactive" data-on-color="primary" checked />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
        <div class="card-footer">
            <div class="row">
                <div class="col-lg-9 ml-lg-auto">
                    <button type="submit" class="btn btn-primary font-weight-bold mr-2">Save</button>
                    <button type="reset" class="btn btn-light-primary font-weight-bold">Cancel</button>
                </div>
            </div>
        </div>
    </form>
</div>
<!--end::Card-->
@endsection
@section('sub_header')
@section('sub_header')
<div class="subheader py-2 py-lg-6 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Create Incentive</h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="{{route('incentives.list')}}" class="text-muted">Incentives</a>
                    </li>
                    <li class="breadcrumb-item text-muted">
                        <a href="#" class="text-muted">Create </a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        
    </div>
</div>
@endsection
@section('theam_css')
<link href="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />

@endsection

@section('js_file')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection

@section('page_js')
    <script>
        $(document).ready(function(){
            @if(Session::has('success'))
                toastr.success("{{Session::get('success')}}");
            @endif 
            @if(Session::has('error'))
                toastr.error("{{Session::get('error')}}");
            @endif
            var avatar5 = new KTImageInput('kt_image_5'); 
            $('[data-switch=true]').bootstrapSwitch();

            const form = document.getElementById('kt_form_1');
            const fv = FormValidation.formValidation(
                form,
                {
                    fields: {
                        @if ($loggedUserDetails['guard'] == 'user' && $loggedUserDetails['team_trainer_id'] == 0)
                        team_id: {
                            validators: {
                                notEmpty: {
                                    message: 'Please select an Team'
                                },
                            }
                        },
                        @endif
                        incentive_title: {
                            validators: {
                                notEmpty: {
                                    message: 'Incentive Title is required'
                                },
                            }
                        },
                        incentive_description: {
                            validators: {
                                notEmpty: {
                                    message: 'Description is required'
                                },
                            }
                        },
                        incentive_badge: {
                            validators: {
                                notEmpty: {
                                    message: 'Badges to Redeem is required'
                                },
                                digits: {
                                    message: 'Enter Valid a Digits'
                                }
                            }
                        },
                    },

                    plugins: { //Learn more: https://formvalidation.io/guide/plugins
                        trigger: new FormValidation.plugins.Trigger(),
                        // Bootstrap Framework Integration
                        bootstrap: new FormValidation.plugins.Bootstrap(),
                        // Validate fields when clicking the Submit button
                        submitButton: new FormValidation.plugins.SubmitButton(),
                        // Submit the form when all fields are valid
                        defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                    }
                }
            );

        });
    </script>
@endsection