@extends('app-new')
@push('head-script')
<!-- BEGIN: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
<!-- END: Vendor CSS-->
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/style.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/pages/page-profile.css">
<!-- END: Page CSS-->
@endpush
@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('attendance/admin.employee_mapping')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{{$alias}}/home">{{trans('employee/employee_create.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{{$alias}}/unknown-users">{{trans('attendance/admin.unknown_users')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                        {{trans('attendance/admin.employee_mapping')}}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
{!! Form::model($attendanceLog, ['method' => isset($attendanceLog) && $attendanceLog->id ? 'put' : 'post', 'files' => 'true']) !!}

<section id="multiple-column-form">
    @if (isset($status))
        <!--Closable Alerts start -->
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    <!-- <div class="alert-heading">{{ $status['header'] }}</div> -->
                    <div class="alert-body">
                        @foreach ($status['messages'] as $m)
                            {{$m}}<br>
                        @endforeach
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        </div>
    <!--Closable Alerts end -->
    @endif
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row" style="min-height:350px;">
                        <div class="col-md-12 col-12">
                            <label class="form-label">{{trans('employee/employee.employee')}}</label>
                            <select class="form-control select2" name="employee_id">
                                <option value="">Select Employee</option>
                                @foreach($employees as $employee)
                                    @php
                                        $fatherName = "";
                                        if(isset($employee->father_name) && $employee->father_name!="") {
                                            $fatherName = ", Father's Name - " . $employee->father_name;
                                        }
                                        if(isset($employee->email) && $employee->email!="") {
                                            $fatherName .= ", Email - " . $employee->email;
                                        }
                                    @endphp
                                    <option value="{{$employee->id}}">{{$employee->name}} [{{ucfirst($employee->employee_type)}} - {{$employee->employee_code}} {{$fatherName}}]</option>
                                @endforeach
                            </select>
                            {!! $errors->first('employee_id', '<label class="control-label" for="employee_id">:message</label>')!!}

                        </div>
                    </div> 
                    <div class="row">
                        <div class="col-12 mt-2 d-flex flex-row-reverse">
                            <button type="submit" id="save-form" class="btn btn-success me-1">{{trans('common/common.map')}}</</button>
                        </div>
                    </div>          
                </div>
            </div>
        </div>
    </div>
</section>

{!! Form::close() !!} 
@endsection
@push('footer-script')
<script src="/app-assets/js/scripts/pages/modal-add-new-cc.js"></script>

<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script>
$(window).on('load', function() {
    if (feather) {
        feather.replace({
            width: 14,
            height: 14
        });
    }
})
</script>
<script type="text/javascript">
    var subLocations = $('#sublocation_id').val();

    function getsubLocations(th) {
        var locationId = $('#location_id').val();
        var subLocationId = "";

        var data = {
            location_id: locationId,
            '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/{{$organization->alias}}/location/sub-locations',
            type: 'POST',
            data: data,
            success: function(data) {
                var selectbox = '';
                if (data) {
                    selectbox = '<label for="sub_location_id">Sub Location</label>';
                    selectbox += '<div class="form-label-group"><select name="sublocations[]" class="form-control select2" id="sub_location_id" multiple>';
                    selectbox += '<option>-- Select Sub Locations --</option>';
                    $.each(data, function(i, item) {
                        if (subLocations.includes(i)) {
                            selectbox += '<option value="' + i + '" selected="selected">' + item + '</option>';
                        } else {
                            selectbox += '<option value="' + i + '">' + item + '</option>';
                        }
                    });
                    selectbox += '</select></div>';
                }
                console.log(selectbox);
                $('#blank_sub_location').css('display', 'none');
                $('.sublocations').css('display', 'block');
                $('.sublocations').html(selectbox);
                $("#sub_location_id").select2({
                    multiple: true
                });
            }
        });
    }

    $(document).ready(function() {
        if ($('#location_id').val()) {
            getsubLocations();
        }
    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#image_upload_preview').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#inputFile").change(function() {
        readURL(this);
    });
</script>
@endpush