@extends('layouts.app_hr')

@section('title', __('hr.vacation_balance_management'))

@section('content')
    <section class="content-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1">
                <li class="breadcrumb-item">
                    <a href="#">{{ __('home.home') }}</a>
                </li><li class="breadcrumb-item">
                    <a href="#">{{ __('hr.attendance') }}</a>
                </li>
                <li class="breadcrumb-item active">{{ __('hr.vacation_balance_management') }}</li>
            </ol>
        </nav>
    </section>

    <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
        <div class="card-widget-separator-wrapper">
            <span class="badge bg-blue-gradient badge-pro ">{{__('report.filters')}}</span>
            <div class="card-body card-widget-separator" >
                <div class="row gy-4 gy-sm-1 ">
                    <div class="col-md-3  form-floating-outline form-floating">
                        <select id="location_id" class="form-control select2">
                            <option value="">{{ __('messages.all') }}</option>
                            @foreach($locations as $location)
                                <option value="{{ $location->id }}">{{ $location->name }}</option>
                            @endforeach
                        </select>
                        <label for="location_id">{{ __('hr.location') }}</label>

                    </div>
                    <div class="col-md-3  form-floating-outline form-floating">
                        <select id="department_id" class="form-control select2">
                            <option value="">{{ __('messages.all') }}</option>
                            @foreach($departments as $department)
                                <option value="{{ $department->id }}">{{ $department->name }}</option>
                            @endforeach
                        </select>
                        <label for="department_id">{{ __('hr.department') }}</label>

                    </div>
                    <div class="col-md-3  form-floating-outline form-floating">
                        <select id="job_id" class="form-control select2">
                            <option value="">{{ __('messages.all') }}</option>
                            @foreach($jobs as $job)
                                <option value="{{ $job->id }}">{{ $job->name }}</option>
                            @endforeach
                        </select>
                        <label for="job_id">{{ __('hr.job') }}</label>

                    </div>
                    <div class="col-md-3  form-floating-outline form-floating">
                        <select id="financial_year" class="form-control select2">
                            <option value="">{{ __('messages.all') }}</option>
                            @foreach($financial_years as $year)
                                <option value="{{ $year->finance_year }}">{{ $year->finance_year }}</option>
                            @endforeach
                        </select>
                        <label for="financial_year">{{ __('hr.financial_year') }}</label>

                    </div>
                </div>
            </div>
        </div>
    </div>


    <section class="content">
        <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">

            <div class="card-body">
                <div class="add-new">
                    <button id="process_vacation_balance" class="btn btn-primary">
                        {{ __('hr.process_vacation_balance') }}
                    </button>
                </div>
                <div class="table-responsive">
                    <table id="vacation_balances_table" class="table">
                        <thead>
                        <tr>
                            <th>{{ __('hr.employee_name') }}</th>
                            <th>{{ __('hr.location') }}</th>
                            <th>{{ __('hr.department') }}</th>
                            <th>{{ __('hr.job') }}</th>
                            <th>{{ __('hr.financial_year') }}</th>
                            <th>{{ __('hr.total_balance') }}</th>
                            <th>{{ __('hr.used_balance') }}</th>
                            <th>{{ __('hr.carried_forward_balance') }}</th>
                        </tr>
                        </thead>
                    </table>
                </div>

                <p class="mt-5">{{__('hr.process_vacation_balance_tooltip')}}</p>
            </div>
        </div>
    </section>
@endsection

@section('javascript')
    <script>
        $(document).ready(function () {
            var table = $('#vacation_balances_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("vacation-balance.index") }}',
                    data: function (d) {
                        d.location_id = $('#location_id').val();
                        d.department_id = $('#department_id').val();
                        d.job_id = $('#job_id').val();
                        d.financial_year = $('#financial_year').val();
                    }
                },
                columns: [
                    {data: 'name', name: 'name'},
                    {data: 'location_name', name: 'location_name'},
                    {data: 'department_name', name: 'department_name'},
                    {data: 'job_name', name: 'job_name'},
                    {data: 'financial_year', name: 'financial_year'},
                    {data: 'total_balance', name: 'total_balance'},
                    {data: 'used_balance', name: 'used_balance'},
                    {data: 'carried_forward_balance', name: 'carried_forward_balance'},
                ]
            });
            table.buttons().container().appendTo( '.add-new' );

            // Apply filters
            $('#location_id, #department_id, #job_id, #financial_year').change(function () {
                table.ajax.reload();
            });
        });
        $(document).on('click', '#process_vacation_balance', function () {
            swal({
                title: "{{ __('hr.confirm_process') }}",
                text: "{{ __('hr.confirm_process_vacation_balance') }}",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willProcess) => {
                if (willProcess) {
                    $.ajax({
                        url: '{{ route("vacation-balance.process") }}',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        beforeSend: function () {
                            __disable_submit_button($('#process_vacation_balance'));
                        },
                        success: function (result) {
                            if (result.success) {
                                toastr.success(result.msg);
                            } else {
                                toastr.error(result.msg);
                            }
                            $('#process_vacation_balance').removeAttr('disabled');
                        },
                        error: function () {
                            toastr.error("{{ __('messages.something_went_wrong') }}");
                            $('#process_vacation_balance').removeAttr('disabled');
                        }
                    });
                }
            });
        });
    </script>

@endsection