@extends('admin.layouts.master')
@section('title', 'Add Employee')
@section('content')

    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <div class="content container-fluid">

            <!-- Page Header -->
            <div class="page-header">
                <div class="row">
                    <div class="col">
                        <h3 class="page-title">Employee</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item active"> @if($data ?? '') Update @else Add @endif Employee</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <div class="row">

                <div class="col-md-12">
                    @include('admin.includes.msg')
                    <div class="card">
                        <div class="card-body">
                            <ul class="nav nav-tabs">
                                <li class="nav-item"><a class="nav-link active" href="#basictab1"
                                                        data-toggle="tab">General</a></li>
                            </ul>
                            <form method="POST" action="{{ route('user.store') }}" enctype="multipart/form-data">
                                {{ csrf_field() }}
                                @if($data ?? '')
                                    <input type="hidden" name="id" value="{{ $data->id }}">
                                @endif
                                <input type="hidden" name="role" value="0">
                                <div class="tab-content">
                                    <div class="tab-pane show active" id="basictab1">
                                        <div class="form-group row">
                                            <label class="col-form-label col-md-2">Name</label>
                                            <div class="col-md-8">
                                                <input id="firstName" class="form-control"
                                                       placeholder="Enter Name" name="name" type="text"
                                                       value="@if($data ?? '') {{ $data->name }} @endif">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label col-md-2">Type</label>
                                            <div class="col-md-8">
                                                <select class="form-control" name="user_type" onchange="getdesc(this.value)">
                                                    <option value="">--choose--</option>
                                                    <option value="2" @if($data ?? '') @if($data->user_type==2) selected @endif @endif>Telecaller</option>
                                                    <option value="4" @if($data ?? '') @if($data->user_type==4) selected @endif @endif>Sales</option>
                                                    <option value="5" @if($data ?? '') @if($data->user_type==5) selected @endif @endif>Promoter</option>
                                                </select>
                                            </div>

                                        </div>

                                        <div class="form-group row">
                                            <label class="col-form-label col-md-2">Designation</label>
                                            <div class="col-md-8">
                                                <select class="form-control" name="designation" id="designation">
                                                    <option value="">--choose--</option>

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

                                        <script>
                                            @if($data ?? '')
                                            getdesc({{$data->user_type}});
                                            @endif
                                            function getdesc(user_type) {
                                                if (user_type == 2) {
                                                    $(".target").hide();
                                                    $("#cstype").show();
                                                    $("#promoter-fields").hide();
                                                    var html = '<option value="">--choose--</option> <option value="Telecaller" @if(isset($data)) @if($data->designation=="Telecaller") selected @endif @endif>Telecaller</option>\n' +
                                                        '                                                    <option value="Manager" @if(isset($data)) @if($data->designation=="Manager") selected @endif @endif>Manager</option>\n' +
                                                        '                                                    <option value="Team Manager" @if(isset($data)) @if($data->designation=="Team Manager") selected @endif @endif>Team Manager</option>';
                                                } else if (user_type == 4) {
                                                    $("#cstype").hide();
                                                    $("#promoter-fields").hide();
                                                    $(".target").show();
                                                    var html = '<option value="">--choose--</option><option value="Area Sales Promoter(ASP)" @if(isset($data)) @if($data->designation=="Area Sales Promoter(ASP)") selected @endif @endif>Area Sales\n' +
                                                        '                                                        Promoter(ASP)\n' +
                                                        '                                                    </option>\n' +
                                                        '                                                    <option value="Territory Sales Officer(TSO)" @if(isset($data)) @if($data->designation=="Territory Sales Officer(TSO)") selected @endif @endif>\n' +
                                                        '                                                        Territory Sales Officer(TSO)\n' +
                                                        '                                                    </option>\n' +
                                                        '                                                    <option value="Field Service Capacitor(FSC)" @if(isset($data)) @if($data->designation=="Field Service Capacitor(FSC)") selected @endif @endif>Field\n' +
                                                        '                                                        Service Capacitor(FSC)\n' +
                                                        '                                                    </option>\n' +
                                                        '                                                    <option value="Area Sales Manager(ASM)" @if(isset($data)) @if($data->designation=="Area Sales Manager(ASM)") selected @endif @endif>Area Sales\n' +
                                                        '                                                        Manager(ASM)\n' +
                                                        '                                                    </option>';
                                                } else if (user_type == 5) {
                                                    $("#cstype").hide();
                                                    $(".target").hide();
                                                    $("#promoter-fields").show();
                                                    var html = '<option value="">--choose--</option><option value="Promotional Team Manager (PTM)" @if(isset($data)) @if($data->designation=="Promotional Team Manager (PTM)") selected @endif @endif>Promotional Team Manager (PTM)</option>\n' +
                                                        '                                                    <option value="Field Promotional Manager (FPM)" @if(isset($data)) @if($data->designation=="Field Promotional Manager (FPM)") selected @endif @endif>Field Promotional Manager (FPM)</option>\n' +
                                                        '                                                    <option value="Territory Promoter Officer (TPO)" @if(isset($data)) @if($data->designation=="Territory Promoter Officer (TPO)") selected @endif @endif>Territory Promoter Officer (TPO)</option>\n' +
                                                        '                                                    <option value="Consumer Offer Promoter (COP)" @if(isset($data)) @if($data->designation=="Consumer Offer Promoter (COP)") selected @endif @endif>Consumer Offer Promoter (COP)</option>';
                                                } else {
                                                    $("#cstype").hide();
                                                    $("#promoter-fields").hide();
                                                    $(".target").show();
                                                    var html = '<option value="">--choose--</option><option value="Area Sales Promoter(ASP)" @if(isset($data)) @if($data->designation=="Area Sales Promoter(ASP)") selected @endif @endif>Area Sales\n' +
                                                        '                                                        Promoter(ASP)\n' +
                                                        '                                                    </option>\n' +
                                                        '                                                    <option value="Territory Sales Officer(TSO)" @if(isset($data)) @if($data->designation=="Territory Sales Officer(TSO)") selected @endif @endif>\n' +
                                                        '                                                        Territory Sales Officer(TSO)\n' +
                                                        '                                                    </option>\n' +
                                                        '                                                    <option value="Field Service Capacitor(FSC)" @if(isset($data)) @if($data->designation=="Field Service Capacitor(FSC)") selected @endif @endif>Field\n' +
                                                        '                                                        Service Capacitor(FSC)\n' +
                                                        '                                                    </option>\n' +
                                                        '                                                    <option value="Area Sales Manager(ASM)" @if(isset($data)) @if($data->designation=="Area Sales Manager(ASM)") selected @endif @endif>Area Sales\n' +
                                                        '                                                        Manager(ASM)\n' +
                                                        '                                                    </option>';
                                                }
                                                $("#designation").html(html);
                                            }
                                        </script>
                                        <div class="form-group row">
                                            <label class="col-form-label col-md-2">Profile Image</label>
                                            <div class="col-md-6">
                                                <input class="form-control imgInp" name="image" type="file">
                                                <span style="color:red; font-style:italic;font-size:15px">Only JPG,png files are acceptable</span></br>
                                                @if(isset($data) && !empty($data->image))
                                                    <div class="image"><img src="{{ '/thumb/'.$data->image }}"
                                                                              class="preview">
                                                        <button type="button" class="btn btn-sm btn-danger"
                                                                onclick="delimg('users','image',{{ $data->id }})">
                                                            Remove
                                                        </button>
                                                    </div> @endif
                                            </div>
                                            <div class="col-md-2">
                                                <img id="image" class="preview"
                                                     src="/admin/assets/img/preview.jpg"/>
                                            </div>

                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label col-md-2">Phone Number</label>
                                            <div class="col-md-8">
                                                <input id="phone" class="form-control"
                                                       placeholder="Enter Phone Number" name="phone" type="text"
                                                       value="@if($data ?? '') {{ $data->phone }} @endif">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label col-md-2">Email Id</label>
                                            <div class="col-md-8">
                                                <input id="email" class="form-control"
                                                       placeholder="Enter Email Id" name="email" type="text"
                                                       value="@if($data ?? '') {{ $data->email }} @endif"  onkeyup="checkemail(this.value)">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label col-md-2">State Name</label>
                                            <div class="col-md-8">
                                                <select id="stateId" class="form-control" name="stateId" onchange="showcity(this.value)">
                                                    <option value="">Select State</option>
                                                    @foreach($state as $s)
                                                        <option value="{{ $s->id }}"
                                                                @if($data ?? '') @if($s->id==$data->stateId) selected @endif  @endif >{{ $s->stateName }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                        </div>
<div class="form-group row" id="city-fields">
                                            <label class="col-form-label col-md-2">City Name</label>
                                            <div class="col-md-8">
                                                @if($data ?? '')
                                                    @php
                                                        $cityIds=json_decode($data->cityId,true);
                                                    @endphp
                                                @endif
                                                <select id="cityId" class="form-control" name="cityId[]" onchange="getlocality(this.value)">
                                                    <option value="">Select City</option>
                                                    @if(!empty($city))
                                                        @foreach($city as $c)
                                                            <option value="{{ $c->id }}"
                                                                    @if($data ?? '' && isset($cityIds) && in_array($c->id, $cityIds)) selected @endif >{{ $c->cityName }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                        <div id="promoter-fields" style="display:none;">
                                            <div class="form-group row">
                                                <label class="col-form-label col-md-2">Promoter City (Single)</label>
                                                <div class="col-md-8">
                                                    <select id="promoterCityId" class="form-control single-city" name="promoterCityId">
                                                        <option value="">Select Single City</option>
                                                        @if(!empty($city))
                                                            @foreach($city as $c)
                                                                <option value="{{ $c->id }}" @if($data ?? '' && isset($cityIds) && in_array($c->id, $cityIds)) selected @endif >{{ $c->cityName }}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                    <small class="text-muted">A promoter can be allocated for only one city.</small>
                                                </div>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="form-group row" id="locality-fields">
                                            <label class="col-form-label col-md-2">Locality Name</label>
                                            <div class="col-md-8">
                                                @php 
                                                    $localityids = [];
                                                    if($data ?? '')
                                                        if($data->localityId){
                                                            $localityids = is_array(json_decode($data->localityId,true)) ? json_decode($data->localityId,true) : [$data->localityId];
                                                        }
                                                @endphp 
                                                <select id="localityId" class="form-control" name="localityId[]" multiple>
                                                    <option value="">Select Locality</option>
                                                    @if($data ?? '')
                                                        @foreach($locality as $l)
                                                            <option value="{{ $l->id }}"
                                                                @if($data ?? '') @if(in_array($l->id, $localityids)) selected @endif @endif>
                                                                {{ $l->locality }}
                                                            </option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group row" id="cstype" style="{{ ($data ?? '' && $data->user_type!=2) || !$data ?? '' ? 'display:none;' : '' }}">
                                            <label class="col-form-label col-md-2">Customer Type</label>
                                            <div class="col-md-8">
                                                @php
                                                    $assign_customer_type = [];
                                                    if(isset($data) && isset($telecoller_assign_customer_type->customer_type)){
                                                        $assign_customer_type = explode(',', $telecoller_assign_customer_type->customer_type);
                                                    }
                                                @endphp
                                                <select id="customerType" class="form-control" name="customer_type[]" multiple>
                                                    <option value="">Select Customer Type</option>
                                                    @foreach($customer_type as $c)
                                                        <option value="{{ $c->id }}"
                                                            @if($data ?? '') @if(in_array($c->id, $assign_customer_type)) selected @endif @endif >{{ $c->typeName }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        @if($data ?? '')
                                            <div>
                                                <input type="checkbox" id="forchk" onclick="showpwd()"> <label for="forchk">I want to change password</label>
                                            </div>
                                        @endif
                                        <div class="form-group row" @if($data ?? '') id="pwd" style="display:none" @endif>
                                            <label class="col-form-label col-md-2">Password</label>
                                            <div class="col-md-8">
                                                <input id="password" class="form-control"
                                                       placeholder="Enter Password" name="password" type="text">
                                            </div>
                                        </div>
                                        <div class="form-group row target" @if($data ?? '') @if($data->user_type==2) style="display: none" @endif @endif>
                                            <label class="col-form-label col-md-2">Customer target</label>
                                            <div class="col-md-8">
                                                <input id="email" class="form-control"
                                                       placeholder="Enter Customer Target" name="customer_target" type="text"
                                                       value="@if($data ?? '') {{ $data->customer_target }} @endif">
                                            </div>
                                        </div>
                                        <div class="form-group row target" @if($data ?? '') @if($data->user_type==2) style="display: none"  @endif @endif>
                                            <label class="col-form-label col-md-2">Sell Target</label>
                                            <div class="col-md-8">
                                                <input id="email" class="form-control"
                                                       placeholder="Enter Sell Target" name="sell_target" type="text"
                                                       value="@if($data ?? '') {{ $data->sell_target }} @endif">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-form-label col-md-4">
                                                <button type="submit" class="btn btn-primary">Submit</button>
                                            </label>
                                        </div>
                                    </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    </div>
    <!-- /Main Wrapper -->

    </div>

    <script>
        function showcity(id) {
            $.post("{{ route('getcity') }}", {"id": id, '_token': "{{ csrf_token() }}"}, function (res) {
                $("#cityId").html(res);
                $("#promoterCityId").html(res);
            });
        }

        function getlocality(id) {
            $.post("{{ route('getlocality') }}", {"id": id, '_token': "{{ csrf_token() }}"}, function (res) {
                $("#localityId").html(res);
            });
        }


        function showpwd() {
            $("#pwd").toggle();
        }
    </script>
    <script>
        $(document).ready(function () {
            $('#publishDate').datepicker({
                dateFormat: 'yy-mm-dd'
            });
        });

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                var id = $(input).attr('name');
                reader.onload = function (e) {
                    $('#' + id).attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]); // convert to base64 string
            }
        }

        $(".imgInp").change(function () {
            readURL(this);
        });
        
    function checkemail(email){
           $.post("checkemail",{"_token":"{{csrf_token()}}","email":email},function(res){
                if(res>0){
                    alert("email Id was already exist");
                    $("#email").val('');
                    $("#email").focus();
                }
            })
        }

        $(document).on('change', '.single-city', function() {
            var selectedCity = $(this).val();
        });

        $('select[name="user_type"]').change(function() {
            var type = $(this).val();
            if (type == 5) {
                $('#promoter-fields').show();
                $('#city-fields').hide();
                $('#locality-fields').hide();
                $('#cstype').hide();
                $('#cityId').prop('required', false);
                $('#promoterCityId').prop('required', true);
            } else if (type == 2) {
                $('#promoter-fields').hide();
                $('#city-fields').show();
                $('#locality-fields').show();
                $('#cstype').show();
                $('#cityId').prop('required', true);
                $('#promoterCityId').prop('required', false);
            } else {
                $('#promoter-fields').hide();
                $('#city-fields').show();
                $('#locality-fields').show();
                $('#cstype').hide();
                $('#cityId').prop('required', true);
                $('#promoterCityId').prop('required', false);
            }
        });

        @if($data ?? '')
            @if($data->user_type == 5)
                $('#promoter-fields').show();
                $('#city-fields').hide();
                $('#locality-fields').hide();
                $('#cstype').hide();
            @elseif($data->user_type == 2)
                $('#cstype').show();
            @endif
        @endif

    </script>
@endsection