@extends('companyuser::layouts.master')
@section('title', __('hr::hr.employees.title'))
@section('extra-styles')
<link href="{{url('assets/css/filter.css') }}" rel="stylesheet">
<link href="{{asset('assets/css/custom/modal/style.css') }}" rel="stylesheet">
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
@endsection
@push('extra_scripts')
<script src="{{ asset('assets/js/scripts/modal/components-modal.js') }}" defer></script>
@endpush

@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">@lang('companyuser::sidebar.HR')</a></li>
            <li class="breadcrumb-item active"><a href="#">@lang('hr::hr.employees.title')</a></li>
        </ol>
    </div>
</div>
@endsection

@section('content')
@if (checkAddonAvailability(request()->get('tenant_current_subscription')->id, \Modules\Tenant\Enums\SystemAddonEnum::HR_MODULE))
    <section>
        <div class="container-fluid">
            <div class="col-xs-6 headTitle">
                <h3 class="py-half">@lang('hr::hr.employees.title')</h3>
            </div>
            <div class="headBtns mb-2 mx-1 fixed-btns" style="padding-bottom: 10px;">
                <div class="btn-group pull-right">
                    @can('hr.employees.create')
                    <a class="text-green" href="{{route('company.employees.create', $subdomain)}}" title="@lang('Add')">
                        <span class="icon-Add action-icon"></span>
                    </a>
                    @endcan
                </div>
                @can('purchases.suppliers.export')
                <div class="mb-1">
                    <a class="pull-left" href="{{route('company.employees.excel', ['subdomain' => $subdomain])}}" title="@lang('reports::reports.download_excel')">
                        <span class="icon-Excel action-icon"></span>
                    </a>
                    <a class="pull-left" href="{{route('company.employees.pdf', ['subdomain' => $subdomain])}}" title="@lang('reports::reports.Download_Pdf')">
                        <span class="icon-Pdf action-icon"></span>
                    </a>
                    <a class="pull-left" href="{{route('company.employees.print', ['subdomain' => $subdomain])}}" target="_blank" title="@lang('Print')">
                        <span class="icon-Print action-icon"></span>
                    </a>
                </div>
                @endcan
            </div>
            @include('companyuser::errors.all')
            @include('companyuser::errors.lists')
            <div class="mt-1">
                <button class="btn btn-primary w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    <div class="d-flex justify-content-between">
                        <span>@lang('Filter') </span><i class="fa fa-angle-down"></i>
                    </div>
                </button>
            </div>
            <div class="col mb-2">
                <div class="collapse filter-section-collapse" id="collapseExample">
                    <form action="{{ route('company.employees.index', ['subdomain' => $subdomain]) }}" method="GET" class="form form-horizontal striped-rows form-bordered dev-form-validate" novalidate>
                        @csrf
                    <div class="card card-body mb-0">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-12 w-100-ipad-portrait">
                                            <label for="category">@lang('hr::hr.employees.position')</label>
                                        </div>
                                        <div class="col-md-12  w-100-ipad-portrait mb-1">
                                            <select name="position" id="position" class="w-100 py-1 form-control select2-tag h-45" style="width: 100%;">
                                                @forelse($positions as $key => $position)
                                                    <option @if(request('position') == $key) selected @endif value="{{ $key }}">{{ $position }}</option>
                                                @empty
                                                @endforelse
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-12  w-100-ipad-portrait">
                                            <label for="category">@lang('hr::hr.employees.salary')</label>
                                        </div>
                                        <div class="col-md-6  w-50-ipad-portrait mb-half">
                                            <input type="number" name="salary_from" value="{{ request('salary_from') }}" class="form-control h-45" placeholder="@lang('from')">
                                        </div>
                                        <div class="col-md-6  w-50-ipad-portrait mb-half">
                                            <input type="number" name="salary_to" value="{{ request('salary_to') }}" class="form-control h-45" placeholder="@lang('to')">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-left mt-2">
                            <button type="submit" class="btn btn-info mr-1 mb-1 p-5">
                                <img src="{{asset('assets/images/Done.png') }}" alt="done" width="35px">
                            </button>
                            <button type="reset" id="reset" class="btn btn-warning mb-1 p-5"> <span class="icon-Delete f-32"></span></button>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
            <div>
                <section id="configuration">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="card">
                                <div class="card-block card-dashboard">
                                    <table class="table table-striped table-column dataex-res-configuration @if(app()->getlocale() == 'ar') ar-language-file @endif" style="width:100%;display: inline-table;">
                                        <thead>
                                            <tr>
                                                <th>@lang('hr::hr.employees.name')</th>
                                                <th>@lang('hr::hr.employees.position')</th>
                                                <th>@lang('hr::hr.employees.email')</th>
                                                <th>@lang('hr::hr.employees.cost_account')</th>
                                                <th>@lang('hr::hr.employees.salary')</th>
                                                <th>@lang('Actions')</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($employees as $employee)
                                            <tr>
                                                <td>{{$employee->name}}</td>
                                                <td>{{$employee->position_name}}</td>
                                                <td>{{$employee->email}}</td>
                                                <td>{{$employee->costAccount->name}}</td>
                                                <td>{{$employee->salary}}</td>
                                                <td>
                                                    <a href="{{route('company.employees.show', ['subdomain' => $subdomain, 'employee' => $employee->id])}}" class='btn btni rounded-circle font-small-2 btn-primary btn-xs text-white' data-toggle="tooltip" data-placement="bottom" title="@lang('Show')"><i class="fa fa-eye"></i>
                                                    </a>
                                                    @can('hr.employees.edit')
                                                    <a href="{{route('company.employees.edit', ['subdomain' => $subdomain, 'employee' => $employee->id])}}" class='btn btni rounded-circle font-small-2 btn-info btn-xs btn-edit text-white' data-toggle="tooltip" data-placement="bottom" title="@lang('Edit')"><i class="fa fa-pencil"></i></a>
                                                    @endcan
                                                    @can('hr.employees.delete')
                                                    <a data-url="{{route('company.employees.destroy', ['subdomain' => $subdomain, 'employee' => $employee->id])}}" data-toggle="modal" data-target="#favoritesModal" class="delete-entries" data-toggle="tooltip" data-placement="bottom" title="@lang('Delete')">
                                                        <button class='btn btni rounded-circle font-small-2 btn-danger btn-xs btn-delete text-white' data-toggle="tooltip" data-placement="bottom" title="{{ __('Delete') }}">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </a>
                                                    @endcan
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    <div class="modal fade" id="favoritesModal" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title" id="favoritesModalLabel">@lang('Delete')</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <p>
                                                        @lang('Are You Sure to delete this?')
                                                    </p>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                                    <span class="pull-right">
                                                        <form action="" method="POST" class="form delete-form">
                                                            @csrf
                                                            @method('delete')
                                                            <button type="submit" class="btn btn-primary">@lang('Continue')</button>
                                                        </form>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>
@else
    <div class="col-md-12" style="padding: 8px;margin-bottom:15px">
        @include('companyuser::components.addon-not-available', ['addon' => __('companyuser::addons.hr_module')])
    </div>
@endif
@endsection

@section('extra_scripts')
    <script>
        gtag('event', 'web_human_resources_employees_list');
        console.log('web_human_resources_employees_list event');
    </script>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function() {
            // For A Delete Record Popup
            $(document).on('touchstart click', '.delete-entries', function () {
                var modal = $(this).attr('data-target');
                var url = $(this).attr('data-url');
                $(modal + ' .delete-form').attr("action", url);
            });
            //to reset filter dropdown menus
            $('#reset').click(function(e) {
                e.preventDefault()
                // here we made it val to work in both inputs and dropdown menu
                $('.form-control').val("");
                $('.select2-tag').select2({
                    allowClear: true
                });
                $('.select2-selection__clear').text("");
                // or prop('selectedIndex',0);
            })
        });

    });
</script>
@endsection