@extends('layouts.app')
@section('title', 'Create WISDOM Account')
@section('content')
<div class="container page-content">
    <div class="row page-col pb-3">
        <div class="col-12">
            <h1 class="font-weight-bold typography-4 mb-0">Create WISDOM Account</h1>
        </div>
    </div>
    <form method="POST" action="{{ route('store-wisdom') }}" data-toggle="validator" autocomplete="off">
        @csrf
        <input id="users_data" type="hidden" value="{{ json_encode($superior_users) }}" />
        <input type="hidden" name="id" value="{{ $confirmed_application->id }}">
        <div class="row justify-content-center page-col pb-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h1 class="font-weight-semibold typography-2 mb-0">{{ __('Employment Details') }}</h1>
                    </div>
                    <div class="card-body">
                        <div class="mb-3 row">
                            <div class="col-md-6 col-12">
                                <div class="mb-3 row">
                                    <label for="full_name" class="col-12 col-form-label required-label">
                                        {{ __('Full Name') }}
                                    </label>
                                    <div class="col-12">
                                        <input id="full_name" type="text" class="form-control" name="full_name" value="{{ $confirmed_application->full_name }}" readonly />
                                    </div>
                                </div>
                            </div><!-- Email -->
                            <div class="col-md-6 col-12">
                                <div class="mb-3 row">
                                    <label for="email" class="col-12 col-form-label required-label">
                                        {{ __('Email') }}
                                    </label>
                                    <div class="col-12">
                                        <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autofocus />
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div><!-- Email -->
                            <div class="col-md-6 col-12">
                                <div class="mb-3 row">
                                    <label for="employment_type" class="col-12 col-form-label required-label">
                                        {{ __('Employment Type') }}
                                    </label>
                                    <div class="col-12">
                                        <select class="@error('employment_type') is-invalid @enderror" id="employment_type" name="employment_type">
                                            <option disabled @if( !old('employment_type') ) selected @endif>Please Choose One</option>
                                            @foreach ($employee_types as $employee_type)
                                                <option value="{{ $employee_type }}" @if( old('employment_type') == $employee_type ) selected @endif>{{ $employee_type }}</option>
                                            @endforeach
                                        </select>
                                        @error('employment_type')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div><!-- Employment Type -->
                            <div class="col-md-6 col-12">
                                <div class="mb-3 row">
                                    <label for="job_id" class="col-12 col-form-label required-label">
                                        {{ __('Job Title') }}
                                    </label>
                                    <div class="col-12">
                                        <select class="@error('job_id') is-invalid @enderror" id="job_id" name="job_id">
                                            <option disabled @if( !old('job_id') ) selected @endif>
                                                Please Choose One
                                            </option>
                                            @foreach($new_jobs as $job)
                                                <option value="{{ $job['id'] }}" @if( old('job_id') == $job['id'] ) selected @endif data-department_obj='{{ json_encode($job) }}'>
                                                    {{ $job['job_title'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('job_id')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div><!-- Job Title -->
                            <div class="col-md-6 col-12">
                                <div class="mb-3 row">
                                    <label for="name" class="col-12 col-form-label">
                                        {{ __('Division') }}
                                    </label>
                                    <div class="col-12">
                                        <input id="department" type="text" class="form-control" name="department" value="{{ old('department') }}" readonly />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-3 row">
                                    <label for="manager" class="col-12 col-form-label">
                                        {{ __('Division Head') }}
                                    </label>
                                    <div class="col-12">
                                        <input id="manager" type="text" class="form-control" name="manager" value="{{ old('manager') }}" readonly />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-3 row">
                                    <label for="commencement_date" class="col-12 col-form-label">
                                        {{ __('Commencement Date') }}
                                    </label>
                                    <div class="col-12">
                                        <input id="commencement_date" type="text" class="form-control" name="commencement_date" value="{{ Carbon\Carbon::parse($confirmed_application->commencement_date)->format('d/m/Y') }}" readonly />
                                    </div>
                                </div>
                            </div><!-- Commencement Date -->
                            <div class="col-md-6 col-12">
                                <div class="mb-3 row">
                                    <label for="joined_date" class="col-12 col-form-label required-label">
                                        {{ __('Joined Date') }}
                                    </label>
                                    <div class="col-12">
                                        <input id="joined_date" type="text" class="form-control datepicker_all @error('joined_date') is-invalid @enderror" name="joined_date" value="{{ old('joined_date') }}" placeholder="dd/mm/yyyy" />
                                        @error('joined_date')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div><!-- Joined Date -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center page-col pb-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row justify-content-between align-items-center">
                            <div class="col text-start">
                                <h1 class="typography-2 font-weight-semibold mb-0">{{ __('Superior Info') }}</h1>
                            </div>
                            <div class="col text-end">
                                <a id="add_more_btn" class="btn btn-purple btn-action" role="button">
                                    <i class="fas fa-plus"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="mb-3 row">
                            <div class="col-12">
                                <div id="input_wrapper" class="row">
                                    <div class="col-12">
                                        <div class="mb-3 row align-items-center">
                                            <label for="superior_user_id" class="col-lg-2 col-12 col-form-label">{{ __('Primary Superior') }}</label>
                                            <div class="col-lg-9 col-10">
                                                <select class="@error('superior_user_id') is-invalid @enderror" id="superior_user_id" name="superior_user_id[]">
                                                    <option disabled @if( !old('superior_user_id') ) selected @endif>Please Choose One</option>
                                                    @foreach($superior_users as $index => $superior_user)
                                                        <option value="{{ $superior_user->id }}"  @if( old('superior_user_id') == $superior_user->id ) selected @endif>
                                                            {{ $superior_user->getName() }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('superior_user_id')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- Superior Info -->
        <div class="page-col text-end">
            <input id="user_superior_id" type="hidden" name="user_superior_id" value="[]" />
            <a class="btn btn-black btn-custom" href="{{ route('employee-application-index') }}">Back</a>
            <a class="ms-2 btn btn-purple btn-custom btn-submit" >
                Create
            </a>
        </div>
    </form>
</div>
@endsection
@push('js')
<script type="text/javascript">
    $(document).ready(function(){
        var max_input      = 3; //maximum 3 select boxes allowed
        var current_number = $("#input_wrapper").children().length; //initlal select box count
        //on add input button click
        $("body").on("click", "#add_more_btn", function (e) {
            //max input box allowed
            if( current_number < max_input ) {
                //add selection box
                current_number++; //select box increment
                appendNewRow(current_number); // append new row
                // Delete the remove button if there is 3 select boxes.
                if( current_number == max_input ) {
                    $("#add_more_btn").parent().hide();
                }
            }
            return false;
        });

        $("body").on("click",".removeclass", function(e){ //user click on remove button
            $(this).parent().parent().parent().remove(); //remove select box
            $('.ajax-generate-row').remove();
            current_number--; //decrement select box
            for( $i = current_number; $i > 1; $i-- ){
                appendNewRow($i); // append new row 
            }
            if( current_number < 3 ) {
                $("#add_more_btn").parent().show();
            }
            return false;
        });

        function appendNewRow(running_number){
            var users = $('#users_data').val();
            var html_code = `
                <div class="col-12 ajax-generate-row">
                    <div class="mb-3 row align-items-center">
                        <label for="superior_user_id`+ running_number +`" class="col-lg-2 col-12 col-form-label">
                            {{ __("Superior `+ running_number +`") }}
                        </label> 
                        <div class="col-lg-9 col-10">
                            <select class="form-select" id="superior_user_id`+ running_number +`" name="superior_user_id[]" aria-label="superior_user_id" required>
                                <option disabled @if( !old('superior_user_id') ) selected @endif>Please Choose One</option>
                `;
            if( users ){
                $.each(JSON.parse(users), function(index, user){
                    html_code += `
                                <option value="`+user.id+`">`+user.name+`</option>
                            `;
                });
            }
            html_code += `
                            </select>
                        </div>
                        <div class="col-lg-1 col-2">
                            <a class="btn btn-action btn-danger removeclass" role="button">
                                <i class="far fa-trash-alt"></i>
                            </a>
                        </div>
                    </div>
                </div>
                `;

            $("#input_wrapper").append(html_code).ready(function () {
                $('select').select2({
                    minimumResultsForSearch: -1
                });
            });
        }

        $("body").on("change", 'select[name="superior_user_id[]"]', function(){
            var element_id = ($(this).get(0).id).replace('superior_user_id','');
            var get_superior_id = JSON.parse($('#user_superior_id').val());
            if( element_id == '' ){
                get_superior_id[0] = parseInt($(this).val());
            }else{
                get_superior_id[(parseInt(element_id) - 1)] = parseInt($(this).val());
            }
            $('#user_superior_id').val(JSON.stringify(get_superior_id));
        });

        //When job title is selected; Department details will be shown
        $('#job_id').change(function(){
            var selectedOption = $('#job_id option:selected').data('department_obj');
            $("#department").val(selectedOption.name);
            $("#manager").val(selectedOption.manager);
            if( selectedOption.deparment_id ){
                $.ajax({
                    url: "{{ route('get-superior-users-by-department') }}",
                    type: 'POST',
                    data: {
                        'department_id' : selectedOption.deparment_id,
                        "_token": "{{ csrf_token() }}",
                    },
                    success: function(data, key) {
                        if( key == 'success' ){
                            $('#users_data').val(JSON.stringify(data['success']));
                            $('#superior_user_id').find('option').remove().end().append(`<option disabled @if( !old('superior_user_id') ) selected @endif>Please Choose One</option>`);
                            var current_number = $("#input_wrapper").children().length;
                            for( $i = current_number; $i > 1; $i-- ){   
                                $('#superior_user_id'+$i).find('option').remove().end().append(`<option disabled @if( !old('superior_user_id') ) selected @endif>Please Choose One</option>`);
                            }
                            $.each(data['success'], function(k,v){
                                $('#superior_user_id')
                                    .append('<option value="'+v.id+'">'+v.name+'</option>');
                                for( $i = current_number; $i > 1; $i-- ){
                                    $('#superior_user_id'+$i)
                                        .append('<option value="'+v.id+'">'+v.name+'</option>');
                                }
                            });
                            $('select').select2({
                                minimumResultsForSearch: -1
                            });
                        }
                    }
                });
            }
        });
    });
</script>
@endpush