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

@section('content')
@can('payroll_sheet.read|payroll_sheet.export_data|payroll_sheet.download_payslips|payroll_sheet.download_single_payslip')

    <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 Processing Sheets</h2>
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="#"><i class="ti ti-smart-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#">Payroll</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Payroll Processing Sheets</li>
                    </ol>
                </nav>
            </div>
            @include('partials.new_alerts')
        </div>
        <!-- Statistics Section -->
        <div class="row mt-4" id="statisticsSection">
            @include('compaines.payroll.sheets.stats')
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Payroll Processing Sheets</h5>
                <p class="text-muted mb-0">View and manage payroll processing records</p>
            </div>
            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-12">
                        <h6 class="mb-3">Processing Filters</h6>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="payroll_structure" class="form-label">Payroll Structure</label>
                        <select class="form-select select2" id="payroll_structure" name="payroll_structure">
                            <option value="">Select</option>
                            @if (!empty($filter['pay_structure'][0]))
                                @foreach ($filter['pay_structure'] as $pay_structure)
                                    @if ($pay_structure)
                                        @if (request('payroll_structure') == $pay_structure['id'])
                                            <option value="{{ $pay_structure['id'] }}" selected>{{ $pay_structure['name'] }}
                                            </option>
                                        @else
                                            <option value="{{ $pay_structure['id'] }}">{{ $pay_structure['name'] }}</option>
                                        @endif
                                    @endif
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label for="processing_month" class="form-label">Month</label>
                        <select class="form-select select2" id="processing_month" name="processing_month">
                            <option value="">Select</option>
                            @if (!empty($filter['pay_structure']))
                                @foreach ($filter['month'] as $month)
                                    @if (request('month') == $month)
                                        <option value="{{ $month }}" selected>{{ $month }}</option>
                                    @else
                                        <option value="{{ $month }}">{{ $month }}</option>
                                    @endif
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="processing_year" class="form-label">Year</label>
                        <select class="form-select select2" id="processing_year" name="processing_year">
                            <option value="">Select</option>
                            @if (!empty($filter['pay_structure']))
                                @foreach ($filter['year'] as $year)
                                    @if (request('year') == $year)
                                        <option value="{{ $year }}" selected>{{ $year }}</option>
                                    @else
                                        <option value="{{ $year }}">{{ $year }}</option>
                                    @endif
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="status_filter" class="form-label">Status</label>
                        <select class="form-select select2" id="status_filter" name="status_filter">
                            <option value="">All Status</option>
                            <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                            <option value="failed" {{ request('status') == 'failed' ? 'selected' : '' }}>Failed</option>
                            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <button type="button" class="btn btn-primary" id="applyFilters">
                            <i class="ti ti-filter me-2" id="filter-icon"></i>Apply Filters
                        </button>
                        <button type="button" class="btn btn-outline-secondary ms-2" id="clearFilters">
                            <i class="ti ti-refresh me-2"></i>Clear Filters
                        </button>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover datatable" id="payrollProcessingTable">
                        <thead class="table-light">
                            <tr>
                                <th>Process Name</th>
                                <th>Payroll Structure</th>
                                <th>Month</th>
                                <th>Total Employees</th>
                                <th>Status</th>
                                <th>Created Date</th>
                                <th class="no-sort" width="200">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="payrollProcessingTableBody">
                            @foreach ($payrollProcesses as $payrollProcess)
                                <tr>
                                    <td>{{ $payrollProcess['payroll_name'] }}</td>
                                    <td>{{ $payrollProcess['payroll_structure']['name'] }}</td>
                                    <td data-order="{{ $payrollProcess['payroll_month'] }}">{{ formatDisplayDateFY($payrollProcess['payroll_month']) }}</td>
                                    <td>{{ $payrollProcess['processed_employees'] }}</td>
                                    <td>
                                        @if ($payrollProcess['status'] == 'failed')
                                            <span class="badge badge-danger">{{ ucfirst($payrollProcess['status']) }}</span>
                                        @elseif ($payrollProcess['status'] == 'pending' || $payrollProcess['status'] == 'processing')
                                            <span class="badge badge-warning">Pending</span>
                                        @elseif ($payrollProcess['status'] == 'completed')
                                            <span class="badge badge-success">{{ ucfirst($payrollProcess['status']) }}</span>
                                        @endif
                                    </td>
                                    <td data-order="{{ $payrollProcess['created_at'] }}">{{ formatDisplayDateDMYHIS($payrollProcess['created_at']) }}</td>
                                    <td>
                                        @can('payroll_sheet.read_detail')
                                            @if($payrollProcess['status'] == 'completed')
                                                <a href="{{ route('payroll.processing.show', enCryptData($payrollProcess['id'])) }}"
                                                    class="btn btn-sm btn-outline-primary me-1" title="View Details">
                                                    <i class="ti ti-eye"></i>
                                                </a>
                                            @endif
                                        @endcan
                                        @can('payroll_structures.post_unpost_salary')
                                            @if($payrollProcess['status'] == 'completed')
                                                @php
                                                    $isPost = $payrollProcess['is_post'] ?? false;
                                                    $route = $isPost ? 'payroll.processing.unpost' : 'payroll.processing.post';
                                                    $btnText = $isPost ? 'Unpost' : 'Post';
                                                    $iconClass = $isPost ? 'ti ti-lock-open' : 'ti ti-lock';
                                                    $btnClass = $isPost ? 'btn-outline-warning' : 'btn-outline-success';
                                                @endphp
                                                <a href="{{ route($route, enCryptData($payrollProcess['id'])) }}"
                                                   class="btn btn-sm {{ $btnClass }} me-1"
                                                   title="{{ $btnText }} Payroll">
                                                    <i class="{{ $iconClass }}"></i>
                                                </a>
                                            @endif
                                        @endcan
                                        @can('logs.read')
                                            <button type="button" class="btn btn-sm btn-outline-primary me-1" data-bs-toggle="modal" data-bs-target="#tableModal" data-subject-type="payroll_process" data-subject-id="{{ $payrollProcess['id']  }}" title="View History">
                                                <i class="ti ti-history"></i>
                                            </button>
                                        @endcan
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endcan

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this payroll process? This action cannot be undone.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    {{-- <button type="button" class="btn btn-danger" id="confirmDelete">Delete</button> --}}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        var payrollProcessingUrl = "{{ route('payroll.processing.store') }}";
        var trendData = @json($trendData)
    </script>
    <script src="{{ asset('assets/js/dev-script/payroll-sheets.js') }}"></script>
    <script src="{{ asset('assets/js/dev-script/payroll-sheet-stat-trends.js') }}"></script>
@endpush