@extends('companyuser::layouts.master')
@section('title', __('hr::payroll.payroll'))
@section('extra-styles')
<link href="{{asset('assets/css/custom/modal/style.css') }}" rel="stylesheet">
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
<script src="{{ asset('/js/app.js') }}" defer></script>
<style>
    .mlr-12 {
        margin-left: 12px;
        margin-right: 12px;
    }

    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }
</style>
@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">@lang('companyuser::sidebar.HR')</li>
            <li class="breadcrumb-item active"><a href="#">@lang('companyuser::sidebar.Payroll')</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::payroll.payroll')</h3>
            </div>
            <div class="headBtns mb-2 mx-1 fixed-btns">
                <div class="btn-group pull-right">
                    @can('sales.invoices.create')
                    <a class="text-green" href="{{route('company.payroll.create', $subdomain)}}" title="@lang('Add')">
                        <span class="icon-Add action-icon"></span>
                    </a>
                    @endcan
                </div>
            </div>

            @include('companyuser::errors.all')
            @include('companyuser::errors.lists')

            <div class="mt-1">
                <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::payroll.Date')</th>
                                                <th>@lang('hr::payroll.targeted month')</th>
                                                <th>@lang('hr::payroll.created by')</th>
                                                <th>@lang('hr::payroll.total salaries')</th>
                                                <th>@lang('Actions')</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($payrollEntries as $payrollEntry)
                                            <tr>
                                                <td><span class="d-none">{{$payrollEntry->date}}</span>{{ \App\Services\Date::format($payrollEntry->date, 'date') }}</td>
                                                <td>{{$payrollEntry->month . "/" . $payrollEntry->year}}</td>
                                                <td>@if($payrollEntry->created_by == auth()->user()->id) Me @else {{$payrollEntry->user->uname}} @endif</td>
                                                <td>{{ ($payrollEntry->payrollEntryDetails()->sum('salary_amount'))  }}
                                                </td>
                                                <td>
                                                    <a href="{{route('company.payroll.show', ['subdomain' => $subdomain, 'payrollEntry' => $payrollEntry->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.payroll.edit', ['subdomain' => $subdomain, 'payrollEntry' => $payrollEntry->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.payroll.destroy', ['subdomain' => $subdomain, 'payrollEntry' => $payrollEntry->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>
                {{---------------- popup to deleted purchase bill -------------------------------}}
                <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('sales::invoices.delete confirmation message')
                                </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>
    </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_payroll_list');
        console.log('web_human_resources_payroll_list event');
    </script>
{{-- this jquery simulate library to fire native events on selected element instead of
    the normal jquery event (which is not native event) and this to match the vue click event which relies on the native events --}}
<script>
    window.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function() {
            // For A Delete Record Popup
            $(document).on('click', '.delete-entries', function() {
                var modal = $(this).attr('data-target');
                var url = $(this).attr('data-url');
                $(modal + ' .delete-form').attr("action", url);
            });
        });
    });
</script>
@endsection