@extends('locationAdmin.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('locationAdmin.employeeList') }}">
		    <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('locationAdmin.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">
                                    <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">
                                            <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>
                                                @foreach($locationDetails as $location)
                                                    <li><a class="option-link" href="#"><label>
                                                        <input name='locations[]' type="checkbox" class="option justone location-dropdown"  value="{{$location['location_id']}}"/> {{$location['location_name']}}</label></a>
                                                    </li>
                                                @endforeach
                                        </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>
                                            @foreach($locationDetails as $location)
                                                <option value="{{$location['location_id']}}" disabled>{{$location['location_name']}}</option>
                                            @endforeach
                                        </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(){
        $('#addEmp').submit();
    }

    $('.selectall').click(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 () {
        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);
                }
                
            });
        });

 
</script>
@endsection