@extends('layouts.app')
@section('title')
    {{ 'Add Affiliate User' }}
@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) ?? ''}} Add Affiliate Co-worker</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('company.index') }}">Affiliate Companies</a>
                </li>
                @endif
                <li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0);">Add Affiliate Co-worker</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('affiliate-user.store') }}">
                        @csrf
                        <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="{{ old('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="{{ old('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="{{ old('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="{{ old('email') }}"
                                        class="form-control @error('email') is-invalid @enderror">
                                    @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') && empty(request()->company_id))
                                <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>
                            @else
                            <div class="col-lg-5">
                                <div class="mb-3">
                                    <label class="form-label" for="company_name">Company Name<span
                                            style="color:red">*</span></label>
                                    <span style="color:#4d5875" id="exist_company_name">Company</span>    
                                </div>
                                <input type="hidden" name="company_name" value="{{request()->company_id}}">
                            </div>
                            @endif
                            <div class="col-lg-5">
                                <div class="mb-3">
                                    <label class="form-label" for="employee_strength">Employees<span
                                            style="color:red">*</span></label>
                                    <select name="employee_strength"
                                        class="form-control @error('employee_strength') is-invalid @enderror"
                                        id="employee_strength">
                                        <option value="1" selected>1 - 10</option>
                                        <option value="2">11 - 20</option>
                                        <option value="3">21 - 50</option>
                                        <option value="4">51 - 100</option>
                                        <option value="5">101 - 200</option>
                                        <option value="6">201 - 500</option>
                                        <option value="7">501 - 1,000</option>
                                        <option value="8">1,001 - 2,000</option>
                                        <option value="9">2,001 - 5,000</option>
                                        <option value="10">5,001 - 10,000</option>
                                        <option value="11">10,001+</option>
                                    </select>
                                    @error('employee_strength')
                                        <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 custom-label" for="phone_number">Phone number<span
                                            style="color:red">*</span></label>
                                    <input type="text" name="phone_number" id="phone_number"
                                        value="{{ old('phone_number') }}"
                                        class="form-control @error('phone_number') is-invalid @enderror">
                                    <input id="countrycode" type="hidden" name="countrycode" value="1">
                                    <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"
                                        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">Affiliate User 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 Affiliate user Role</option>
                                        <option value="affiliate_admin">Admin</option>
                                        <option value="affiliate_editor">Editor</option>
                                        <option value="affiliate_viewer">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">Create
                                        Affiliate Co-worker</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();
            let company_id = "{{request()->company_id}}";
            console.log(company_id);
            $(document).ready(function() {
                if(!isAdmin){
                    getCompanyName();
                }
                if(company_id){
                    getAffiliateCompanyName(company_id);
                }
                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"));
                    },
                });
                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: (isAdmin) ? true : false,
                            noSpace: true
                        },
                        employee_strength: {
                            required: true,
                        },
                        phone_number: {
                            required: true,
                            digits: true,
                            minlength: 8,
                            maxlength: 12,
                            noSpace: true
                        },
                        country: {
                            required: true,
                        },
                        password: {
                            required: true,
                            minlength: 8,
                        },
                        password_confirmation: {
                            required: true,
                            equalTo: "#password"
                        },
                        terms_conditions: {
                            required: true,
                        },
                        affiliate_user_role:{
                            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."

                        },
                        employee_strength: {
                            required: "Employee strength name is required.",
                        },
                        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.",
                        },
                        password: {
                            required: "Password is required.",
                        },
                        password_confirmation: {
                            required: "Confirm password is required.",
                            equalTo: "Password and confirm password should be same"
                        },
                        terms_conditions: {
                            required: "Please accept terms and conditions.",
                        },
                        affiliate_user_role: {
                            required: "Please select affiliate user role.",
                        }
                    },
                    submitHandler: function(form) {
                        form.submit();
                    }
                });

                $("#cancelBtn").click(function() {
                    if(isAdmin){
                        window.location.href = "{{ route('company.index') }}";
                    }else{
                        window.location.href = "{{ route('affiliate-user.list') }}";
                    }
                });
            
                $("#company_name").select2({
                    placeholder: "Please select company Name",
                    minimumInputLength: 3,
                    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
                            };
                        },
                        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: '{{ \Auth::user()->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');
                            // $("#company_name").prop('disabled', true);
                            $("#exist_company_name").text(data[0].text);
                        }
                    });
                }

                function getAffiliateCompanyName(company_id){
                    $.ajax({
                        url: "{{ route('get-company-name') }}",
                        type: "GET",
                        cache: false,
                        data: {
                            _token: '{{ csrf_token() }}',
                            company_id: 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');
                            // $("#company_name").prop('disabled', true);
                            $("#exist_company_name").text(data[0].text);
                        }
                    });
                }
            });
        </script>
    @endpush
@endsection