@extends('layouts.app', ['path' => 'payroll.structures'])
@section('title', 'Payroll Structures - HRMS')

@section('content')
@can('payroll_structures.read|payroll_structures.create|payroll_structures.update|payroll_structures.delete|payroll_structures.run|payroll_structures.view_assign_employee|payroll_structures.assign_employee')
    <div class="content">
        <div class="d-md-flex d-block align-items-center justify-content-between page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Payroll Structures</h2>
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}"><i class="ti ti-smart-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">Payroll</li>
                        <li class="breadcrumb-item active" aria-current="page">Payroll Structures</li>
                    </ol>
                </nav>
            </div>

            @can('payroll_structures.create')
                <div class="d-flex my-xl-auto right-content align-items-center flex-wrap ">
                    <div class="mb-2">
                        <a href="{{ route('payroll.structures.create') }}" class="btn btn-primary d-flex align-items-center"><i class="ti ti-circle-plus me-2"></i>Add Structure</a>
                    </div>
                </div>
            @endcan

        </div>
        {{-- @include('partials.alerts') --}}
        @include('partials.new_alerts')
        <div id="pay_items_tab" class="payroll-tab active-tab">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between flex-wrap row-gap-3">
                    <h5>Structures List</h5>
                </div>
                <div class="card-body p-0">
                    <div class="custom-datatable-filter table-responsive">
                        <table class="table datatable">
                            <thead class="thead-light">
                                <tr>
                                    <th>Name</th>
                                    {{-- <th>Month</th> --}}
                                    <th>Tax Structure</th>
                                    <th>Status</th>
                                    <th>Last Generated</th>
                                    <th class="no-sort">Actions</th>
                                </tr>
                            </thead>
                            <tbody>

                                {{-- @dd($payrollStructures) --}}
                                @foreach ($payrollStructures as $payrollStructure)
                                <tr>
                                    <td>
                                        <h6 class="fs-14 fw-medium text-gray-9">{{ $payrollStructure['name'] }}</h6>
                                    </td>
                                    {{-- <td>July, 2025</td> --}}
                                    <td>{{ $payrollStructure['tax_structure_name'] }}</td>
                                    <td>
                                         @if($payrollStructure['status'] )
                                            <span class="badge badge-success">
                                                Active
                                            </span>
                                        @else
                                            <span class="badge badge-danger">
												Inactive
											</span>
                                        @endif
                                    </td>
                                    <td class="last_run" data-order="{{ $payrollStructure['last_run'] }}">{{ formatDisplayDateFJGIA($payrollStructure['last_run']) }}</td>
                                    <td>
                                        <div class="action-icon d-inline-flex">
                                            @can('payroll_structures.update')
                                                <a title="Edit" href="{{ route('payroll.structures.edit' , enCryptData(($payrollStructure['id']))) }}"><i class="ti ti-edit"></i></a>
                                            @endcan
                                            @can('payroll_structures.run')
                                                @if($payrollStructure['status'])
                                                    <a class="run-payroll" title="Run Payroll" id="run-payroll-{{ $payrollStructure['id'] }}"
                                                    data-payroll-structure-id="{{ $payrollStructure['id'] }}"
                                                    data-tax_start_date="{{ $payrollStructure['tax_start_date'] }}"
                                                    data-tax_end_date="{{ $payrollStructure['tax_end_date'] }}"
                                                    data-employees="{{ $payrollStructure['employees'] }}"
                                                    ><i class="ti ti-player-play"></i></a>
                                                @endif
                                            @endcan
                                            @can('payroll_structures.view_assign_employee|payroll_structures.assign_employee')
                                                {{-- <a href="{{ route('payroll.structures.assign', enCryptData($payrollStructure['id'])) }}" title="Assign Employees"><i class="ti ti-users"></i></a> --}}
                                                <a href="javascript:void(0)" data-payroll-structure-id-decrypted="{{ $payrollStructure['id'] }}" data-payroll-structure-id="{{enCryptData($payrollStructure['id'])}}" id="assign-employee-type-btn" title="Assign">
                                                    <i class="ti ti-users-plus"></i>
                                                </a>
                                            @endcan
                                            @can('payroll_structures.delete')
                                                <a title="Delete" class="delete-confirm" href="{{ route('payroll.structures.delete' , enCryptData($payrollStructure['id'])) }}" ><i class="ti ti-trash"></i></a>
                                            @endcan

                                            @can('logs.read')
                                                <a type="button" data-bs-toggle="modal" data-bs-target="#tableModal" title="View History" data-subject-type="payroll_structure" data-subject-id="{{ $payrollStructure['id'] }}">
                                                    <i class="ti ti-history"></i>
                                                </a>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @can('payroll_structures.run')
        @include('compaines.payroll.modals.run-payroll-modal')
    @endcan
    @can('payroll_structures.view_assign_employee|payroll_structures.assign_employee')
        @include('compaines.payroll.modals.assign-employee')
    @endcan

@endcan

@endsection
@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <style>

    /* Match Select2 with btn-lg height */
    .select2-container--default .select2-selection--multiple {
        display: flex;
        align-items: center;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin-top: 0;
    }
    .select2-container--default .select2-search--inline .select2-search__field {
        vertical-align: middle;
    }
    </style>
    <style>
        .select2-container--default .select2-selection--multiple {
            min-height: 38px !important;
            padding: 4px 8px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            /* display: flex; */
            align-items: center;
            padding: 0 !important;
        }

        .select2-container--default .select2-selection--multiple .select2-search__field {
            margin-top: 0 !important;
            height: 30px !important;
            line-height: 30px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
            line-height: 30px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            margin-top: 2px !important;
            margin-bottom: 2px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__clear {
            display: none !important;
        }
        .select2-container {
            width: 100% !important;
        }

        .select2-container--default .select2-selection--multiple {
            min-height: 38px !important;
            padding: 4px 8px !important;
            width: 100%;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            align-items: center;
            padding: 0 !important;
            flex-wrap: wrap;
        }

        .select2-container--default .select2-selection--multiple .select2-search__field {
            margin-top: 0 !important;
            height: 30px !important;
            line-height: 30px !important;
            min-width: 100px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
            line-height: 30px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            margin-top: 2px !important;
            margin-bottom: 2px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__clear {
            display: none !important;
        }

        @media (max-width: 768px) {
            .select2-container--default .select2-selection--multiple .select2-selection__choice {
                font-size: 12px;
                padding: 2px 6px;
            }
        }
    </style>


@endpush

@push('scripts')

    <script>
        var payrollProcessingUrl = "{{ route('payroll.processing.store') }}";
        var isDecryptedToken = "{{ session()->has('decrypt_token')? 'true' : 'false' }}";
    </script>

    <script src="{{ asset('assets/js/dev-script/submit-run-payroll.js?v='.config('api.version')) }}"></script>
    <script src="{{ asset('assets/validation/submit-run-payroll.js?v='.config('api.version')) }}"></script>

    <script src="{{ asset('assets/js/dev-script/assign_employee_payroll_structure.js?v=' . config('api.version')) }}"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

@endpush