@extends('crudbooster::admin_template')
@push('bottom')
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<style>
    .gender{
        margin: 1% !important;
    }
    .panel-heading span {
        font-weight: 800;
        border-bottom: 2px solid #09b0c5;
        padding: 0;
        font-size: 15px;
    }
</style>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script type="text/javascript">
    function generatePassword() {
        var length = 8,
            charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
            retVal = "";
        for (var i = 0, n = charset.length; i < length; ++i) {
            retVal += charset.charAt(Math.floor(Math.random() * n));
        }
        $("#password").val(retVal);
    }

    function usernameFunc() {
        var firstname = $('#first_name').val().toLowerCase();
        var lastname = $('#last_name').val().toLowerCase();
        if (firstname !== "" || lastname !== "") {
            document.getElementById('user_name').value = (firstname + lastname + (Math.floor(Math.random() * 100))).replace(/\s/g, '');
        } else {
            document.getElementById('user_name').value = "";
        }
    }

    $('[name="smtp_check"]').on('change',function() {
        if($('.smtp-area').hasClass('hide')) $('.smtp-area').removeClass('hide')
        else $('.smtp-area').addClass('hide')
    })
</script>
@endpush
@section('content')
    <div class='panel panel-default efit-add-product'>
        <div class='panel-heading eap-box text-bold'><i class="fa fa-user-plus text-success">&nbsp;</i>{{$page_title}}</div>
        <form method='post' class="addUser" action='{{CRUDBooster::mainpath('add-save')}}' enctype="multipart/form-data">
            <div class='panel-body'>
                @csrf
                <div class="panel-group">
                    <div class="personal-information panel panel-default">
                        <div class='panel-heading'><span><i class="fa fa-user text-normal">&nbsp;</i>Personal Information</span></div>
                        <div class="panel-body" style="display: flex;flex-wrap: wrap;">
                            {{-- user type select box --}}
                            <div class="form-group col-sm-6">
                                <label>User Type<span class="text-danger" title="This field is required">*</span></label>
                    
                                <select class="form-control" name="user_type_select" id="user_type_select">
                                    <option value="1">Person</option>
                                    <option value="2">Company</option>
                                    <option value="3">Animal</option>
                                    <option value="4">House</option>
                                    <option value="5">Thing</option>
                                </select>
                            </div>
                            <div class="form-group col-sm-6">
                                <div class="form-group">
                                    <label class="control-label" id="first_name_label">
                                        <span>First Name</span>
                                        <span class="text-danger" title="This field is required">*</span>
                                    </label>
                                <input type="text" class="form-control" placeholder="Enter first name" onchange="usernameFunc()" name="first_name" id="first_name" value="{{ old('first_name') }}">
                                    @if ($errors->has('first_name'))
                                        <span class="invalid feedback"role="alert">
                                            <strong class="text-danger">{{ $errors->first('first_name') }}.</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group col-sm-6">
                                <div class="form-group">
                                    <label class="control-label" id="last_name_label">
                                        <span>Last Name</span>
                                        <span class="text-danger" title="This field is required">*</span>
                                    </label>
                                <input type="text" class="form-control" placeholder="Enter last name" onchange="usernameFunc()" name="last_name" id="last_name" value="{{old('last_name')}}">
                                    @if ($errors->has('last_name'))
                                        <span class="invalid feedback"role="alert">
                                            <strong class="text-danger">{{ $errors->first('last_name') }}.</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group col-sm-6">
                                <div class="form-group">
                                    <label class="control-label" id="dob_label">
                                        <span>Date Of Birth</span>
                                        <span class="text-danger" title="This field is required">*</span>
                                    </label>
                                    <input type="date" id="date" class="form-control" name="gebdatum" value="{{old('gebdatum')}}">
                                    @if ($errors->has('gebdatum'))
                                        <span class="invalid feedback"role="alert">
                                            <strong class="text-danger">{{ $errors->first('gebdatum') }}.</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group col-sm-6">
                                <div class="form-group">
                                    <label class="control-label" id="pob_label">
                                        <span>Place Of Birth</span>
                                        <span class="text-danger" title="This field is required">*</span>
                                    </label>
                                    <input type="text" id="user_location" class="form-control" placeholder="Enter birth place" name="gebort" value="{{old('gebort')}}">
                                    @if ($errors->has('gebort'))
                                        <span class="invalid feedback"role="alert">
                                            <strong class="text-danger">{{ $errors->first('gebort') }}.</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group col-sm-6">
                                <label class="control-label">
                                    <span>User Name</span>
                                    <span class="text-danger" title="This field is required">*</span>
                                </label>
                                <input type="text" title="Enter a valid UserName" placeholder="Enter valid user name" class="form-control" name="user_name"
                                    id="user_name" value="{{old('user_name')}}">
                                <div class="text-danger">
                                    <div class="text-danger">
                                        {{$errors->has("user_name") ? $errors->first("user_name"):""}}
                                    </div>
                                </div>
                                <p class="help-block"></p>
                            </div>

                            <div class="form-group col-sm-6">
                                <label class="control-label">
                                    <span>Email/User</span>
                                    <span class="text-danger" title="This field is required">*</span>
                                </label>
                                <input type="email" title="Enter a valid email" class="form-control" placeholder="Enter a valid email" name="email" id="email" value="{{old('email')}}">
                                @if ($errors->has('email'))
                                    <div class="text-danger">
                                        {{$errors->first("email")}}
                                    </div>
                                @endif
                            </div>

                            <div class="form-group col-sm-6">
                                <label class="control-label">
                                    {{trans('action.gender')}}
                                    <span class="text-danger" title="This field is required">*</span>
                                </label>
                                <input class="form-check-input gender" required {{ old('gender') == '1' ? 'checked' : '' }} type="radio" name="gender"  id="exampleRadios1" value="1">Male
                                <input class="form-check-input gender" required {{ old('gender') == '2' ? 'checked' : '' }} type="radio" name="gender"  id="exampleRadios2" value="2"> Female
                                <input class="form-check-input gender" required {{ old('gender') == '3' ? 'checked' : '' }} type="radio" name="gender"  id="exampleRadios2" value="3"> Other
                                <div class="text-danger">
                                    <div class="text-danger">
                                        {{$errors->has("gender") ? $errors->first("gender"):""}}
                                    </div>
                                </div>
                                <p class="help-block"></p>
                            </div>

                            <div class="form-group col-sm-6">
                                <label class="control-label"><span>Photo</span></label>
                                <input type="file" class="form-control" name="photo">
                                <div class="text-danger">
                                    <div class="text-danger">
                                        {{$errors->has("photo") ? $errors->first("photo"):""}}
                                    </div>
                                </div>
                                <p class="help-block"></p>
                            </div>

                            {{-- <div class="form-group form-inline col-md-6">
                                <label class="control-label"> Max allow Staff</label>
                                <input type="text" class="form-control" name="max_staff" placeholder="0">
                                <div class="text-danger">
                                    {{$errors->has("max_staff") ? $errors->first("max_staff"):""}}
                                </div>
                            </div> --}}
                        </div>
                    </div>

                    <div class="password-section panel panel-default">
                        <div class='panel-heading'><span><i class="fa fa-key text-normal">&nbsp;</i>Password</span></div>
                        <div class="panel-body">
                            <label class="control-label">Password
                                <span class="text-danger" title="This field is required">*</span>
                            </label>
                            <div class="row">
                                <div class="col-sm-9">
                                    <input type="text" required class="form-control" name="password" id="password" value="{{old('password')}}">
                                    @if ($errors->has('password'))
                                        <span class="invalid feedback"role="alert">
                                            <strong class="text-danger">{{ $errors->first('password') }}.</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="col-sm-2">
                                    <input type="button" class="btn btn_password_generate" onclick="generatePassword()"
                                        value="Generate Password">
                                </div>
                            </div>
                            <div class="text-danger"></div>
                        </div>
                    </div>

                    <div class="contact-section panel panel-default">
                        <div class='panel-heading'><span><i class="fa fa-home text-normal">&nbsp;</i>Address & Contact Information</span></div>
                        <div class="panel-body">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label"> Address
                                        {{-- <span class="text-danger" title="This field is required">*</span> --}}
                                    </label>
                                    <input type="text" class="form-control" name="address" value="{{old('address')}}">
                                    <div class="text-danger">
                                        {{$errors->has("address") ? $errors->first("address"):""}}
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label"> Place of recidance
                                        {{-- <span class="text-danger" title="This field is required">*</span> --}}
                                    </label>
                                    <input type="text" class="form-control" name="village" value="{{old('village')}}">
                                    <div class="text-danger">
                                        {{$errors->has("street") ? $errors->first("street"):""}}
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label"> Post Code
                                        {{-- <span class="text-danger" title="This field is required">*</span> --}}
                                    </label>
                                    <input type="text" class="form-control" name="post_code" value="{{old('post_code')}}">
                                    <div class="text-danger">
                                        {{$errors->has("post_code") ? $errors->first("post_code"):""}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="user-setting-section panel panel-default">
                        <div class='panel-heading'><span><i class="fa fa-cog text-normal">&nbsp;</i>User Setting</span></div>
                        <div class="panel-body">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="form-group">
                                        <label class="control-label">language</label>
                                        <select name="lang_code" class="form-control" id="">
                                            <option disabled selected> Select Country</option>
                                            @foreach ($languages as $lang )
                                            <option value="{{$lang->id}}" {{($user->language->id==$lang->id)? "selected" :""}}>
                                                {{$lang->name}}
                                            </option>
                                            @endforeach

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

                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label"> E-Mail for Remote Treatment </label>
                                    <input type="email" class="form-control" name="cron_email" id="cron_email">
                                    <div class="text-danger"></div>
                                    <p class="help-block"></p>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="" class="control-label">Online Status</label>
                                    <input type="checkbox" name="user_status" {{ old('user_status') == 'Offline' ? 'checked' : '' }} checked data-toggle="toggle" data-on="Active" data-off="Offline" data-onstyle="primary" data-offstyle="danger">
                                    <div class="text-danger"></div>
                                    <p class="help-block"></p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="smtp-setting-section panel panel-default">
                        <div class='panel-heading'><span><i class="fa fa-envelope-o text-normal">&nbsp;</i>SMTP Data if Therapist Remote Treatment</span></div>
                        <div class="panel-body">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="control-label"> Default Setting Applied </label>
                                    <input type="checkbox" name="smtp_check" {{ old('smtp_check') == 'Offline' ? 'checked' : '' }} data-toggle="toggle" data-on="Default" data-off="Custome" data-onstyle="primary" data-offstyle="danger">
                                    <div class="text-danger"></div>
                                </div>
                            </div>
                            <section class="smtp-area">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label"> Sender E-Mail </label>
                                        <input type="email" class="form-control" name="smtp_email" value="{{old('smtp_email')}}">
                                        <div class="text-danger"></div>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label"> Name </label>
                                        <input type="text" class="form-control" name="smtp_user_name" value="{{old('smtp_user_name')}}" id="smtp_user_name">
                                        <div class="text-danger"></div>
                                        <p class="help-block"></p>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label"> Password </label>
                                        <input type="possword" class="form-control" value="{{old('smtp_password')}}" name="smtp_password">
                                        <div class="text-danger"></div>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label"> Smtp Port </label>
                                        <input type="text" class="form-control" value="{{old('smtp_port')}}" name="smtp_port" id="smtp_port">
                                        <div class="text-danger"></div>
                                        <p class="help-block"></p>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label"> HOST </label>
                                        <input type="text" class="form-control" value="{{old('host')}}" name="smtp_host">
                                        <div class="text-danger"></div>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label"> SSL </label>
                                        <input type="text" class="form-control" name="smtp_ssl" value="{{old('smtp_ssl')}}" id="smtp_ssl">
                                        <div class="text-danger"></div>
                                        <p class="help-block"></p>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="from-inline">
                                        <div class="form-group">
                                            <label class="sr-only" for="status">Active:</label>
                                            <input type="checkbox" name="status" {{ old('status') == 'Offline' ? 'checked' : '' }} checked data-toggle="toggle" data-on="Active" data-off="Deactive" data-onstyle="primary" data-offstyle="danger">
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
            <div class='panel-footer'>
                <a href="{{ CRUDBooster::mainpath() }}" class="btn btn-default"><i class="fa fa-chevron-circle-left"></i>
                    Back</a>
                <input type='submit' class='btn btn-primary' id="savebtn" value='Save changes' />
            </div>
        </form>
    </div>
 @endsection

 <script src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
 <script>
    $(document).ready(function(){
        changeHeadingsLabel();

        $("#user_type_select").change(function () {
            changeHeadingsLabel();
        })

        function changeHeadingsLabel() {
            const selectedUserType = $("#user_type_select option:selected").val();
            
            switch (selectedUserType) {
                case "1":
                    $("#first_name_label span").first().text("First Name");
                    $("#first_name").attr("placeholder", "Enter first name");
                    $("#last_name_label span").first().text("Last Name");
                    $("#last_name").attr("placeholder", "Enter last name");
                    $("#dob_label span").first().text("Date Of Birth");
                    $("#pob_label span").first().text("Place Of Birth");
                    $("#user_location").attr("placeholder", "Enter birth place");
                    break;
                
                case "2":
                    $("#first_name_label span").first().text("Company Type");
                    $("#first_name").attr("placeholder", "Enter company type");
                    $("#last_name_label span").first().text("Company Name");
                    $("#last_name").attr("placeholder", "Enter company name");
                    $("#dob_label span").first().text("Establishment Date");
                    $("#pob_label span").first().text("Place of Foundation");
                    $("#user_location").attr("placeholder", "Enter foundation place");
                    break;

                case "3":
                    $("#first_name_label span").first().text("Animal Type");
                    $("#first_name").attr("placeholder", "Enter animal type");
                    $("#last_name_label span").first().text("Animal Name");
                    $("#last_name").attr("placeholder", "Enter animal name");
                    $("#dob_label span").first().text("Birthday");
                    $("#pob_label span").first().text("Village of Birth");
                    $("#user_location").attr("placeholder", "Enter village");
                    break;

                case "4":
                    $("#first_name_label span").first().text("House Type");
                    $("#first_name").attr("placeholder", "Enter house type");
                    $("#last_name_label span").first().text("House Name");
                    $("#last_name").attr("placeholder", "Enter house name");
                    $("#dob_label span").first().text("Construction date");
                    $("#pob_label span").first().text("Location");
                    $("#user_location").attr("placeholder", "Enter location");
                    break;

                case "5":
                    $("#first_name_label span").first().text("Object");
                    $("#first_name").attr("placeholder", "Enter Object");
                    $("#last_name_label span").first().text("Name");
                    $("#last_name").attr("placeholder", "Enter Name");
                    $("#dob_label span").first().text("Date Of Birth");
                    $("#pob_label span").first().text("Place Of Birth");
                    $("#user_location").attr("placeholder", "Enter birth place");
                    break;
            }
        }

        // check required fileds
        $('.addUser').submit(function(event){
            const hasEmptyFiled = checkRequiredFileds();

            if (hasEmptyFiled) {
                event.preventDefault();
            }
        });

        function checkRequiredFileds() {
            const firstNameVal = $("#first_name");
            const lastNamaeVal = $("#last_name");
            const allDatesVal = $("#date");
            const placeVal = $("#user_location");
            const userEmailVal = $("#email");
           
            const condition = (firstNameVal.val() === "") || (lastNamaeVal.val() === "") || (allDatesVal.val() === "") || (placeVal.val() === "") || (userEmailVal.val() === "");

            if (condition) {
                isInputsEmpty(firstNameVal, "This field is required.");
                isInputsEmpty(lastNamaeVal, "This field is required.");
                isInputsEmpty(allDatesVal, "This field is required.");
                isInputsEmpty(placeVal, "This field is required.");
                isInputsEmpty(userEmailVal, "This field is required.");

                return true;
            }

            return false;
        }

        // is required fileds empty
        function isInputsEmpty(selector, errMsg) {
            const inputValue = selector.val();
            
            if (inputValue == "") {
                $(selector).siblings().size() > 1 ? "" : $(`<strong class="cus-err-msg text-danger">${errMsg}</strong>`).insertAfter($(selector));
                $(selector).addClass("error");
            } else{
                $(selector).next().remove();
                $(selector).removeClass("error");
            }
        }
    });
</script>