@extends('adminlte::page')

@section('title', 'Create Sales Manager')

@push('css')
    <style>
        .iti{
            display: block !important;
        }
        .error {
            color: red;
            font-weight: 400 !important;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('vendor/datepicker/datepicker.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/css/intlTelInput.css" integrity="sha512-gxWow8Mo6q6pLa1XH/CcH8JyiSDEtiwJV78E+D+QP0EVasFs8wKXq16G8CLD4CJ2SnonHr4Lm/yY2fSI2+cbmw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
@endpush
@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Create Sales Manager</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active">Create Sales Manager</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="col-md-12">
        <!-- jquery validation -->
        <div class="card card-primary">
          <div class="card-header">
            <h3 class="card-title">Add A New Sales Manager</small></h3>
          </div>
          <!-- /.card-header -->
          <!-- form start -->
          <form method="POST" id="register_form" action="@if(in_array(\Auth::user()->type, [ 2, 3, 4 ])){{ route('admin.sales_manager.add') }}@elseif(in_array(\Auth::user()->type, [ 5 ])){{ route('manager.regional_manager.sales_manager.add') }}@endif">
            @csrf
            <div class="card-body">
                <!-- <div class="form-group">
                    <label for="employee-id">Employee ID</label>
                    <input type="text" name="employee_id" value="{{ old('employee_id') }}" class="form-control @error('employee_id') is-invalid @enderror" id="employee-id" placeholder="Enter Employee Id" >
                    @error('employee_id')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div> -->
                <div class="form-group">
                    <label for="first-name">First Name</label>
                    <input type="text" name="first_name" value="{{ old('first_name') }}" class="form-control @error('first_name') is-invalid @enderror" id="first-name" placeholder="Enter First Name" >
                    @error('first_name')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="last-name">Last Name</label>
                    <input type="text" name="last_name" value="{{ old('last_name') }}" class="form-control @error('last_name') is-invalid @enderror" id="last-name" placeholder="Enter Last Name" >
                    @error('last_name')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="email-address">Email address</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" id="email-address" placeholder="Enter email" >
                    @error('email')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" id="password" placeholder="Password" >
                    @error('password')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <!-- <div class="form-group">
                    <label for="age">Age</label>
                    <select name="age" id="" class="form-control" @error('age') is-invalid @enderror>

                        <option value="2" {{ old('age') == 2 ? 'selected' : '' }}>18 - 24</option>
                        <option value="3" {{ old('age') == 3 ? 'selected' : '' }}>25 - 34</option>
                        <option value="4" {{ old('age') == 4 ? 'selected' : '' }}>34 - 44</option>
                        <option value="1" {{ old('age') == 1 ? 'selected' : '' }}>45 +</option>
                        <option value="0" {{ old('age') == 0 ? 'selected' : '' }}>Not Prefer To Say</option>
                    </select>
                    @error('age')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div> -->
                <div class="form-group ">
                    <label for="user-type">Gender</label>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="custom-control custom-radio d-inline">
                                <input class="custom-control-input" type="radio" id="male" name="gender" value="0"  {{ old('gender') == 0 ? 'checked' : 'checked' }}>
                                <label for="male" class="custom-control-label">M</label>
                            </div>
                            <div class="custom-control custom-radio d-inline ml-2">
                                <input class="custom-control-input" type="radio" id="f-male" name="gender" value="1" {{ old('gender') == 1 ? 'checked' : '' }}>
                                <label for="f-male" class="custom-control-label">F</label>
                            </div>
                            <div class="custom-control custom-radio d-inline ml-2">
                                <input class="custom-control-input" type="radio" id="other-male" name="gender" value="2" {{ old('gender') == 2 ? 'checked' : '' }}>
                                <label for="other-male" class="custom-control-label">Other</label>
                            </div>
                        </div>
                    </div>
                    @error('type')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <input class="custom-control-input" type="hidden" id="salesmanager" name="type" value="6" {{ old('type') == 6 ? 'checked' : '' }}>
                
                <div class="form-group">
                    <label for="phone_no">Phone No</label>
                    <input id="phone_no" class="form-control" type="text" name="phone_no" value="{{ old('phone_no') }}" required maxlength="10" oninput="javascript: this.value = this.value.replace(/[^0-9]/g, ''); if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" autocomplete="phone_no" placeholder="{{ __('Phone No') }}" >
                    <input type="hidden" name="country_code" value="{{ old('country_code') }}">
                    @error('phone_no')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="birth_date">Birth Date</label>
                    <input id="birth_date" class="form-control datepicker" type="text" name="birth_date" value="{{ old('birth_date') }}" required placeholder="{{ __('Birth Date') }}" >
                    @error('birth_date')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
           
                <div class="form-group">
                    <label for="address">Address</label>
                    <input id="address" class="form-control" type="text" name="address" value="{{ old('address') }}" required placeholder="Enter Address" >
                    @error('address')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="joining_date">Joining Date</label>
                    <input id="joining_date" class="form-control datepicker" type="text" name="joining_date" value="{{ old('joining_date') }}" required placeholder="Joining Date" >
                    @error('joining_date')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="security-number">Social Security Number</label>
                    <input id="social-number" class="form-control" type="text" name="social_security_number" value="{{ old('social_security_number') }}" required maxlength="10" oninput="javascript: this.value = this.value.replace(/[^0-9]/g, ''); if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"  placeholder="{{ __('Social Security Number') }}" >
                    @error('social_security_number')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="ti-number">Tax Indentification Number</label>
                    <input id="ti-number" class="form-control" type="text" name="tax_identification_number" value="{{ old('tax_identification_number') }}" required maxlength="10" oninput="javascript: this.value = this.value.replace(/[^0-9]/g, ''); if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"  placeholder="{{ __('Tax Identification Number') }}" >
                    @error('tax_identification_number')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="rm-id">Regional Manager</label>
                    <!-- <input type="text" name="parent_id" value="{{ old('parent_id') }}" class="form-control @error('parent_id') is-invalid @enderror" id="rm-id" placeholder="{{ __('Regional Manager') }}" > -->
                    <select name="parent_id" id="parent_id" class="form-control" @error('parent_id') is-invalid @enderror>
                        <option value="">Select Regional Manager</option>
                        @foreach($regional_managers as $regional_manager)
                            @if($regional_manager)
                                <option value="{{ $regional_manager->employee_id }}">{{ $regional_manager->employee_id }} - {{ $regional_manager->first_name }}</option>
                            @endif
                        @endforeach
                    </select>
                    @error('parent_id')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="region_id">Region Allocated</label>
                    <select name="region_id[]" id="region-id" class="form-control" @error('region_id') is-invalid @enderror multiple>
                        <option value="">Select Region</option>
                    </select>
                    @error('region_id')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

            </div>
            <!-- /.card-body -->
            <div class="card-footer">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </form>
        </div>
        <!-- /.card -->
        </div>
</section>
@push('js')
    <script src="{{ asset('vendor/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('vendor/jquery-validation/additional-methods.min.js') }}"></script>
    <script src="{{ asset('vendor/moment/moment.min.js') }}"></script>
    <script src="{{ asset('vendor/datepicker/datepicker.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/intlTelInput.min.js" integrity="sha512-L3moecKIMM1UtlzYZdiGlge2+bugLObEFLOFscaltlJ82y0my6mTUugiz6fQiSc5MaS7Ce0idFJzabEAl43XHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/utils.min.js" integrity="sha512-LFWtoG1tvcDc6wZLVmditfb3DDPT+qd1NN/KJPQFgo//p5jvYiwcJsm4YjxDvao/JfT1xOzFJqzXOZkhLPpUvQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
@endpush
@section('js')
<script>
    // Show - Hide Password

    $(document).ready(function() {


        var input = document.querySelector("#phone_no");
        window.iti = window.intlTelInput(input, {
            formatOnDisplay : false,
            separateDialCode: true,
        });

        @if(old('phone_no'))
            iti.setNumber("+{{old('country_code')}}{{old('phone_no')}}");
        @endif

        $('#birth_date').datepicker({
            format: "yyyy-mm-dd",
            startDate: moment().subtract(80, 'years').format('y-M-D'),
            endDate: moment().subtract(18, 'years').format('y-M-D'),
            autoclose: true
        });

        $('#joining_date').datepicker({
            format: "yyyy-mm-dd",
            endDate: moment().format('y-M-D'),
            autoclose: true
        });

        $(document).on('change', '#parent_id', function () {
            let employee_id = $(this).val();
            let regional_managers = {!! json_encode($regional_managers) !!};
            let regions = {!! json_encode($regions) !!};
            let manager_regions = {!! json_encode($manager_regions) !!}

            let filter_regional_managers = regional_managers.filter(function(val) {
                return val.employee_id == employee_id;
            });
            // let region_id = filter_regional_managers[0].region_id;
            let manager_id = filter_regional_managers[0].id;
            let filter_manager_regions = manager_regions.filter(function(val) {
                return val.manager_id == manager_id;
            });
            // let region_ids = filter_manager_regions[0].region_id;

            let region_ids = [];
            $.each(filter_manager_regions, function (key, value) {
                region_ids.push(value.region_id);
            });

            let filter_regions = regions.filter(function(val) {
                return region_ids.includes(val.id);
            });

            let options = '<option value="">Select Region</option>';
            $.each(filter_regions, function (key, value) {
                options += '<option value="'+ value.id +'">'+ value.name +'</option>';
            });
            $('#region-id').html(options);
            $('#region-id').trigger("change");
        });

        $.validator.addMethod("checklower", function(value) {
            return /[a-z]/.test(value);
        });

        $.validator.addMethod("checkupper", function(value) {
            return /[A-Z]/.test(value);
        });

        $.validator.addMethod("checkdigit", function(value) {
            return /[0-9]/.test(value);
        });

        $.validator.addMethod("checkphone", function(value) {
            $("input[name='country_code']").val(window.iti.getSelectedCountryData().dialCode);
            return window.iti.isValidNumber();
        }, "Please Enter Proper Phone No");


        jQuery.validator.addMethod("lettersonly", function(value, element) {
                    return this.optional(element) || /^[a-z\s]+$/i.test(value);
                }, "Only alphabetical characters");

        $("#register_form").validate({
            rules : {
                errorClass : 'text-danger',
                errorElement: "span",
                onkeyup: true,
                password: {
                    minlength: 8,
                    required: true,
                    //pwcheck: true,
                    checklower: true,
                    checkupper: true,
                    checkdigit: true
                },
                first_name : {
                    required: true,
                    lettersonly : true
                },
                last_name : {
                    lettersonly : true
                },
                email : {
                    required: true,
                    email: true
                },
                phone_no:{
                    checkphone:true
                }
            },
            messages: {
                password: {
                    checklower: "Need at least 1 lowercase alphabet",
                    checkupper: "Need at least 1 uppercase alphabet",
                    checkdigit: "Need at least 1 digit"
                },
                password_confirmation: {
                    required: "Confirm password needs to be match"
                }
            },
            errorPlacement: function(error, element) {
                if($(element).attr("id") == 'phone_no') {
                    return $(error).appendTo( $("#phone_no").parents(".form-group"));
                }
                error.appendTo( element.parent() );
            },
        });
    });
</script>
<script>
  $('#region-id').select2({
    width: '100%',
    placeholder: "Select an Option",
    allowClear: true,
    closeOnSelect: false
  });
</script>
@endsection
@endsection