@extends('layouts.master')

@section('content')
    <div class="modal fade" id="approveModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content top_border">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel" align="center">Already <span>Assign</span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body confir_pay">
                    {{-- <div class="check_mark">
                        <div class="sa-icon sa-success animate">
                            <span class="sa-line sa-tip animateSuccessTip"></span>
                            <span class="sa-line sa-long animateSuccessLong"></span>
                            <div class="sa-placeholder"></div>
                            <div class="sa-fix"></div>
                        </div>
                    </div> --}}

                    <p align="center" class="approve-modal-text">Are sure want to over write?</p>
                </div>
                <div class="modal-footer border-0">
                    <div style="display: block; text-align: center; margin: auto">
                        <button type="button" data-dismiss="modal"  onclick="submitForm()" class="btn btn-primary">Yes</button>
                        <button type="button" data-dismiss="modal" aria-label="Close" class="btn btn-cancel">No</button>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Organization <span>Employees</span></h2>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>Employees</span></a></li>
                <li><span>Add</span></li>
            </ol>
        </div>
    </div>
    <input type="hidden" id="hidden_employee_id" value="{{$data['employee'] && $data['employee']->employee_id ? $data['employee']->employee_id : ''}}">
    @if($data['employee'])
        <form method="post" action="/saveEmployee/{{$data['employee']->employee_id}}" id="form-id" enctype="multipart/form-data">
            @else
                <form method="post" action="/saveEmployee" id="form-id" enctype="multipart/form-data">
                    @endif
                    @CSRF
                    <div class="row">
                        <div class="col-md-8 mb-15">
                            <div id="floating-label" class="card mb-15">
                                <div class="header">
                                    <h2>Profile <span>Details</span></h2>
                                </div>

                                <div class="body PT-15 PB-10">

                                    <div class="form-wrap p-0">
                                        <div class="row">

                                            <div class="col-md-4">
                                                <label class="font12 mb-0">Designation</label>
                                                <div class="form-s2">

                                                    <select class="form-control formselect" name="designation" id="designation" onchange="enableFieldOnDesignation(this.value)" required>
                                                        <option value="">Select Designation</option>
                                                        @foreach($data['designations'] as $des)
                                                            <option value="{{$des->id}}" data-flag="{{$des->flags}}" @if($data['employee']) @if($data['employee']->employee_designation==$des->id) selected @endif @endif >{{$des->designation}}</option>
                                                        @endforeach
                                                    </select>
                                                    <div style="color:red; font-size:12px" id="designation_alert"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-4" id="region_div_id" @if(!$data['employee'] || $type==1)  style="display:none" @endif>
                                                <label class="font12 mb-0">Region</label>
                                                <div class="form-s2">
                                                    <select class="form-control formselect" name="region" onchange="fetchAreas(this.value)" id="region_input_id" placeholder="select Region" >
                                                        <option value="">Select Region</option>
                                                        @foreach($data['regions'] as $reg)
                                                            <option value="{{$reg->id}}" @if($data['employee']) @if($data['employee']->region_id==$reg->id) selected @endif @endif>{{$reg->region_name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4" id="area_div_id" @if($data['employee']) @if($data['employee']->employee_designation_flag==4 || $data['employee']->employee_designation_flag==1) style="display:none" @endif @else style="display:none"  @endif>
                                                <label class="font12 mb-0">Area</label>
                                                <div class="form-s2">
                                                    <select class="form-control formselect" name="area" onchange="fetchTerritories(this.value)" id="area_input_id" placeholder="select Area">
                                                        <option value="">Select Area</option>
                                                        @foreach($data['areas'] as $are)
                                                            <option value="{{$are->area_id}}" @if($data['employee']) @if($data['employee']->area_id==$are->area_id) selected @endif @endif>{{$are->area_name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-4" id="territory_div_id" @if($data['employee']) @if($data['employee']->employee_designation_flag==4 || $data['employee']->employee_designation_flag==1 || $data['employee']->employee_designation_flag==2) style="display:none" @endif @else style="display:none" @endif>
                                                <label class="font12 mb-0">Territory</label>
                                                <div class="form-s2">
                                                    <select class="form-control formselect" name="territory" id="territory_input_id" placeholder="select Territory">
                                                        <option value="">Select Territory</option>
                                                        @foreach($data['territories'] as $ter)
                                                            <option value="{{$ter->territory_id}}" @if($data['employee']) @if($data['employee']->territory_id==$ter->territory_id) selected @endif @endif>{{$ter->territory_name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-12"><hr></div>
                                        </div>

                                        <div class="row">

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label mb-10">Employee Code</label>
                                                    <input type="text" id="employee_code" class="form-control" value="{{($data['employee'])? $data['employee']->employee_code:''}}" name="employee_code" placeholder="" required  oninput="checkEmployeeCode(this.value)" >
                                                </div>
                                                <div style="color:red; font-size:12px" id="employee_code_alert"></div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label mb-10">First Name</label>
                                                    <input type="text" id="first_name" class="form-control" value="{{($data['employee'])? $data['employee']->employee_first_name:''}}" name="first_name" placeholder="" required>
                                                </div>
                                                <div style="color:red; font-size:12px" id="first_name_alert"></div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label mb-10">Last Name</label>
                                                    <input type="text" id="last_name" class="form-control" value="{{($data['employee'])? $data['employee']->employee_last_name:''}}" name="last_name" placeholder="">

                                                </div>
                                                <div style="color:red; font-size:12px" id="last_name_alert"></div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label mb-10">Father's Name</label>
                                                    <input type="text" id="" class="form-control" value="{{($data['employee'])? $data['employee']->father_name:''}}" name="father_name" placeholder="" >
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label mb-10">Email ID</label>
                                                    <input type="text" id="" class="form-control" name="email" value="{{($data['employee'])? $data['employee']->employee_email:''}}" placeholder="" >
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label mb-10">Phone No 1</label>
                                                    <input type="text" id="" class="form-control" value="{{($data['employee'])? $data['employee']->employee_phone:''}}" name="phone1" placeholder="" >
                                                </div>
                                            </div>
                                            <div class="col-md-4 PT-5">
                                                <div class="form-group">
                                                    <label class="control-label mb-10">Phone No 2</label>
                                                    <input type="text" id="" class="form-control" name="phone2" value="{{($data['employee'])? $data['employee']->employee_phone2:''}}" placeholder="">
                                                </div>
                                            </div>

                                            <div class="col-md-4 PT-5">
                                                <div class="form-group">
                                                    <label class="control-label mb-0">NIC #</label>
                                                    <input type="text" id="" class="form-control" name="nic" value="{{($data['employee'])? $data['employee']->employee_cnic:''}}" placeholder="" >
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <label class="font12 mb-0">Gender</label>
                                                <div class="form-s2">
                                                    <select type="text" id="" class="form-control formselect" name="gender" placeholder="" required>
                                                        <option value="">Select Gender</option>
                                                        <option value="Male" @if($data['employee']) @if($data['employee']->employee_gender=='Male') selected @endif @endif >Male</option>
                                                        <option value="Female" @if($data['employee']) @if($data['employee']->employee_designation=='Female') selected @endif @endif>Female</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <input type="hidden" id="flag" value="{{($data['employee'])? $data['employee']->employee_designation_flag:''}}" class="form-control" name="flag">

                                            <div class="col-md-4">
                                                <label class="font12 mb-0">Province</label>
                                                <div class="form-s2">
                                                    <select class="form-control formselect" name="province" onchange="fetchCitiesFromProvince(this.value)" placeholder="select Province" required>
                                                        <option value="" selected>Select Province</option>
                                                        @foreach($data['provinces'] as $pro)
                                                            <option value="{{$pro->id}}" @if($data['employee']) @if($data['employee']->province==$pro->id) selected @endif @endif>{{$pro->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <label class="font12 mb-0">City</label>
                                                <div class="form-s2">
                                                    <select class="form-control formselect" name="city" id="employee_city"  placeholder="select City" required>
                                                        <option value="">Select City</option>
                                                        @foreach($data['cities'] as $city)
                                                            <option value="{{$city->city_id}}" @if($data['employee']) @if($data['employee']->employee_city==$city->city_id) selected @endif @endif>{{$city->city_name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            @if($type==2)
                                                <div class="col-md-4 segmentDiv" style="display: none">
                                                    <label class="font12 mb-0">Segment</label>
                                                    <div class="form-s2">
                                                        <select class="form-control formselect" name="segment" placeholder="select Segment" >
                                                            <option value="">Select Segment</option>
                                                            @foreach($data['segments'] as $seg)
                                                                <option value="{{$seg->id}}" {{@$data['employee']->segment_id==$seg->id ? 'selected':''}}>{{$seg->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            @endif

                                        </div>
                                    </div>

                                </div>

                                @if($type==2)
                                    <div class="header">
                                        <h2>Transport <span>Details</span></h2>
                                    </div>

                                    <div class="body PT-15 PB-10">
                                        <div class="form-wrap p-0">
                                            <div class="row">
                                                <div class="col-md-4 PT-5">
                                                    <div class="form-group">
                                                        <label class="control-label mb-10">Bike #</label>
                                                        <input type="text" id="" class="form-control" value="{{($data['employee'])? $data['employee']->bike:''}}" name="bike" placeholder="" >
                                                    </div>
                                                </div>
                                                <div class="col-md-4 PT-5">
                                                    <div class="form-group">
                                                        <label class="control-label mb-10">Bike Make</label>
                                                        <input type="text" id="" class="form-control" value="{{($data['employee'])? $data['employee']->bike_make:''}}" name="bike_make" placeholder="" >
                                                    </div>
                                                </div>
                                                <div class="col-md-4 PT-5">
                                                    <div class="form-group">
                                                        <label class="control-label mb-10">Bike Model</label>
                                                        <input type="text" id="" class="form-control" value="{{($data['employee'])? $data['employee']->bike_model:''}}" name="bike_model" placeholder="">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                @endif


                                <div class="header">
                                    <h2>Additional <span>Details</span></h2>
                                </div>
                                <div class="body PT-15 PB-10">
                                    <div class="form-wrap p-0">
                                        <div class="row">
                                            <div class="col-md-4 PT-5">
                                                <div class="form-group">
                                                    <label class="control-label mb-10">Fixed Salary</label>
                                                    <input type="text" id="" class="form-control" value="{{($data['employee'])? $data['employee']->employee_salary:''}}" name="fixed_salary" placeholder="" >
                                                </div>
                                            </div>
                                            @if($type==2)
                                                <div class="col-md-4">
                                                    <label class="font12 mb-0">Division</label>
                                                    <div class="form-s2">
                                                        <select class="form-control formselect" name="division" placeholder="select Division" required>
                                                            <option value="">Select Division</option>
                                                            @foreach($data['divisions'] as $div)
                                                                <option value="{{$div->id}}" @if($data['employee']) @if($data['employee']->division_id==$div->id) selected @endif @endif>{{$div->division}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            @endif
                                            <input type="hidden" id="reporting_to_employee_id" value="{{$data['employee'] && $data['employee']->reporting_to ? $data['employee']->reporting_to : ''}}">
                                            <div class="col-md-4">
                                                <label class="font12 mb-0">Reporting To</label>
                                                <div class="form-s2">
                                                    <select class="form-control formselect" name="reporting_to" id="reporting_to" placeholder="Reporting To" @if($type==2) required @endif>
                                                        <option value="">Select Reporting To</option>
                                                        @foreach($data['reportingTo'] as $repTo)
                                                            <option value="{{$repTo->employee_id}}" @if($data['employee']) @if($data['employee']->reporting_to==$repTo->employee_id) selected @endif @endif>{{$repTo->employee_name}}</option>
                                                        @endforeach
                                                    </select>
                                                    <div style="color:red; font-size:12px" id="reporting_to_alert"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <label class="font12 mb-0">Department</label>
                                                <div class="form-s2">
                                                    <select class="form-control formselect" name="department" placeholder="Select Department" required>
                                                        <option value="">Select Department</option>
                                                        @foreach($data['departments'] as $dep)
                                                            <option value="{{$dep->id}}" @if($data['employee']) @if($data['employee']->employee_department==$dep->id) selected @endif @endif>{{$dep->department}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 PT-5">
                                                <div class="form-group">
                                                    <label class="control-label mb-10">Joining Date</label>
                                                    <input type="date" id="" class="form-control" value="{{($data['employee'])? $data['employee']->joining_date:''}}" name="joining_date" placeholder="" >
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                @if($type==2)
                                    <div class="header">
                                        <h2>ICE <span>Details</span></h2>
                                    </div>
                                    <div class="body PT-15 PB-10">
                                        <div class="form-wrap p-0">
                                            <div class="row">
                                                <div class="col-md-4 PT-5">
                                                    <div class="form-group">
                                                        <label class="control-label mb-10">Contact Name</label>
                                                        <input type="text" id="" class="form-control" value="{{($data['employee'])? $data['employee']->ice_name:''}}" name="ice_name" placeholder="" >
                                                    </div>
                                                </div>

                                                <div class="col-md-4 PT-5">
                                                    <div class="form-group">
                                                        <label class="control-label mb-10">Contact Number</label>
                                                        <input type="text" id="" name="ice_number" value="{{($data['employee'])? $data['employee']->ice_number:''}}" class="form-control" placeholder="" >
                                                    </div>
                                                </div>

                                                <div class="col-md-4 PT-5">
                                                    <div class="form-group">
                                                        <label class="control-label mb-10">Contact Relation</label>
                                                        <input type="text" id="" class="form-control" value="{{($data['employee'])? $data['employee']->ice_relation:''}}" name="ice_relation" placeholder="" >
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>


                                    <div class="header">
                                        <h2>Bank <span>Details</span></h2>
                                    </div>
                                    <div class="body PT-15 PB-10">
                                        <div class="form-wrap p-0">
                                            <div class="row">
                                                <div class="col-md-4 PT-5">
                                                    <div class="form-group">
                                                        <label class="control-label mb-10">Account Title</label>
                                                        <input type="text" id="" class="form-control" value="{{($data['employee'])? $data['employee']->bank_account_title:''}}" name="account_title" placeholder="" >
                                                    </div>
                                                </div>

                                                <div class="col-md-4 PT-5">
                                                    <div class="form-group">
                                                        <label class="control-label mb-10">Account Number</label>
                                                        <input type="text" id="" class="form-control" value="{{($data['employee'])? $data['employee']->bank_account_number:''}}" name="account_number" placeholder="">
                                                    </div>
                                                </div>

                                                <div class="col-md-4 PT-5">
                                                    <div class="form-group">
                                                        <label class="control-label mb-10">Bank Name</label>
                                                        <input type="text" id="" class="form-control" value="{{($data['employee'])? $data['employee']->bank_name:''}}" name="bank_name" placeholder="">
                                                    </div>
                                                </div>

                                                <div class="col-md-8 PT-5">
                                                    <div class="form-group">
                                                        <label class="control-label mb-10">IBAN</label>
                                                        <input type="text" id="" class="form-control" value="{{($data['employee'])? $data['employee']->bank_iban:''}}" name="iban" placeholder="">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>

                        </div>


                        <div class="col-md-4 mb-30">
                            <div class="card mb-30">

                                <div class="header">
                                    <h2>Create <span> User</span></h2>
                                </div>
                                <div class="body PT-15 pb-0">
                                    <div id="floating-label">
                                        <div class="form-wrap p-0">
                                            <div class="row">

                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="control-label mb-10">User Name</label>
                                                        <input type="text" id="username" value="{{($data['employee'])? $data['employee']->employee_username:''}}" name="username" oninput="checkUsername(this.value)" class="form-control" autocomplete="off" placeholder="" @if($data['employee']) readonly @endif  required>
                                                    </div>
                                                    <div style="color:red; font-size:12px" id="username_alert"></div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="control-label mb-10">Password</label>
                                                        <input type="password" id="" name="password" class="form-control" placeholder="" autocomplete="off">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="header">
                                    <h2>Add <span> Picture</span></h2>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-wrap up_h">
                                        <div class="upload-pic"></div>
                                        <input type="file" name="employeePicture" id="input-file-now" class="dropify" data-default-file="{{ ($data['employee'])? $data['employee']->employee_picture:'/images/avatar.svg' }}" />
                                    </div>
                                </div>
                            </div>
                            @if($type == 2)
                                <div class="card mb-30 assignmentCard" style="display: none">
                                    <div class="header">
                                        <h2>Create <span> Assignment</span></h2>
                                    </div>
                                    <div class="body PT-15 pb-25">
                                        <div id="floating-label">
                                            <div class="form-wrap p-0">
                                                <div class="row">
                                                    <input type="hidden" value="{{$data['ass_distributor'] && $data['ass_distributor']->id ? $data['ass_distributor']->id : ''}}" name="ass_distributor_table_id">
                                                    <input type="hidden" value="{{$data['ass_catalogue'] && $data['ass_catalogue']->id ? $data['ass_catalogue']->id : ''}}" name="ass_catalogue_table_id">
                                                    <input type="hidden" value="{{$data['ass_distributor'] && $data['ass_distributor']->distributor_id ? $data['ass_distributor']->distributor_id : ''}}" id="selectedDistributorId">
                                                    <div class="col-md-12 pb-15">
                                                        <label class="font12 mb-5">Distributor *</label>
                                                        <div class="form-s2">
                                                            <select class="form-control formselect" name="distributor_id" id="distributor_id" placeholder="select Distributor">
                                                                <option value="">Select Distributor</option>
                                                                {{-- @foreach($data['distributors'] as $dist)
                                                                    <option value="{{$dist->id}}" {{$data['ass_distributor'] && $data['ass_distributor']->distributor_id == $dist->id ? 'selected' : ''}}>{{$dist->distributor_name}}</option>
                                                                @endforeach --}}
                                                            </select>
                                                            <div style="color:red; font-size:12px" id="distributor_alert"></div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <label class="font12 mb-5">Catalogue</label>
                                                        <div class="form-s2">
                                                            <select class="form-control formselect" name="catalogue_id" id="catalogue_id" placeholder="select Catalogue">
                                                                <option value="">Select Catalogue</option>
                                                                @foreach($data['catalogues'] as $cat)
                                                                    <option value="{{$cat->id}}" {{$data['ass_catalogue'] && $data['ass_catalogue']->catalogue_id == $cat->id ? 'selected' : ''}}>{{$cat->catalogue_name}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-md-12 text-center">
                        <button type="button" id="submitBtn" onclick="checkIfExist()" class="btn btn-primary mr-2">Save</button>
                        {{--            <button type="submit" class="btn btn-cancel">Cancel</button>--}}

                    </div>
                </form>
                @endsection
            @section('scripts')
                <script>
                    let selectedDesignationFlag   =   "";
                    var all_distributors    =   JSON.parse(`{!! str_replace(["\r", "\n"], '', $data['distributors']) !!}`);
                    console.log(all_distributors);
                    var selectedDistributor =   $('#selectedDistributorId').val();
                    $(document).on('change','#territory_input_id',function(){
                        if(selectedDesignationFlag == 5){
                            var filter_distributors =   all_distributors.filter(x=> (x.territory_id == $(this).val()));
                            console.log(filter_distributors);
                            $('#distributor_id').empty();
                            $('#distributor_id').append(`<option value="">Select Distributor</option>`);
                            var isSelected  =   "";
                            if(filter_distributors){
                                filter_distributors.forEach(dist => {
                                    isSelected      =   "";
                                    if(selectedDistributor == dist.id){
                                        isSelected  =   "selected";
                                    }
                                    $('#distributor_id').append(`<option value="${dist.id}" ${isSelected}>${dist.distributor_name}</option>`);
                                });
                            }
                            $('#distributor_id').val(selectedDistributor).trigger('change');
                            // if(isSelected == ""){
                            //     $('#submitBtn').attr('disabled',true);
                            //     $('#distributor_alert').html('Distributor is required.');
                            // }  
                        } 
                    });
                    flag=$('#flag').val();
                    function checkIfExist(){
                        var tab         =   flag; //$('#designation').val();
                        var region      =   $('#region_input_id').val();
                        var area        =   $('#area_input_id').val();
                        var territory   =   $('#territory_input_id').val();
                        var emp_id      =   $('#hidden_employee_id').val() ? $('#hidden_employee_id').val() : '';
                        debugger
                        if(tab==1) {
                            http('GET', '/checkIFExist?tab=1&id=' + region+'&emp_id='+ emp_id).then((e) => {
                                if (e && e.employee_id) {
                                    $("#approveModal .approve-modal-text").html(`Region already assigned to <strong>${e.employee_name}</strong>. So, Are you sure you want to over write?`);
                                    $("#approveModal").modal('show');
                                    $('#dissmiss-approve').val('region_input_id');
                                }else{
                                    submitForm();
                                }
                            });
                        }else if(tab==2) {
                            http('GET', '/checkIFExist?tab=2&id=' + area+'&emp_id='+ emp_id).then((e) => {
                                if (e && e.employee_id) {
                                    $("#approveModal .approve-modal-text").html(`Area already assigned to <strong>${e.employee_name}</strong>. So, Are you sure you want to over write?`);
                                    $("#approveModal").modal('show');
                                    $('#dissmiss-approve').val('area_input_id');
                                }else{
                                    submitForm();
                                }
                            });
                        }else if(tab==3) {
                            http('GET', '/checkIFExist?tab=3&id=' + territory+'&emp_id='+ emp_id).then((e) => {
                                debugger;
                                if (e && e.employee_id) {
                                    $("#approveModal .approve-modal-text").html(`Territory already assigned to <strong>${e.employee_name}</strong>. So, Are you sure you want to over write?`)
                                    $("#approveModal").modal('show');
                                    $('#dissmiss-approve').val('territory_input_id');
                                }else{
                                    submitForm();
                                }
                            });
                        }else{
                            submitForm();
                        }
                    }

                    function submitForm(){
                        if(!$('#designation').val() || $.trim($('#designation').val()) == ''){
                            $('#designation').focus();
                            $('#designation_alert').html('Designation is required.');
                        }else if(!$('#first_name').val() || $.trim($('#first_name').val()) == ''){
                            $('#first_name').focus();
                            $('#first_name_alert').html('First name is required.');
                        }else if(!$('#last_name').val() || $.trim($('#last_name').val()) == ''){
                            $('#last_name').focus();
                            $('#last_name_alert').html('Last Name is required.');
                        }else if(!$('#username').val() || $.trim($('#username').val()) == ''){
                            $('#username').focus();
                            $('#username_alert').html('Username is required.');
                        }else if(selectedDesignationFlag == 5 && $('#distributor_id').val() == ""){
                            $('#distributor_id').focus();
                            $('#distributor_alert').html('Distributor is required.');
                            return;
                        }else if((!$('#reporting_to').val() || $.trim($('#reporting_to').val()) == '') && $('#designation option:selected').attr('data-flag') != 4){
                            $('#reporting_to').focus();
                            $('#reporting_to_alert').html('Reporting to is required.');
                            return;
                        }else{
                            $("#form-id").submit();
                        }
                    }
                    
                    $(document).on('change','#designation',function () {
                        var selectedOption          =   $(this).find('option:selected');
                        selectedDesignationFlag     =   selectedOption.attr('data-flag');
                        if(!$(this).val() || $.trim($(this).val()) == ''){
                            $('#designation_alert').html('Designation is required.');
                            $(this).focus();
                        }else{
                            $('#designation_alert').html('');
                        }
                    });
                    $(document).on('change','#distributor_id',function () {
                        if((!$(this).val() || $.trim($(this).val()) == '') && selectedDesignationFlag == 5){
                            console.log('in');
                            $('#submitBtn').attr('disabled',true);
                            $('#distributor_alert').html('Distributor is required.');
                            $(this).focus();
                        }else{
                            console.log('out');
                            $('#submitBtn').attr('disabled',false);
                            $('#distributor_alert').html('');
                        }
                    });

                    $(document).on('input','#first_name',function () {
                        if(!$(this).val() || $.trim($(this).val()) == ''){
                            $('#first_name_alert').html('First name is required.');
                            $(this).focus();
                        }else{
                            $('#first_name_alert').html('');
                        }
                    });

                    $(document).on('input','#last_name',function () {
                        if(!$(this).val() || $.trim($(this).val()) == ''){
                            $('#last_name_alert').html('Last Name is required.');
                            $(this).focus();
                        }else{
                            $('#last_name_alert').html('');
                        }
                    });


                    function checkUsername(value){
                        if(!value || $.trim(value) == ''){
                            $('#username_alert').html('Username is required.');
                            $('#submitBtn').attr('disabled',true);
                        }else{
                            $('#username_alert').html('');
                            $('#submitBtn').attr('disabled',true);
                            http('GET', '/checkUsernameAvailability?text='+value).then((e) => {
                                if(e==0) {
                                    $('#submitBtn').attr('disabled',false);
                                    document.getElementById('username').style.borderColor = '#dddddd';
                                    document.getElementById('username_alert').innerHTML = '';
                                }else {
                                    $('#submitBtn').attr('disabled',true);
                                    document.getElementById('username').style.borderColor = 'red';
                                    document.getElementById('username_alert').innerHTML = 'Not Available!';
                                }
                            });
                        }
                    }

                    function checkEmployeeCode(value){
                        value   =   $.trim(value);
                        if(value != ''){
                            $('#employee_code_alert').html('');
                            $('#submitBtn').attr('disabled',true);
                            http('GET', '/checkEmployeeCode?text='+value+'&emp_id='+($('#hidden_employee_id').val() ? $('#hidden_employee_id').val() : '')).then((e) => {
                                if(e==0) {
                                    $('#submitBtn').attr('disabled',false);
                                    document.getElementById('employee_code').style.borderColor = '#dddddd';
                                    document.getElementById('employee_code_alert').innerHTML = '';
                                }else {
                                    $('#submitBtn').attr('disabled',true);
                                    document.getElementById('employee_code').style.borderColor = 'red';
                                    document.getElementById('employee_code_alert').innerHTML = 'Employee Code already added';
                                }
                            });
                        }
                    }

                    function fetchAreas(value){
                        http('GET', '/getAreasFromRegion?region_id='+value).then((e) => {
                            $('#area_input_id').html(`<option selected value="">Select Area</option>`);
                            if(e){
                                if(e.length>0){
                                    e.forEach(element => {
                                        $('#area_input_id').append(`<option value="${element.area_id}">${element.area_name}</option>`);
                                    });
                                }
                            }
                        });
                    }

                    function fetchTerritories(value){
                        http('GET', '/getTerritoriesFromArea?area_id='+value).then((e) => {
                            $('#territory_input_id').html(`<option selected value="">Select Territory</option>`);
                            if(e){
                                if(e.length>0){
                                    e.forEach(element => {
                                        $('#territory_input_id').append(`<option value="${element.territory_id}">${element.territory_name}</option>`);
                                    });
                                }
                            }
                        });
                    }

                    function fetchCitiesFromProvince(value){
                        http('GET', '/getCitiesFromProvince?province_id='+value).then((e) => {
                            $('#employee_city').html(`<option selected value="">Select City</option>`);
                            if(e){
                                if(e.length>0){
                                    e.forEach(element => {
                                        $('#employee_city').append(`<option value="${element.city_id}">${element.city_name}</option>`);
                                    });
                                }
                            }
                        });
                    }

                    function enableFieldOnDesignation(value){

                        document.getElementById('region_div_id').style.display = 'none';
                        $('#region_input_id').removeAttr('required');

                        document.getElementById('area_div_id').style.display = 'none';
                        $('#area_input_id').removeAttr('required');

                        document.getElementById('territory_div_id').style.display = 'none';
                        $('#territory_input_id').removeAttr('required');

                        flag = 0

                        http('GET', '/getDesignationFlag?designation_id='+value).then((e) => {
                            flag = e;
                            $('#flag').val(flag);

                            if(e) {
                                // Fetch accordingly designation flags
                                if(e==1){
                                    document.getElementById('region_div_id').style.display = 'block';
                                    $('#region_input_id').prop('required',true);
                                }else if(e==2){
                                    document.getElementById('region_div_id').style.display = 'block';
                                    $('#region_input_id').prop('required',true);

                                    document.getElementById('area_div_id').style.display = 'block';
                                    $('#area_input_id').prop('required',true);
                                }else if(e==3 || e==5){
                                    document.getElementById('region_div_id').style.display = 'block';
                                    $('#region_input_id').prop('required',true);

                                    document.getElementById('area_div_id').style.display = 'block';
                                    $('#area_input_id').prop('required',true);

                                    document.getElementById('territory_div_id').style.display = 'block';
                                    $('#territory_input_id').prop('required',true);
                                }

                                //get reporting to dropdown values
                                http('GET', '/getReportingToFromFlag?flag='+flag).then((e) => {
                                    $('#reporting_to').empty();
                                    $('#reporting_to').html(`<option selected value="">Select Reporting To</option>`);
                                    if(e){
                                        if(e.length>0){
                                            e.forEach(element => {
                                                var isSelected  =   "";
                                                if($('#reporting_to_employee_id').val() == element.employee_id){
                                                    isSelected  =   "selected";
                                                }
                                                $('#reporting_to').append(`<option value="${element.employee_id}" ${isSelected}>${element.employee_name}</option>`);
                                            });
                                        }
                                    }
                                });
                            }
                        });




                    }

                    function http(type, url, formData) {
                        var self = this;
                        return new Promise(function(resolve, reject) {
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                url: url,
                                type: type,
                                cache: false,
                                contentType: false,
                                processData: false,
                                data: formData,
                                success: function(e) {
                                    resolve(e);
                                },
                                error: function(err) {
                                    console.log(err);
                                    if (err.status == 422 || err.status == 500) {
                                        self.notification('error', 'Some Error Occured, please try again.');
                                    }
                                }
                            });
                        });
                    }

                </script>
@endsection