@extends('companyuser::layouts.master')
@section('title', __('hr::payroll.create_payroll'))
@section('extra-styles')
<link rel="stylesheet" href="{{asset('assets/vendors/css/pickers/daterange/daterangepicker.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendors/css/pickers/datetime/bootstrap-datetimepicker.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendors/css/pickers/pickadate/pickadate.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/plugins/pickers/daterange/daterange.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/custom.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/forms/frames.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/forms/person-details.css') }}">
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
<link href="{{ asset('/assets/css/plugins/input-dropdown/input-dropdown.css') }}" rel="stylesheet">
<script src="{{ asset('/js/app.js') }}" defer></script>
<style>
    .dropdown-toggle::after {
        top: -13px !important;
    }

    .daterangepicker select.yearselect {
        width: fit-content !important;
    }

    .multiselect__single {
        white-space: unset !important;
        word-break: break-all !important;
    }
</style>
@if(app()->getLocale() == 'ar')
<style>
    .daterangepicker .calendar th,
    .daterangepicker .calendar td {
        padding-left: 19px;
        padding-top: 2px;
    }
</style>

@else
<style>
    .daterangepicker .calendar th,
    .daterangepicker .calendar td {
        padding-right: 19px;
        padding-top: 2px;
    }
</style>

@endif
@endsection
@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="{{route('company.payroll.index', $subdomain)}}">@lang('hr::payroll.payroll')</a>
            </li>
            <li class="breadcrumb-item active"><a href="#">@lang('Create')</a>
            </li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<section id="basic-form-layouts" class="form-border add-form-section filter-section-collapse">
    <form action="{{ route('company.payroll.store', $subdomain) }}" method="POST" id="payrollForm" enctype="multipart/form-data" class="add_form">
        @csrf
    <div class="container-fluid">
        <div class="headBtns mx-1 fixed-btns">
            <div class="btn-group pull-right">
                <input type="hidden" name="action" value="" id="action-type">
                <button class="form-submit-button" name="action" style="background-color: transparent;border:none;" type="button" action-value="save" title="{{ __('Save')}}" @if(!isset($currentFiscalYearId)) disabled @endif>
                    <span class="icon-Save action-icon"></span>
                </button>
            </div>
            <div class="mb-1 pull-left">
                <a class="text-green" href="{{ route('company.payroll.index', $subdomain)}}" title="{{__('Back')}}">
                    @if(LaravelLocalization::getCurrentLocale() === 'en')
                    <span class="icon-Previous action-icon back-btnIcon"></span>
                    @else
                    <span class="icon-Next action-icon back-btnIcon"></span>
                    @endif
                </a>

            </div>
        </div>
        @if(!isset($currentFiscalYearId))
        <div class="row">
            <div class="col-md-12  col-xs-12 text-center">
                <div class="alert alert-white settings-alert">
                    @lang('superadmin::Dashboard.Please set your ')&nbsp;
                    <a href="{{route('company.accounting-settings.index', $subdomain)}}">
                        @lang('settings::general_settings.accounting settings') </a>
                    &nbsp;
                    @lang('superadmin::Dashboard.to start adding accounting transactions')
                </div>
            </div>
        </div>
        @endif
        <div class=" match-height">
            <div>
                <div class="card ">
                    <div>
                        @include('companyuser::errors.operation-locked')
                        @include('companyuser::errors.lists')
                        <div class="card-block mt-2">

                            <div class="row mb-2">
                                <div class="col-lg-7">
                                    <div class="row mb-half">
                                        <div class="col-md-3">
                                            <label>@lang('hr::payroll.Date')</label>
                                        </div>
                                        <div class="col-md-9">
                                            <x-date-picker 
                                                mode="single"
                                                name="date"
                                                input-id="date"
                                                :value="old('date')"
                                                input-class="h-45"
                                                :is-invalid="$errors->has('date')"
                                                :defaultToday="true"
                                            />
                                            <input type="hidden" name="current_fiscal_year_id" value="{{ $currentFiscalYearId ?? 0 }}">
                                            <input type="hidden" id="fiscal-year-data" data-fiscal-year="{{$currentFiscalYear ?? null }}">
                                            @error('date')
                                            <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                <p>{{ $message }}</p>
                                            </div>
                                            @enderror
                                            @error('current_fiscal_year_id')
                                            <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                <p>{{ $message }}</p>
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="row mb-half">
                                        <div class="col-md-3">
                                            <label>@lang('hr::payroll.targeted month')</label>
                                        </div>
                                        <div class="col-md-9">
                                            <div class='input-group'>
                                                <input type='text' class="form-control h-45 target_month {{$errors->has('target_month') ? ' is-invalid':''}}" name="targeted_date" id="targeted_date" value="{{old('targeted_date')}}" />
                                                <span class="input-group-addon" style="height: 40px !important;line-height:40px;">
                                                    <span class="fa fa-calendar"></span>
                                                </span>
                                            </div>
                                            @error('targeted_date')
                                            <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                <p>{{ $message }}</p>
                                            </div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="row mb-half" id="paymentAccountDropdown">
                                        <div class="col-md-3">
                                            <label>@lang('sales::invoices.Payment Account')</label>
                                        </div>
                                        <div class="col-md-9">
                                            <select name="payment_account_id" class="w-100 h-45 py-1 form-control payment-account select2-tag @if($errors->has('payment_account_id')) is-invalid @endif" data-current-balance="{{ $paymentAccounts }}" style="width: 100%;">
                                                @forelse($paymentAccountsForDropdown as $key => $paymentAccountForDropdown)
                                                    <option @if(old('payment_account_id') == $key) selected @endif value="{{ $key }}">{{ $paymentAccountForDropdown }}</option>
                                                @empty
                                                @endforelse
                                            </select>
                                            @error('payment_account_id')
                                            <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                <p>{{ $message }}</p>
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-md-12">
                                    <create-payroll-entries-component :description="{{ json_encode(__('hr::payroll.description')) }}" :employee_name="{{ json_encode(__('hr::payroll.employee name')) }}" :salary="{{ json_encode(__('hr::payroll.salary')) }}" :total="{{ json_encode(__('sales::estimates.total_amount')) }}" :clear_all="{{ json_encode(__('sales::estimates.clear_all')) }}" :add_new_line="{{ json_encode(__('sales::estimates.add_new_line')) }}" :lang="{{ json_encode(Lang::locale()) }}" :old="{{ json_encode( (old())? old() : (isset($defaultEntries) ? ['employees' => $defaultEntries]: null)  ) }}" :gross="{{ json_encode(__('sales::estimates.gross')) }}" :employee="{{ json_encode(__('hr::payroll.employee')) }}" :employees="{{ json_encode($employees) }}"></create-payroll-entries-component>
                                    @error('employees.*')
                                    <span class="invalid-feedback text text-danger" role="alert">
                                        <p>{{ $message }}</p>
                                    </span>
                                    @enderror
                                    @error('employees')
                                    <span class="invalid-feedback text text-danger" role="alert">
                                        <p>{{ $message }}</p>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="modal fade" id="confirmationModal" 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('accounting::manual_journal_entries.confirmation_date')</h4>
                                        </div>
                                        <div class="modal-body">
                                            <p>
                                                @lang('accounting::manual_journal_entries.confirmation_date_in_past')
                                            </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">
                                                <button type="button" name="action" action-value="" class="btn btn-primary" id="continue_button">@lang('Continue')</button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</section>
