{{-- resources/views/accounting/payroll/index.blade.php --}}
@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <!-- Breadcrumb -->
    <div class="page-breadcrumb d-flex flex-column flex-sm-row align-items-center justify-content-between mb-3 p-3 bg-primary text-white rounded shadow-sm">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.dashboard') }}" class="text-white">
                        <i class="bx bx-home-alt"></i>
                    </a>
                </li>
                <li class="breadcrumb-item active text-white" aria-current="page">Payroll Runs</li>
            </ol>
        </nav>
        @can('payroll.add')
        <a href="{{ route('payroll.create') }}" class="btn btn-light d-flex align-items-center">
            <i class="bx bx-plus-circle me-2"></i> New Payroll
        </a>
        @endcan
    </div>

    <!-- Payroll Table -->
    @can('payroll.view')
    <div class="card shadow border-0 rounded">
        <div class="card-body p-4">
            <div class="table-responsive">
                <table id="example" class="table table-hover table-striped table-bordered align-middle">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Month</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($payrolls as $key => $pr)
                        <tr>
                            <td class="fw-bold text-center">
                                {{ $key + 1 + ($payrolls->currentPage() - 1) * $payrolls->perPage() }}
                            </td>
                            <td>
    <a href="{{ route('payroll.show', $pr->id) }}" class="text-decoration-none">
        {{ $pr->month }}
    </a>
</td>

                            <td class="text-center">
                                <div class="dropdown">
                                    <a href="#" class="btn btn-light btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                                        <i class="bx bx-dots-vertical-rounded"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        @can('payroll.view')
                                        <li>
                                            <a class="dropdown-item" href="{{ route('payroll.show', $pr->id) }}">
                                                <i class="bx bx-show me-2"></i> View
                                            </a>
                                        </li>
                                        @endcan
                                        @can('payroll.edit')
                                        <li>
                                            <a class="dropdown-item" href="{{ route('payroll.edit', $pr->id) }}">
                                                <i class="bx bx-edit-alt me-2"></i> Edit
                                            </a>
                                        </li>
                                        @endcan
                                        @can('payroll.delete')
                                        <li>
                                            <a class="dropdown-item text-danger delete-payroll" href="{{ route('payroll.destroy', $pr->id) }}">
                                                <i class="bx bx-trash me-2"></i> Delete
                                            </a>
                                        </li>
                                        @endcan
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="mt-3">
                {{ $payrolls->links('vendor.pagination.bootstrap-5') }}
            </div>
        </div>
    </div>
    @endcan
</div>

{{-- SweetAlert2 for delete confirmation --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.delete-payroll').forEach(function(el) {
        el.addEventListener('click', function(e) {
            e.preventDefault();
            const url = this.getAttribute('href');
            Swal.fire({
                title: 'Delete this payroll run?',
                text: "This action cannot be undone!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = url;
                }
            });
        });
    });
});
</script>

@endsection