@extends('dashboard.layouts.index', ['breadcrumb' => ['main' => 'global.employee_profile','sub' => "global.employee_profile"], 'user_side' => $user])
@section('title')
@endsection

@section('content')

    <div class="page-header flex-5 d-flex col-gap-30 mb-30">
        <a href="{{'employment'}}" class="text-center">
            @lang("global.employment_details")
        </a>
        <a href="{{'finance'}}" class="text-center active-item">
            @lang("global.finance")
        </a>
        <a href="{{'attendance'}}" class="text-center">
            @lang("global.attendance")
        </a>
        <a href="{{'documents'}}" class="text-center">
            @lang("global.documents")
        </a>
        <a href="{{'info'}}" class="text-center">
            @lang("global.details")
        </a>
    </div>

    <div class="row">
        <div class="col-12 mb-30">

            <div class="page-box page-box-9 ">
                <div class="d-flex justify-content-between align-items-center p-30 pb-20 b-bottom mb-30">
                    <span class="font-size-25 text-color-blue">
                       @lang("global.finance")
                    </span>
                </div>
                <div class="p-in-30">
                    <div class="row">
                        <div class="col-6">
                            <div class="page-box page-box-9 mb-30">
                                <div class="page-box">
                                    <div class="b-bottom  p-30 pb-20 font-size-25 text-color-blue">
                                        @lang("global.payment_method")
                                    </div>

                                    <div class="p-30">
                                        <ul class="payment-list">
                                            <li class="text-center {{$finance && $finance->method == \App\Models\User::PAYMENT_METHOD_CASH  ? 'active-payment' : ''}}">Cash</li>
                                            <li class="text-center {{$finance && $finance->method == \App\Models\User::PAYMENT_METHOD_BANK  ? 'active-payment' : ''}}">Bank</li>
                                            <li class="text-center {{$finance && $finance->method == \App\Models\User::PAYMENT_METHOD_TRANSFER  ? 'active-payment' : ''}}">Exchange transfer</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="page-box page-box-9 mb-30">
                                <div class="page-box">
                                    <div class="b-bottom  p-30 pb-20 font-size-25 text-color-blue">
                                        @lang("global.social_security_number")
                                    </div>

                                    <div class="p-30">

                                        @component('dashboard.components._edit_info' , [
                                                  "name" => "num_socialsecurity",
                                                  'model' => 'payroll',
                                                  'place_holder' => __("global.social_security_number"),
                                                  'model_id' => $finance->id,
                                                  "val" => $finance->num_socialsecurity,
                                                  ])
                                        @endcomponent
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="page-box page-box-9 mb-30">
                                <div class="page-box">
                                    <div class="b-bottom  p-30 pb-20 font-size-25 text-color-blue">
                                        @lang("global.iban")
                                    </div>

                                    <div class="p-30">
                                        @component('dashboard.components._edit_info' , [
                                                  "name" => "ipan",
                                                  'model' => 'payroll',
                                                  'place_holder' => __("global.iban"),
                                                  'model_id' => $finance->id,
                                                  "val" => $finance->ipan,
                                                  ])
                                        @endcomponent
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="page-box page-box-9 mb-30">
                                <div class="page-box">
                                    <div class="b-bottom  p-30 pb-20 font-size-25 text-color-blue">
                                        @lang("global.salary")
                                    </div>

                                    <div class="p-30">
                                        @component('dashboard.components._edit_info' , [
                                                  "name" => "amount",
                                                  'model' => 'payroll',
                                                  'place_holder' => __("global.salary"),
                                                  'info' => 'JOD',
                                                  'model_id' => $finance->id,
                                                  "val" => $finance->amount,
                                                  ])
                                        @endcomponent
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="page-box page-box-9 mb-30">
                                <div class="page-box">
                                    <div class="b-bottom  p-30 pb-20 font-size-25 text-color-blue">
                                        @lang("global.tax_details")
                                    </div>
                                    <div class="row">
                                        <div class="col-6" style="padding-inline-end:0 ">
                                            <div class="p-30">
                                                @component('dashboard.components._edit_info' , [
                                                         "name" => "tax_number",
                                                         'model' => 'user_information',
                                                         'model_id' => $user->userinformationOne->id,
                                                         "val" => $user->userinformationOne->tax_number,
                                                         "text" => __("global.tax_number"),
                                                         ])
                                                @endcomponent
                                            </div>
                                        </div>
                                        <div class="col-6" style="padding-inline-start:0 ">
                                            <div class="p-30">
                                                @component('dashboard.components._edit_info' , [
                                                                         "name" => "tax",
                                                                         'model' => 'payroll',
                                                                         'model_id' => $finance->id,
                                                                         "info" => '%',
                                                                         "val" => $finance->tax,
                                                                         "text" => __("global.tax_rate"),
                                                                         ])
                                                @endcomponent
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mh-100 pb-30">
                            <div class="page-box page-box-9 mh-100">
                                <div class="mh-100">
                                    <div class="b-bottom  p-30 pb-20 font-size-25 text-color-blue">
                                        @lang("global.health_insurance")
                                    </div>

                                    <div class="p-30 h-100">

                                        @component('dashboard.components._edit_info' , [
                                                     "name" => "health_insurance",
                                                     'model' => 'payroll',
                                                     'model_id' => $finance->id,
                                                     "info" => 'JOD',
                                                     "val" => $finance->health_insurance,
                                                 ])
                                        @endcomponent
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 mh-100 pb-30">
                            <div class="page-box page-box-9 mh-100">
                                <div class="mh-100">
                                    <div class="b-bottom  p-30 pb-20 font-size-25 text-color-blue">
                                        @lang("global.commission")
                                    </div>

                                    <div class="p-30 h-100">

                                        @component('dashboard.components._edit_info' , [
                                                     "name" => "commission",
                                                     'model' => 'payroll',
                                                     'model_id' => $finance->id,
                                                     "info" => '%',
                                                     "val" => $finance->commission,
                                                 ])
                                        @endcomponent
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="page-box page-box-9 mb-30">
                                <div class="page-box">
                                    <div class="b-bottom  p-30 pb-20 font-size-25 text-color-blue">
                                        @lang("global.allowances")
                                    </div>

                                    <div class="p-30">
                                        <ul class="row">
                                            <li class="d-flex col-6 justify-content-between  text-color-blue font-size-20">
                                                @component('dashboard.components._edit_info' , [
                                               "name" => "transport_allowances",
                                               'model' => 'payroll',
                                               'info' => 'JOD',
                                               'model_id' => $finance->id,
                                               "val" => $finance->transport_allowances,
                                               "text" => __("global.transport_allowances"),
                                               ])
                                                @endcomponent
                                            </li>
                                            <li class="d-flex col-6 justify-content-between text-color-blue font-size-20">
                                                @component('dashboard.components._edit_info' , [
                                                   "name" => "phone_allowances",
                                                   'model' => 'payroll',
                                                  'info' => 'JOD',
                                                   'model_id' => $finance->id,
                                                   "val" => $finance->phone_allowances,
                                                   "text" => __("global.phone_allowances"),
                                                   ])
                                                @endcomponent
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page-box pb-30">
        <div class="d-flex justify-content-between align-items-center p-30 pb-20 b-bottom mb-30">
                        <span class="font-size-25 text-color-blue">
                           @lang("global.salary_history")
                        </span>

            <a class="add-btn" data-toggle="modal" data-target="#add-salary-modal" href="employee/create"> <i
                    class="fa fa-plus"></i> @lang('global.add_salary') </a>
        </div>

        <div class="p-in-30">
            @if($salary && $salary->pay_date)
                <div class="position-relative salary-search-container" style="width: fit-content">
                    <div class="salary-search d-none">
                        <select id="salary-year">
                            @foreach($group_dates as $year => $months)
                                <option {{date('Y', strtotime($salary->pay_date)) != $year ?: 'selected'}} value="{{$year}}">{{$year}}</option>
                            @endforeach
                        </select>

                        @foreach($group_dates as $year => $months)
                            <div  class="months year-{{$year}}  {{date('Y', strtotime($salary->pay_date)) == $year ?: 'd-none'}}">
                                @foreach($months as $key => $month)
                                    <a href="?pay_date={{$year . '-' . $key}}" class="{{date('M', strtotime($salary->pay_date)) != $month || date('Y', strtotime($salary->pay_date)) != $year ?: 'selected'}}">{{$month}}</a>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                    <span id="salary-date" class="cursor-pointer position-relative bg-color-orange font-size-25 mb-30 b-r-5 d-inline-flex align-items-center justify-content-sm-between py-15 p-in-30 text-color-white"
                          style="width: 308px">
                    {{date('M, Y', strtotime($salary->pay_date))}}
                    <div class="svg-fill-white pointer-event-none">
                        <label>
                                 @include('svg-icons.calender-input')
                        </label>
                    </div>

                </span>
                </div>
            @endif

            @include('dashboard.pages.users.employee._salary_info' , ['salary' => $salary])
    </div>
    </div>


    @include('dashboard.pages.users.employee._add_salary_modal', ['finance' => $finance, 'user_id' => $user->id])
    @include('dashboard.pages.users.employee._edit_salary_modal', ['finance' => $finance,'salary' => $salary, 'user_id' => $user->id])
    @if($salary)
        <div class="modal fade" id="salary-note" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-md modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-size-25 text-color-blue" id="title">@lang('global.notes')</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{$salary->note}}
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@push('js')
    <script>
        $('#salary-date').on('click', function(event) {
            event.stopPropagation();
            $('.salary-search').toggleClass('d-none')
        });

        $(document).on('click', function(event) {
            if (!$(event.target).closest('.salary-search-container').length) {
                $('.salary-search').addClass('d-none')
            }
        });

        $('#salary-year').on('change', function () {
            $(`.salary-search .months`).addClass('d-none')
            $(`.salary-search .months.year-${$(this).val()}`).removeClass('d-none')
        })

        var  data = {
            salary : {{$salary ? $salary->id : 0}}
        }

        $('#print-slip').on('click', function () {
            $.ajax({
                type: 'POST',
                url: "/dashboard/users/employee/salaryslip",
                data : data,
                success: function (response) {
                    $('#print').html(response)
                    window.print()

                },

                error: function (error) {
                    console.error('Error:', error);
                }
            })
        })
    </script>
@endpush