@endsection

@section('extra_scripts')
    <script>
        gtag('event', 'web_human_resources_payroll_create');
        console.log('web_human_resources_payroll_create event');
    </script>
<script src="{{ asset('/assets/js/plugins/input-dropdown/input-dropdown.js') }}" defer></script>
<script>
    // this to prevent month-year date time to cause stack overflow when selecting
    var dateMonthSelectTimes = 1;
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            $('#targeted_date')
                .daterangepicker({
                    singleDatePicker: true,
                    viewMode: "months",
                    minViewMode: "months",
                    minDate: '01/01/1999',
                    maxDate: 'today',
                    showDropdowns: true,
                    locale: {
                        format: 'MM-YYYY'
                    }
                }).on('hide.daterangepicker', function(ev, picker) {
                    if (dateMonthSelectTimes === 1) {
                        dateMonthSelectTimes++;
                        $('.table-condensed tbody tr:nth-child(2) td').click();
                    }
                }).on('show.daterangepicker', function(ev, picker) {
                    dateMonthSelectTimes = 1;
                    $('.table-condensed thead tr:nth-child(2)').hide();
                    $('.table-condensed tbody').hide();
                }).on('showCalendar.daterangepicker', function(ev, picker) {
                    $('.table-condensed thead tr:nth-child(2)').hide();
                    $('.table-condensed tbody').hide();
                });

            $('#continue_button').click(function() {
                //take value from clicked btn
                $('#action-type').val($(this).attr('action-value'));

                const formElement = $('#payrollForm');

                //disabled button
                $(this).prop('disabled', true);

                //submit form
                formElement.submit();
            });

            //adjust submit buttons
            $('.form-submit-button').click(function() {
                //take value from clicked btn
                const action = $(this).attr('action-value');
                $('#action-type').val(action);
                const formElement = $('#payrollForm');

                let date = $('input[name="date"]');
                let payrollDate = date.val();
                let currentFiscalYear = $('#fiscal-year-data').data('fiscal-year');
                if (!currentFiscalYear) {
                    return false;
                }

                payrollDate = payrollDate.split('-').reverse().join('-');
                if (new Date(payrollDate) < new Date(currentFiscalYear)) {
                    // event.preventDefault();
                    let modal = $('#confirmationModal');
                    modal.modal('show');
                    $('#continue_button').attr('action-value', action);
                    return false;
                }

                //disabled button
                document.querySelectorAll('.form-submit-button').forEach(function(item) {
                    $(item).prop('disabled', true);
                });

                //submit form
                formElement.submit();
            });
        })(jQuery);
    });
</script>
<script src="{{url('assets/js/vendors/js/pickers/dateTime/moment-with-locales.min.js')}}" defer></script>
<script src="{{url('assets/js/vendors/js/pickers/dateTime/bootstrap-datetimepicker.min.js')}}" defer></script>
<script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.js')}}" defer></script>
<script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.date.js')}}" defer></script>
<script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.time.js')}}" defer></script>
<script src="{{url('assets/js/vendors/js/pickers/pickadate/legacy.js')}}" defer></script>
<script src="{{url('assets/js/vendors/js/pickers/daterange/daterangepicker.js')}}" defer></script>
<script src="{{ asset('assets/js/custom/daterangepicker.js') }}" defer></script>
<script src="{{url('assets/js/vendors/js/pickers/dateTime/picker-date-time.js')}}" defer></script>
@endsection