@extends('layouts.app')
@section('title')
    {{ 'Edit Employee' }}
@endsection

@section('content')
    {{-- page spedific style/css --}}
    @push('styles')
        <link href="{{ asset('assets/css/intlTelInput.css') }}" rel="stylesheet">
        <style>
            .form-label {
                display: block !important;
            }

            .iti {
                width: 100%;
            }
        </style>
    @endpush
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <h4 class="page-title">{{ucwords(@$company->name) ?? ''}} Edit Employee</h4>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    @if (Auth::user()->role_id == 1)
                        <a href="{{ route('backend.dashboard') }}">Admin Dashboard</a>
                    @else
                        <a href="{{ route('backend.business.dashboard') }}">Business Dashboard</a>
                    @endif
                </li>
                @if(Auth::user()->role_id == 1)
                <li class="breadcrumb-item">
                    <a href="{{ route('non-affiliate-company.index') }}">Non Affiliate Companies</a>
                </li>
                @endif
                <li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0);">{{ucwords(@$company->name) ?? ''}} Edit Employee</a>
                </li>
            </ol>
        </div>
    </div>
    <!-- breadcrumb -->
    @include('layouts.message')
    <!--Row-->
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <div class="card">
                <div class="card-body">
                    <form method="POST" class="form-horizontal" id="business_register"
                        action="{{ route('employee-user.update') }}">
                        @csrf
                        <input type="hidden" name="id" id="id" value="{{ $data->id }}">
                        <div class="row">
                            <div class="col-lg-1">
                            </div>
                            <div class="col-lg-5">
                                <div class="mb-3">
                                    <label class="form-label" for="first_name">First Name<span
                                            style="color:red">*</span></label>
                                    <input type="text" name="first_name" id="first_name" value="{{ $data->first_name }}"
                                        class="form-control @error('first_name') is-invalid @enderror">
                                    @error('first_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="mb-3">
                                    <label class="form-label" for="last_name">Last Name<span
                                            style="color:red">*</span></label>
                                    <input type="text" name="last_name" id="last_name" value="{{ $data->last_name }}"
                                        class="form-control @error('last_name') is-invalid @enderror">
                                    @error('last_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-1">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-1">
                            </div>
                            <div class="col-lg-5">
                                <div class="mb-3">
                                    <label class="form-label" for="job_title">Job Title<span
                                            style="color:red">*</span></label>
                                    <input type="text" name="job_title" id="job_title" value="{{ $data->job_title }}"
                                        class="form-control @error('job_title') is-invalid @enderror">
                                    @error('job_title')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="mb-3">
                                    <label class="form-label" for="email">Email<span style="color:red">*</span></label>
                                    <input type="email" name="email" id="email" value="{{ $data->email }}"
                                        class="form-control @error('email') is-invalid @enderror" disabled>
                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-1">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-1">
                            </div>
                            @if(Auth::user()->hasRole('admin'))
                            <div class="col-lg-5">
                                <div class="mb-3">
                                    <label class="form-label" for="company_name">Company Name<span
                                            style="color:red">*</span></label>
                                    <select name="company_name"
                                        class="form-control @error('company_name') is-invalid @enderror select2"
                                        id="company_name">
                                    </select>
                                    @error('company_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            @endif
                            <div class="col-lg-1">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-1">
                            </div>
                            <div class="col-lg-5">
                                <div class="mb-3">
                                    <label class="form-label custom-label" for="phone_number">Phone number<span
                                            style="color:red">*</span></label>
                                    <input type="text" name="phone_number"
                                        value="+{{ $data->country_id . $data->phone }}" id="phone_number"
                                        class="form-control @error('phone_number') is-invalid @enderror">
                                    <input id="countrycode" type="hidden" name="countrycode" value="">
                                    <label class="form-label" for="phone_number" generated="true"
                                        class="error"></label>
                                    <label id="phone_number-error" class="error" for="phone_number"></label>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="mb-3">
                                    <label class="form-label" for="country">Country / Region<span
                                            style="color:red">*</span></label>
                                    <input type="country" name="country" id="country" value="{{ $data->country }}"
                                        class="form-control @error('country') is-invalid @enderror">
                                    @error('country')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-1">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-1">
                            </div>
                            <div class="col-lg-5">
                                <div class="mb-3">
                                    <label class="form-label" for="affiliate_user_role">Employee Role<span
                                            style="color:red">*</span></label>
                                    <select name="affiliate_user_role"
                                        class="form-control @error('affiliate_user_role') is-invalid @enderror"
                                        id="affiliate_user_role">
                                        <option value="">Select Employee Role</option>
                                        <option value="business_super_admin" {{ $getRoleName->name == 'business_super_admin' ? 'selected' : '' }}>Business Super Admin</option>
                                        <option value="business_admin" {{ $getRoleName->name == 'business_admin' ? 'selected' : '' }}>Business Admin</option>
                                        <option value="business_editor" {{ $getRoleName->name == 'business_editor' ? 'selected' : '' }}>Business Editor</option>
                                        <option value="business_viewer" {{ $getRoleName->name == 'business_viewer' ? 'selected' : '' }}>Business Viewer</option>
                                    </select>
                                    @error('affiliate_user_role')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="isAdmin" value="{{Auth::user()->hasRole('admin') ? true : false }}">
                        <div class="row">
                            <div class="col-lg-1">
                            </div>
                            <div class="col-lg-11">
                                <div class="mb-3">
                                    <button type="submit" class="btn btn-primary submit" id="submitBtn">Update
                                        Employee</button>
                                    <button type="button" class="btn btn-danger" id="cancelBtn">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--/Row-->
    @push('scripts')
        <script type="text/javascript" src="{{ asset('assets/js/intlTelInput-jquery.js') }}"></script>
        <script type="text/javascript" src="{{ asset('assets/js/intlTelInput.js') }}"></script>
        {{-- form validation --}}
        <script type="text/javascript">
            var shouldSubmitForm = false;
            let isAdmin = $("#isAdmin").val();
            $(document).ready(function() {
                getCompanyName();
                // Assuming $data->phone and $data->country_id hold the desired values
                var phoneNumber = "{{ $data->phone }}";
                var countryId = "{{ $data->country_id }}"; // Assuming countryId represents the selected country code

                var iti = window.intlTelInput(document.querySelector('#phone_number'), {
                    utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js',
                    autoPlaceholder: true,
                });
                var input = $("#phone_number");
                input.intlTelInput({
                    initialCountry: "auto",
                    geoIpLookup: callback => {
                        fetch("https://ipapi.co/json")
                            .then(res => res.json())
                            .then(data => callback(data.country_code))
                            .catch(() => callback("us"));
                    },
                });
                // Set the default value for the countrycode input
                $("#countrycode").val(countryId);
                $("#phone_number").val(phoneNumber);

                input.on("countrychange", function() {
                    $("#countrycode").val($("#phone_number").intlTelInput("getSelectedCountryData").dialCode);

                    var splitCountryName = $("#phone_number").intlTelInput("getSelectedCountryData").name.split(
                        " (");

                    var finalConutry = "";
                    if (splitCountryName.length > 1) {
                        splitCountryName.pop();
                        finalConutry = splitCountryName.join(" ");
                    } else {
                        finalConutry = splitCountryName[0];
                    }
                    $("#country").val(finalConutry);

                });

                /* code for random image background */
                var currentIndex = 1;

                function randomIntFromInterval(min, max) { // min and max included 
                    return Math.floor(Math.random() * (max - min + 1) + min)
                }

                function setNextBackground() {
                    var imageDirectory = 'assets/images/backgrounds/';
                    var randomImage = 'image-' + randomIntFromInterval(1, 25) + '.jpg';
                    console.log(randomImage);
                    $('.dynamic-image-load').css('background-image', "url('" + imageDirectory + randomImage + "')");

                    currentIndex = randomIntFromInterval(1, 25);
                }

                setNextBackground();
                //$(document).on('click', setNextBackground);
                jQuery.validator.addMethod("noSpace", function(value, element) {
                    return value == '' || value.trim().length != 0;
                }, "No space please and don't leave it empty");
                $('#business_register').validate({
                    rules: {
                        first_name: {
                            required: true,
                            noSpace: true
                        },
                        last_name: {
                            required: true,
                            noSpace: true
                        },
                        job_title: {
                            required: true,
                            noSpace: true
                        },
                        email: {
                            required: true,
                        },
                        company_name: {
                            required: true,
                            noSpace: true
                        },
                        phone_number: {
                            required: true,
                            digits: true,
                            minlength: 8,
                            maxlength: 12,
                            noSpace: true
                        },
                        country: {
                            required: true,
                        },
                    },
                    messages: {
                        first_name: {
                            required: "First name is required.",
                        },
                        last_name: {
                            required: "Last name is required.",
                        },
                        job_title: {
                            required: "Job title is required.",
                        },
                        email: {
                            required: "Email is required.",
                            remote: "Please Enter valid domain for email."

                        },
                        company_name: {
                            required: "Company name is required.",
                        },
                        phone_number: {
                            required: "Phone number is required.",
                            minlength: 'Please enter at least 8 digit',
                            maxlength: 'Phone number should not be more than 15 digits'
                        },
                        country: {
                            required: "Country name is required.",
                        },
                    },
                    submitHandler: function(form) {
                        form.submit();
                    }
                });

                $("#cancelBtn").click(function() {
                    if(isAdmin){
                        window.location.href = "{{ route('employee-user.list',['company_id'=>$data->company_id]) }}";
                    }else{
                        window.location.href = "{{ route('employee-user.list') }}";
                    }
                });
                $("#company_name").select2({
                    placeholder: "Please select company Name",
                    tags: true,
                    // tokenSeparators: [",", " "],
                    insertTag: function(data, tag) {
                        // Insert the tag at the end of the results
                        data.push(tag);
                    },
                    ajax: {
                        url: '{{ route('get-company-name') }}',
                        method: "GET",
                        dataType: "json",
                        data: function(params) {
                            return {
                                q: params.term, // search term
                                register: true
                            };
                        },
                        processResults: function(data, params) {
                            console.log(data);
                            return {
                                results: data,
                            };
                        },
                    },
                });
                $("#company_name").on("select2:close", function(e) {
                    var selectedValues = $(this).val();
                    // Get all the options in the dropdown
                    var allOptions = $(this)
                        .find("option[data-select2-tag=true]")
                        .toArray();

                    // Remove the extra tags that are not selected
                    $(allOptions).each(function(index, option) {
                        var optionValue = option.value;
                        if (!selectedValues.includes(optionValue)) {
                            $(option).remove();
                        }
                    });
                });

                function getCompanyName() {
                    $.ajax({
                        url: "{{ route('get-company-name') }}",
                        type: "GET",
                        cache: false,
                        data: {
                            _token: '{{ csrf_token() }}',
                            company_id: '{{ $data->company_id }}'
                        },
                        success: function(data, textStatus, xhr) {
                            var $newOption = $("<option selected='selected'></option>").val(data[0].id)
                                .text(data[0].text)
                            $("#company_name").append($newOption).trigger('change');
                            if(!isAdmin){
                                $("#exist_company_name").text(data[0].text);
                            }
                        }
                    });
                }
            });
        </script>
    @endpush
@endsection
{{-- { id:"elementID", text: "Hello!"} --}}