@extends('superAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Add Employee
@endsection

@section('styles')
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.16/css/bootstrap-multiselect.min.css" rel="stylesheet" />
@endsection

@section('content')
    <!-- MAIN BODY CONTENT -->
    <div class="top-header">
        <a href="{{ route('superAdmin.employees') }}">
		    <h1 class="link"><img src="{{ asset('assets/images/back-btn.svg') }}" alt=""> Return to Employees</h1>
        </a>
    </div>
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h2>Add New Location Employee
                    </h2>
                </div>
                <div class="card-body">
                    <!-- add Company-->
                    <div class="row">
                    
                        <div class="col-md-6">
                            <form action="{{ route('superAdmin.saveEmployee') }}" method="post" id="addEmp" enctype="multipart/form-data">
                            @csrf
                                <div class="upload admin">
									<label for="profile_image">
										<input type="file" class="d-none" name="profile_image" id="profile_image" onchange="loadProfileImage(event)">
											<img id="output_img" src="{{ asset('assets/images/user.svg') }}" alt="">
										    <img src="{{ asset('assets/images/upload-photo.svg') }}" alt="" class="add">
									</label>
									<p class="label">Upload Employee Image</p>
                                </div>
                                
                                <div class="form-group">
                                    <label for="" class="form-label">First Name</label>
                                    <input type="text" class="form-control" name="first_name" id="first_name" value="{{ old('first_name') }}">
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-label">Last Name</label>
                                    <input type="text" class="form-control" name="last_name" id="last_name" value="{{ old('last_name') }}">
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-label">Email Address</label>
                                    <input type="text" class="form-control" name="email_address" id="email_address" value="{{ old('email_address') }}">
                                </div>

                                <div class="form-group">	
                                    @if(count($companys) > 0)											
                                        <label for="" class="form-label">Company Name</label>
                                        <select name="company_id" id="company_id" class="form-control">
                                            <option value="">Select Company</option>
                                            @foreach ($companys as $company)                                                    
                                                <option value="{{ $company->id }}">{{ $company->company_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('company_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror											
                                    @endif	
								</div>	
                                <div class="form-group">
                                    <label for="" class="form-label">Assign Location(s)</label>
                                    <div class="dropdown custom-dropdown">
                                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span class="dropdown-text"> Select Options</span>
                                        <span class="caret"></span></button>
                                        <ul class="dropdown-menu" id="location_dropdown_menu">
                                            <li><a href="#"><label><input type="checkbox" class="selectall location-dropdown" />
                                                <span class="select-text"> Select</span> All</label></a></li>
                                                <li class="divider"></li>                                                
                                        </ul>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-label">Assign Active Location</label>
                                        <select name="active_location" id="active_location" class="active_location form-control">
                                        <option value="">Select</option>                                            
                                        </select>
                                </div>

                                <div class="form-group">
                                    <button type="button" class="btn btn-primary btn-block" onClick="frmsubmit();">Create</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<!--// MAIN BODY CONTENT -->
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.16/js/bootstrap-multiselect.min.js"></script>


<script>

    var loadProfileImage = function(event) {  
        var output = document.getElementById('output_img');
        output.src = URL.createObjectURL(event.target.files[0]);
        output.onload = function() {
          URL.revokeObjectURL(output.src) // free memory
        }
    };
    $(document).ready(function() {
        $('.locations').multiselect();
    });
    function frmsubmit(){
        //alert("Hello");
        $('#addEmp').submit();
    }
    
    $(document).on("click", ".selectall", function() {       
        if ($(this).is(':checked')) {
          $('.option').prop('checked', true);
          var total = $('input[name="locations[]"]:checked').length;
          $(".dropdown-text").html('(' + total + ') Selected');
          $(".select-text").html(' Deselect');
        } else {
          $('.option').prop('checked', false);
          $(".dropdown-text").html('(0) Selected');
          $(".select-text").html(' Select');
        }
      });

      //$("input[type='checkbox'].justone").change(function () {
      $(document).on('change', "input[type='checkbox'].justone", function() {
        var a = $("input[type='checkbox'].justone");
        if (a.length == a.filter(":checked").length) {
          $('.selectall').prop('checked', true);
          $(".select-text").html(' Deselect');
        }
        else {
          $('.selectall').prop('checked', false);
          $(".select-text").html(' Select');
        }
        var total = $('input[name="locations[]"]:checked').length;
        $(".dropdown-text").html('(' + total + ') Selected');
      });

      $('.location-dropdown').on("click",function () {
            $('.active_location option').attr("disabled", true);
            $("select.active_location option").prop("selected", false).first().prop("selected", true);
            
            $('.location-dropdown').each(function () {
                if($(this).is(':checked')){
                    $('.active_location option[value="'+($(this).val())+'"]').attr("disabled", false);
                }
                
            });
        });

 
    $(document).ready(function() {
        $('#company_id').on('change', function() {
            var company_id = $(this).val();
            console.log(company_id);           
            if (company_id) {               
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{ route('superAdmin.getCompanyLocationForEmployee') }}",                   
                    method: 'post',
                    dataType: 'json',
                    data : {                          
                        company_id : company_id, 
                        _token: $('meta[name="csrf_token"]').attr('content')
                    },
                    success: function (response) {
                        if (response.success === true) {
                            let options = '<option value="">Select</option>';

                            // Loop through each location and build <option>
                            $.each(response.result, function (index, location) {
                            options += `<option value="${location.id}">${location.name}</option>`;
                            });

                            // Replace the contents of #active_location
                            $('#active_location').html(options);

                            // Optionally, enable the dropdown if it was disabled
                            $('#active_location').prop('disabled', false);

                            // ----- MULTI-SELECT LOCATION DROPDOWN -----
                            let listItems = `
                                <li>
                                    <a href="#">
                                        <label>
                                            <input type="checkbox" class="selectall location-dropdown" />
                                            <span class="select-text"> Select All</span>
                                        </label>
                                    </a>
                                </li>
                                <li class="divider"></li>
                            `;

                            $.each(response.result, function (index, location) {
                                listItems += `
                                    <li>
                                        <a class="option-link" href="#">
                                            <label>
                                                <input name="locations[]" type="checkbox" class="option justone location-dropdown" value="${location.id}" />
                                                ${location.name}
                                            </label>
                                        </a>
                                    </li>
                                `;
                            });

                            $('#location_dropdown_menu').html(listItems);

                        } else {
                            // Clear and disable dropdown if no data
                            $('#active_location').html('<option value="">Select</option>').prop('disabled', true);
                            $('#location_dropdown_menu').html('<li><a href="#">No locations found</a></li>');
                        }
                    },
                    error: function (xhr) {
                        alert('Something went wrong. Please try again.');
                        console.error(xhr.responseText);
                    }
                });
            }            
        });
    });

</script>
@endsection