@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="la la-user-plus text-primary"></i>
            </span>
            <h3 class="card-label">Create Profile</h3>
        </div>
        
    </div>
    <form class="form" id="profile_create_form" action="{{route('profile.create.post')}}" method="post" autocomplete="off">
        {{ csrf_field() }}
        <div class="card-body"> 
            <div class="row">
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>First Name<span class="text-danger">*</span></label>
                    <input type="text" name="profile_first_name" id="profile_first_name" class="form-control" required placeholder="Enter first name" value=" " autocomplete="off">
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Last Name<span class="text-danger">*</span></label>
                    <input type="text" name="profile_last_name" id="profile_last_name" class="form-control" required placeholder="Enter last name" value=" " autocomplete="off">
                </div>       
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Email address<span class="text-danger">*</span></label>
                    <input type="email" class="form-control" id="profile_email" name="profile_email" required placeholder="Enter email" value=" " autocomplete="off">
                    <span class="form-text text-muted">Email address must be unique.</span>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Mobile Number<span class="text-danger">*</span></label>
                    <input type="tel" id="mobile" name="mobile" class="form-control" required placeholder="Enter mobile number"  value=" " autocomplete="off">
                </div> 
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Password <span class="text-danger">*</span></label>
                    <input type="password" placeholder="Enter password" name="password" id="password" minlength="6" class="form-control" required value="" autocomplete="off">
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Password (Confirm)<span class="text-danger">*</span></label>
                    <input type="password" placeholder="Enter confirm password" name="password2" id="password2" class="form-control" required value="" autocomplete="off">
                    <span class="form-text text-muted">Confirm password must be same with main Password.</span>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Pay Rate<span class="text-danger">*</span></label>
                    <input type="number" step="any" id="pay_rate" name="pay_rate" class="form-control" required placeholder="Enter pay rate" value="0.00">
                </div> 
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Paycor Number</label>
                    <input type="text" id="paycore_number" name="paycore_number" class="form-control" required placeholder="Enter Paycore Number">
                </div>


                {{-- <div class="form-group col-lg-3 col-md-3 col-sm-12" style="display:block;">
                    <label>Revshare Position<span class="text-danger">*</span></label>
                    <select class="form-control" name="revshare_position" id="revshare_position" required>
                        <option value="">Select</option>
                        @if (is_object($revsharePosition) && $revsharePosition->count() > 0)
                            @foreach ($revsharePosition as $revshare)
                            <option value="{{$revshare->id}}" >{{$revshare->name}}</option>
                            @endforeach
                        @endif
                    </select>
                    <span class="invalid-feedback"></span>
                </div> --}}


                
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Start Date<span class="text-danger">*</span></label>
                    <div class="input-group date">
                        <input type="text" class="form-control datetimepicker-input" name="start_date" id="start_date" placeholder="Select date & time"  data-toggle="datetimepicker" data-target="#start_date" readonly="" required="" />
                        <div class="input-group-append" data-target="#start_date" data-toggle="datetimepicker">
                            <span class="input-group-text">
                                <i class="ki ki-calendar"></i>
                            </span>
                        </div>
                    </div>
                </div>



                @if ( $loggedUserDetails['is_admin'] == 1)
                <div class="form-group col-lg-3 col-md-3 col-sm-12">
                    <label for="exampleSelectl">Business<span class="text-danger">*</span></label>
                    <select class="form-control" name="business_id" id="business_id">
                        <option value="">Select</option>
                      @foreach($businessList as $business)
                        <option value="{{$business->id}}">{{$business->name}}</option>
                      @endforeach  
                    </select>
                    <span class="invalid-feedback"></span>
                </div>
                @endif

                @if ( $loggedUserDetails['is_admin'] == 1)
                <div class="form-group col-lg-3 col-md-3 col-sm-12">
                    <label>Primary 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 type="hidden" name="team_id" value="{{$loggedUserDetails['team_id']}}">
                @endif

                <div class="form-group col-lg-3 col-md-3 col-sm-12">
                    <label>Position<span class="text-danger">*</span></label>
                    <select class="form-control" name="designation" id="designation" required>
                        <option value="" disabled="" selected=selected>Select a Position</option>
                        @if (is_object($designations) && $designations->count() > 0)
                            @foreach ($designations as $designation)
                            <option value="{{$designation->id}}" >{{$designation->name}}</option>
                            @endforeach
                        @endif
                    </select>
                    <span class="invalid-feedback"></span>
                </div> 

                @if ( $loggedUserDetails['is_admin'] == 1)
                <div class="form-group col-lg-3 col-md-3 col-sm-12">
                    <label>Additional Teams</label>
                    <select class="form-control select2" name="additional_teams[]" id="additional_teams" multiple>
                        <!-- <option value="" disabled="" selected=selected>Select any teams</option> -->
                        @if ($teams->count() > 0)
                            @foreach ($teams as $team)
                            <option value="{{$team->id}}" >{{$team->team_name}}</option>
                            @endforeach
                        @endif
                    </select>
                    <span class="form-text text-muted">you can choose multiple options.</span>
                    <span class="invalid-feedback"></span>
                </div>
                @else
                <div class="form-group col-lg-3 col-md-3 col-sm-12"></div>
                @endif

                <div class="form-group col-lg-12 col-md-12 col-sm-12" id="revshare_position_div" style="display: none;">
                    <div class="form-group col-lg-4 col-md-4 col-sm-12">
                        <label>Revshare Position<span class="text-danger">*</span></label>
                        <select class="form-control" name="revshare_position" id="revshare_position" required>
                            <option value="">Select</option>
                            @if (is_object($revsharePosition) && $revsharePosition->count() > 0)
                                @foreach ($revsharePosition as $revshare)
                                <option value="{{$revshare->id}}" >{{$revshare->name}}</option>
                                @endforeach
                            @endif
                        </select>
                        <span class="invalid-feedback"></span>
                    </div>
                </div> 

              
                <div class="form-group col-lg-6 col-md-12 col-sm-12">
                  
                    <label><strong> Access </strong></label>

                    <div class="form-group col-lg-4 col-md-4 col-sm-12">
                        <div class="row">
                            <label class="col-form-label col-lg-6 col-md-6 col-sm-12">Is Admin ?</label>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                    <input id="is_admin" name="is_admin" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                            </div>
                        </div>
                    </div>

                    <div class="form-group col-lg-4 col-md-4 col-sm-12">
                        <div class="row">
                            <label class="col-form-label col-lg-6 col-md-6 col-sm-12">Is Team Trainer ?</label>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                    <input id="is_team_trainer" name="is_team_trainer" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                            </div>
                        </div>
                    </div>

                    <div class="form-group col-lg-4 col-md-4 col-sm-12">
                        <div class="row">
                            <label class="col-form-label col-lg-6 col-md-6 col-sm-12">Human Resources ?</label>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                 <input id="is_hr" name="is_hr" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                            </div>
                        </div>
                    </div>

                </div>
               
                <div class="form-group col-lg-6 col-md-12 col-sm-12">

                    <label><strong> Badges </strong></label>

                    <div class="form-group col-lg-6 col-md-6 col-sm-12">
                        <div class="row">
                            <label class="col-form-label col-lg-6 col-md-6 col-sm-12">DOT (Driver)</label>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                 <input id="is_dot" name="is_dot" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                            </div>
                        </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-6 col-md-6 col-sm-12">Trainer</label>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                 <input id="is_trainer" name="is_trainer" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                            </div>
                        </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-6 col-md-6 col-sm-12">OPS</label>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                 <input id="is_ops" name="is_ops" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                            </div>
                        </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-6 col-md-6 col-sm-12">DOT In-Training</label>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                 <input id="dot_in_training" name="dot_in_training" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                            </div>
                        </div>
                    </div>

                </div>


                {{-- <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <div class="row">
                        <label class="col-form-label col-lg-6 col-md-6 col-sm-12">Is Admin ?</label>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                             <input id="is_admin" name="is_admin" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                        </div>
                    </div>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <div class="row">
                        <label class="col-form-label col-lg-6 col-md-6 col-sm-12">Is Team Trainer ?</label>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                             <input id="is_team_trainer" name="is_team_trainer" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                        </div>
                    </div>
                </div> --}}
                {{-- <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <div class="row">
                        <label class="col-form-label col-lg-6 col-md-6 col-sm-12">DOT (Driver)</label>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                             <input id="is_dot" name="is_dot" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                        </div>
                    </div>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <div class="row">
                        <label class="col-form-label col-lg-6 col-md-6 col-sm-12">Trainer</label>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                             <input id="is_trainer" name="is_trainer" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                        </div>
                    </div>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <div class="row">
                        <label class="col-form-label col-lg-6 col-md-6 col-sm-12">OPS</label>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                             <input id="is_ops" name="is_ops" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                        </div>
                    </div>
                </div> --}}
                {{-- <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <div class="row">
                        <label class="col-form-label col-lg-6 col-md-6 col-sm-12">Human Resources ?</label>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                             <input id="is_hr" name="is_hr" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                        </div>
                    </div>
                </div> --}}
                {{-- <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <div class="row">
                        <label class="col-form-label col-lg-6 col-md-6 col-sm-12">DOT In-Training</label>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                             <input id="dot_in_training" name="dot_in_training" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                        </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" id="submitBtn">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 Profile</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('profile.list')}}" class="text-muted">Profiles</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(){


            $('body').on('change','#business_id', function(){
                if($(this).val() == 1){
                    $('#revshare_position_div').show("slow");
                }else{
                    $('#revshare_position_div').hide("slow");
                }
            })

            @if(Session::has('success'))
                toastr.success("{{Session::get('success')}}");
            @endif 
            @if(Session::has('error'))
                toastr.error("{{Session::get('error')}}");
            @endif 

            $('body').on('focus','#start_date',function(){
                $(this).datetimepicker({
                    format: moment_date_time_format
                });
            })
            $('#additional_teams').select2({
                placeholder : 'Select any Team'
            });
            

            @if ( $loggedUserDetails['is_admin'] == 1)
                $('body').on('change','#team_id', function(){
                    $.ajax({
                        url: "{{route('profile.ajax.designations.team')}}",
                        type: 'get',
                        dataType: 'json',
                        data: {team_id:$(this).val()},                    
                        success: function (response) {
                            $("#designation").html(response.html);
                        },
                        error: function (response) {
                            toastr.error("An error occurred");
                        }
                    });
                })
            @endif


            @if ( $loggedUserDetails['is_admin'] == 1)
                $('body').on('change','#business_id', function(){
                    $.ajax({
                        url: "{{route('profile.ajax.business.team')}}",
                        type: 'get',
                        dataType: 'json',
                        data: {business_id:$(this).val()},                    
                        success: function (response) {
                            $("#team_id").html(response.html);
                        },
                        error: function (response) {
                            toastr.error("An error occurred");
                        }
                    });
                })
            @endif

            $('[data-switch=true]').bootstrapSwitch(); 
            const form = document.getElementById('profile_create_form');
            const fv = FormValidation.formValidation(
               form,
                {
                    fields: {
                        profile_first_name: {
                            validators: {
                                notEmpty: {
                                    message: 'First Name is required'
                                },
                            }
                        },
                        profile_last_name: {
                            validators: {
                                notEmpty: {
                                    message: 'Last Name is required'
                                },
                            }
                        },
                        profile_email: {
                            validators: {
                                notEmpty: {
                                    message: 'Email address is required'
                                },
                                emailAddress: {
                                  message: 'Enter a valid email address'
                                },
                                callback: {
                                    callback: function(input) {
                                        const emailElements    = form.querySelector('[name="profile_email"]').value; 
                                        let duplicateEmail = false;                                       
                                        $.ajax({
                                            url: "{{route('profile.ajax.check.email')}}",
                                            type: 'get',
                                            dataType: 'json',
                                            data: {profile_email:emailElements, profile_id:'0'},
                                            async:false,
                                            success: function (response) {
                                                duplicateEmail = response.status;
                                            }
                                        });

                                        if(duplicateEmail){
                                            return {
                                                valid: false,
                                                message: 'Given Email address all ready exits.',
                                            }
                                        }else{
                                            return {
                                                valid: true,
                                            }
                                        }
                                    }
                                },
                            }
                        },
                        mobile: {
                            validators: {
                                notEmpty: {
                                    message: 'Mobile number is required'
                                },
                                digits: {
                                    message: 'Enter Valid Phone number'
                                }
                            }
                        },
                        password: {
                            validators: {
                                notEmpty: {
                                    message: 'Password is required'
                                },
                                stringLength: {
                                  min:6,
                                  message: 'Password must be minimum 6 characters in length'
                                }
                            }
                        },
                        password2: {
                            validators: {
                                notEmpty: {
                                    message: 'Confirm Password is required'
                                },
                                identical: {
                                    compare: function() {
                                        return form.querySelector('[name="password"]').value;
                                    },
                                    message: 'The password and its confirm are not the same'
                                }
                            }
                        },
                        start_date: {
                            validators: {
                                notEmpty: {
                                    message: 'Start Date is required'
                                },
                            }
                        },
                        designation: {
                            validators: {
                             notEmpty: {
                              message: 'Please select an Position'
                             }
                            }
                        },
                        // revshare_position: {
                        //     validators: {
                        //      notEmpty: {
                        //       message: 'Please select revshare position'
                        //      }
                        //     }
                        // },
                        
                        @if ( $loggedUserDetails['is_admin'] == 1)
                        team_id: {
                            validators: {
                             notEmpty: {
                              message: 'Please select an Primary Team'
                             }
                            }
                        },
                        @endif

                        @if ( $loggedUserDetails['is_admin'] == 1)
                        business_id: {
                            validators: {
                             notEmpty: {
                              message: 'Please select any Business'
                             }
                            }
                        },
                        @endif
                    },

                    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(),
                    }
                }
            );

            fv.on('core.form.valid', function() {
                var button = KTUtil.getById("submitBtn");
                KTUtil.btnWait(button, "spinner spinner-right spinner-white pr-15", "Submitting");
                const submitform = $('#profile_create_form');

                $.ajax({
                    url : submitform.attr('action'),
                    type : 'post',
                    dataType : "json",
                    data : submitform.serialize(),
                    success: function(response) {
                        if(response.status){
                            window.location.href= response.return_url
                            toastr.success(response.message);
                        } else {
                            if(response.message){
                                toastr.error(response.message);
                            }
                            if(response.errors){
                                Object.keys(response.errors).forEach(element_name => {
                                    var errors = response.errors[element_name];
                                    var inp=$(submitform).find('[name="'+element_name+'"]')
                                    $(inp).addClass('is-invalid')
                                    $(inp).closest('.form-group').find('.fv-plugins-message-container').html('<div data-field="'+element_name+'" data-validator="callback" class="fv-help-block">'+errors[0]+'</div>')
                                    $(inp).closest('.form-group').find('.invalid-feedback').html(errors[0])
                                });
                            }
                        }
                        KTUtil.btnRelease(button);
                    },
                    error: function(response) {
                        KTUtil.btnRelease(button);
                    }
                });
            });
            // Revalidate the confirmation password when changing the password
            form.querySelector('[name="password"]').addEventListener('input', function() {
                fv.revalidateField('password2');
            });
        });
        
    </script>
@endsection