@extends('layouts.app')

@section('title', 'Dismissal Management')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Page Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="mb-0 fw-bold text-gray-800">
                        <i class="fas fa-user-slash me-2 text-danger"></i>Dismissal Management
                    </h4>
                    <p class="text-muted mt-1 mb-0">Manage employee dismissal requests and approvals</p>
                </div>
                <a href="{{ route('salary.dismissals.create') }}" class="btn btn-primary rounded-pill px-4">
                    <i class="fas fa-plus me-2"></i>New Dismissal Request
                </a>
            </div>

            <!-- Statistics Cards -->
            <div class="row mb-4">
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-info shadow-sm rounded-3">
                        <div class="inner">
                            <h3>{{ $stats['pending'] ?? 0 }}</h3>
                            <p>Pending Approvals</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <a href="#pending-dismissals" class="small-box-footer stretched-link">
                            View <i class="fas fa-arrow-circle-right ms-1"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-warning shadow-sm rounded-3">
                        <div class="inner">
                            <h3>{{ $stats['approved'] ?? 0 }}</h3>
                            <p>Approved</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <a href="#approved-dismissals" class="small-box-footer stretched-link">
                            View <i class="fas fa-arrow-circle-right ms-1"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-success shadow-sm rounded-3">
                        <div class="inner">
                            <h3>{{ $stats['completed'] ?? 0 }}</h3>
                            <p>Completed</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-check-double"></i>
                        </div>
                        <a href="#completed-dismissals" class="small-box-footer stretched-link">
                            View <i class="fas fa-arrow-circle-right ms-1"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-danger shadow-sm rounded-3">
                        <div class="inner">
                            <h3>{{ $stats['rejected'] ?? 0 }}</h3>
                            <p>Rejected</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-times-circle"></i>
                        </div>
                        <a href="#rejected-dismissals" class="small-box-footer stretched-link">
                            View <i class="fas fa-arrow-circle-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Pending Dismissals Section -->
            <div id="pending-dismissals" class="mt-4">
                <div class="card shadow-sm border-0 rounded-3">
                    <div class="card-header bg-white border-bottom-0 py-3">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <span class="badge bg-warning p-2 rounded-circle">
                                    <i class="fas fa-clock text-white"></i>
                                </span>
                            </div>
                            <div>
                                <h5 class="mb-0 fw-bold">Pending Dismissal Requests</h5>
                                <p class="text-muted small mb-0">Requests awaiting your approval</p>
                            </div>
                            <div class="ms-auto">
                                <span class="badge bg-warning rounded-pill px-3 py-2">
                                    {{ $pendingDismissals->count() }} Pending
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="py-3">Employee</th>
                                        <th class="py-3">Department</th>
                                        <th class="py-3">Request Date</th>
                                        <th class="py-3">Dismissal Type</th>
                                        <th class="py-3">Requested By</th>
                                        <th class="py-3 text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($pendingDismissals as $dismissal)
                                        <tr class="pending-row" data-id="{{ $dismissal->id }}">
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-circle bg-warning bg-opacity-10 me-3">
                                                        <i class="fas fa-user text-warning"></i>
                                                    </div>
                                                    <div>
                                                        <strong class="d-block">{{ $dismissal->employee->name ?? $dismissal->employee->full_name ?? 'N/A' }}</strong>
                                                        <small class="text-muted">ID: {{ $dismissal->employee_id }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="badge bg-light text-dark px-3 py-2 rounded-pill">
                                                    {{ $dismissal->employee->station ?? $dismissal->employee->department ?? 'N/A' }}
                                                </span>
                                            </td>
                                            <td>
                                                <div>
                                                    <i class="far fa-calendar-alt text-muted me-1"></i>
                                                    {{ $dismissal->created_at->format('Y-m-d') }}
                                                </div>
                                                <small class="text-muted">{{ $dismissal->created_at->format('H:i') }}</small>
                                            </td>
                                            <td>
                                                <span class="badge bg-info bg-opacity-10 text-info px-3 py-2 rounded-pill">
                                                    <i class="fas fa-tag me-1"></i>
                                                    {{ ucfirst(str_replace('_', ' ', $dismissal->dismissal_type)) }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-user-circle text-muted me-2"></i>
                                                    {{ $dismissal->requestedBy->name ?? 'System' }}
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex justify-content-center gap-2">
                                                    <button type="button" class="btn btn-sm btn-outline-info view-dismissal" data-id="{{ $dismissal->id }}" title="View Details">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-success approve-dismissal" data-id="{{ $dismissal->id }}" title="Approve">
                                                        <i class="fas fa-check"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-danger reject-dismissal" data-id="{{ $dismissal->id }}" title="Reject">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-5">
                                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                                <p class="text-muted mb-0">No pending dismissal requests</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Approved Dismissals Section -->
            <div id="approved-dismissals" class="mt-4">
                <div class="card shadow-sm border-0 rounded-3">
                    <div class="card-header bg-white border-bottom-0 py-3">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <span class="badge bg-success p-2 rounded-circle">
                                    <i class="fas fa-check-circle text-white"></i>
                                </span>
                            </div>
                            <div>
                                <h5 class="mb-0 fw-bold">Approved Dismissals</h5>
                                <p class="text-muted small mb-0">Approved and ready for processing</p>
                            </div>
                            <div class="ms-auto">
                                <span class="badge bg-success rounded-pill px-3 py-2">
                                    {{ $approvedDismissals->count() }} Approved
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="py-3">Employee</th>
                                        <th class="py-3">Approved By</th>
                                        <th class="py-3">Approved At</th>
                                        <th class="py-3">Comments</th>
                                        <th class="py-3 text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($approvedDismissals as $dismissal)
                                        <tr class="approved-row" data-id="{{ $dismissal->id }}">
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-circle bg-success bg-opacity-10 me-3">
                                                        <i class="fas fa-user-check text-success"></i>
                                                    </div>
                                                    <div>
                                                        <strong class="d-block">{{ $dismissal->employee->name ?? $dismissal->employee->full_name ?? 'N/A' }}</strong>
                                                        <small class="text-muted">ID: {{ $dismissal->employee_id }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-user-check text-success me-2"></i>
                                                    {{ $dismissal->approvedBy->name ?? 'N/A' }}
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <i class="far fa-calendar-check text-success me-1"></i>
                                                    {{ $dismissal->approved_at ? $dismissal->approved_at->format('Y-m-d') : 'N/A' }}
                                                </div>
                                                <small class="text-muted">{{ $dismissal->approved_at ? $dismissal->approved_at->format('H:i') : '' }}</small>
                                            </td>
                                            <td>
                                                <span class="text-muted">
                                                    {{ Str::limit($dismissal->approval_comments, 50) ?? '—' }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="d-flex justify-content-center gap-2">
                                                    <button type="button" class="btn btn-sm btn-outline-info view-dismissal" data-id="{{ $dismissal->id }}" title="View Details">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-primary process-dismissal" data-id="{{ $dismissal->id }}" title="Process Dismissal">
                                                        <i class="fas fa-cogs"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center py-5">
                                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                                <p class="text-muted mb-0">No approved dismissals</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Completed Dismissals Section -->
            <div id="completed-dismissals" class="mt-4">
                <div class="card shadow-sm border-0 rounded-3">
                    <div class="card-header bg-white border-bottom-0 py-3">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <span class="badge bg-secondary p-2 rounded-circle">
                                    <i class="fas fa-check-double text-white"></i>
                                </span>
                            </div>
                            <div>
                                <h5 class="mb-0 fw-bold">Completed Dismissals</h5>
                                <p class="text-muted small mb-0">Recently processed dismissals</p>
                            </div>
                            <div class="ms-auto">
                                <span class="badge bg-secondary rounded-pill px-3 py-2">
                                    Last 50 Records
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="py-3">Employee</th>
                                        <th class="py-3">Processed By</th>
                                        <th class="py-3">Effective Date</th>
                                        <th class="py-3">Settlement Amount</th>
                                        <th class="py-3">Completed At</th>
                                        <th class="py-3 text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($processedDismissals ?? $completedDismissals ?? [] as $dismissal)
                                        <tr class="completed-row" data-id="{{ $dismissal->id }}">
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-circle bg-secondary bg-opacity-10 me-3">
                                                        <i class="fas fa-user-graduate text-secondary"></i>
                                                    </div>
                                                    <div>
                                                        <strong class="d-block">{{ $dismissal->employee->name ?? $dismissal->employee->full_name ?? 'N/A' }}</strong>
                                                        <small class="text-muted">ID: {{ $dismissal->employee_id }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-user-cog text-secondary me-2"></i>
                                                    {{ $dismissal->processedBy->name ?? 'N/A' }}
                                                </div>
                                            </td>
                                            <td>
                                                <i class="far fa-calendar-alt text-muted me-1"></i>
                                                {{ $dismissal->effective_date ? \Carbon\Carbon::parse($dismissal->effective_date)->format('Y-m-d') : 'N/A' }}
                                            </td>
                                            <td>
                                                @if($dismissal->final_settlement_amount)
                                                    <span class="text-success fw-bold">
                                                        ${{ number_format($dismissal->final_settlement_amount, 2) }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div>
                                                    {{ $dismissal->processed_at ? \Carbon\Carbon::parse($dismissal->processed_at)->format('Y-m-d') : 'N/A' }}
                                                </div>
                                                <small class="text-muted">{{ $dismissal->processed_at ? \Carbon\Carbon::parse($dismissal->processed_at)->format('H:i') : '' }}</small>
                                            </td>
                                            <td>
                                                <div class="d-flex justify-content-center gap-2">
                                                    <button type="button" class="btn btn-sm btn-outline-info view-dismissal" data-id="{{ $dismissal->id }}" title="View Details">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-5">
                                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                                <p class="text-muted mb-0">No completed dismissals</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Rejected Dismissals Section -->
            <div id="rejected-dismissals" class="mt-4">
                <div class="card shadow-sm border-0 rounded-3">
                    <div class="card-header bg-white border-bottom-0 py-3">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <span class="badge bg-danger p-2 rounded-circle">
                                    <i class="fas fa-times-circle text-white"></i>
                                </span>
                            </div>
                            <div>
                                <h5 class="mb-0 fw-bold">Rejected Dismissals</h5>
                                <p class="text-muted small mb-0">Recently rejected requests</p>
                            </div>
                            <div class="ms-auto">
                                <span class="badge bg-danger rounded-pill px-3 py-2">
                                    {{ $rejectedDismissals->count() ?? 0 }} Rejected
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="py-3">Employee</th>
                                        <th class="py-3">Rejected By</th>
                                        <th class="py-3">Rejected At</th>
                                        <th class="py-3">Rejection Reason</th>
                                        <th class="py-3 text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($rejectedDismissals ?? [] as $dismissal)
                                        <tr class="rejected-row" data-id="{{ $dismissal->id }}">
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-circle bg-danger bg-opacity-10 me-3">
                                                        <i class="fas fa-user-slash text-danger"></i>
                                                    </div>
                                                    <div>
                                                        <strong class="d-block">{{ $dismissal->employee->name ?? $dismissal->employee->full_name ?? 'N/A' }}</strong>
                                                        <small class="text-muted">ID: {{ $dismissal->employee_id }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-user-times text-danger me-2"></i>
                                                    {{ $dismissal->rejectedBy->name ?? 'N/A' }}
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <i class="far fa-calendar-times text-danger me-1"></i>
                                                    {{ $dismissal->rejected_at ? \Carbon\Carbon::parse($dismissal->rejected_at)->format('Y-m-d') : 'N/A' }}
                                                </div>
                                                <small class="text-muted">{{ $dismissal->rejected_at ? \Carbon\Carbon::parse($dismissal->rejected_at)->format('H:i') : '' }}</small>
                                            </td>
                                            <td>
                                                <span class="text-muted">
                                                    {{ Str::limit($dismissal->rejection_reason, 50) ?? '—' }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="d-flex justify-content-center gap-2">
                                                    <button type="button" class="btn btn-sm btn-outline-info view-dismissal" data-id="{{ $dismissal->id }}" title="View Details">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center py-5">
                                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                                <p class="text-muted mb-0">No rejected dismissals</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include Modals -->
@include('salary.dismissals.partials.modals')
@endsection

@push('styles')
<style>
    /* Small Box Styling */
    .small-box {
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        display: block;
        margin-bottom: 20px;
        position: relative;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .small-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    
    .small-box .inner {
        padding: 15px;
    }
    
    .small-box .inner h3 {
        font-size: 2rem;
        font-weight: bold;
        margin: 0 0 5px 0;
        white-space: nowrap;
        padding: 0;
    }
    
    .small-box .inner p {
        font-size: 1rem;
        margin: 0;
    }
    
    .small-box .icon {
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 3rem;
        opacity: 0.3;
    }
    
    .small-box-footer {
        display: block;
        padding: 8px 0;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.1);
        color: #fff;
        transition: background-color 0.2s;
        text-decoration: none;
    }
    
    .small-box-footer:hover {
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
    }
    
    /* Avatar Circle */
    .avatar-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .bg-opacity-10 {
        --bs-bg-opacity: 0.1;
    }
    
    /* Table Row Hover Effects */
    .table tbody tr {
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    .table tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.02);
    }
    
    .pending-row:hover {
        background-color: rgba(255, 193, 7, 0.05);
    }
    
    .approved-row:hover {
        background-color: rgba(40, 167, 69, 0.05);
    }
    
    .completed-row:hover {
        background-color: rgba(108, 117, 125, 0.05);
    }
    
    .rejected-row:hover {
        background-color: rgba(220, 53, 69, 0.05);
    }
    
    /* Button Styles */
    .btn-outline-info:hover,
    .btn-outline-success:hover,
    .btn-outline-danger:hover,
    .btn-outline-primary:hover {
        transform: translateY(-1px);
    }
    
    .btn {
        transition: all 0.2s;
    }
    
    /* Card Styling */
    .card {
        border-radius: 0.75rem;
    }
    
    .card-header {
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem;
    }
    
    /* Table Styling */
    .table th {
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom-width: 1px;
    }
    
    .table td {
        vertical-align: middle;
        font-size: 0.9rem;
    }
    
    /* Badge Styling */
    .badge {
        font-weight: 500;
    }
    
    /* Smooth Scroll */
    html {
        scroll-behavior: smooth;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .small-box .inner h3 {
            font-size: 1.5rem;
        }
        
        .small-box .icon {
            font-size: 2rem;
        }
        
        .btn-sm {
            padding: 0.25rem 0.5rem;
        }
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    let currentDismissalId = null;
    
    // Make entire row clickable for view details
    $('.pending-row, .approved-row, .completed-row, .rejected-row').click(function(e) {
        // Don't trigger if clicking on action buttons
        if ($(e.target).closest('.btn').length) {
            return;
        }
        const dismissalId = $(this).data('id');
        window.location.href = `/salary/dismissals/${dismissalId}`;
    });
    
    // Initialize all modals
    const approveModal = new bootstrap.Modal(document.getElementById('approveModal'));
    const rejectModal = new bootstrap.Modal(document.getElementById('rejectModal'));
    const processModal = new bootstrap.Modal(document.getElementById('processModal'));
    const dismissalModal = new bootstrap.Modal(document.getElementById('dismissalModal'));
    
    // View Dismissal Details
    $('.view-dismissal').click(function(e) {
        e.stopPropagation(); // Prevent row click
        const dismissalId = $(this).data('id');
        currentDismissalId = dismissalId;
        
        $('#dismissalModalBody').html(`
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2 text-muted">Loading dismissal details...</p>
            </div>
        `);
        
        dismissalModal.show();
        
        $.ajax({
            url: `/salary/dismissals/${dismissalId}`,
            method: 'GET',
            success: function(html) {
                $('#dismissalModalBody').html(html);
            },
            error: function() {
                $('#dismissalModalBody').html(`
                    <div class="alert alert-danger m-3">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Failed to load dismissal details. Please try again.
                    </div>
                `);
            }
        });
    });
    
    // Approve Dismissal
    $('.approve-dismissal').click(function(e) {
        e.stopPropagation(); // Prevent row click
        currentDismissalId = $(this).data('id');
        $('#approveForm')[0].reset();
        approveModal.show();
    });
    
    $('#approveForm').submit(function(e) {
        e.preventDefault();
        const comments = $('#approve_comments').val();
        const submitBtn = $('#approveSubmitBtn');
        
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Processing...');
        
        $.ajax({
            url: `/salary/dismissals/${currentDismissalId}/approve`,
            method: 'POST',
            data: { 
                comments: comments, 
                _token: '{{ csrf_token() }}' 
            },
            success: function(response) {
                if (response.success) {
                    showToast('success', response.message);
                    approveModal.hide();
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showToast('error', response.message);
                    submitBtn.prop('disabled', false).html('<i class="fas fa-check me-1"></i> Confirm Approval');
                }
            },
            error: function(xhr) {
                let errorMsg = 'An error occurred';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                showToast('error', errorMsg);
                submitBtn.prop('disabled', false).html('<i class="fas fa-check me-1"></i> Confirm Approval');
            }
        });
    });
    
    // Reject Dismissal
    $('.reject-dismissal').click(function(e) {
        e.stopPropagation(); // Prevent row click
        currentDismissalId = $(this).data('id');
        $('#rejectForm')[0].reset();
        rejectModal.show();
    });
    
    $('#rejectForm').submit(function(e) {
        e.preventDefault();
        const reason = $('#reject_reason').val();
        
        if (reason.length < 10) {
            showToast('error', 'Rejection reason must be at least 10 characters');
            return;
        }
        
        const submitBtn = $('#rejectSubmitBtn');
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Processing...');
        
        $.ajax({
            url: `/salary/dismissals/${currentDismissalId}/reject`,
            method: 'POST',
            data: { 
                reason: reason, 
                _token: '{{ csrf_token() }}' 
            },
            success: function(response) {
                if (response.success) {
                    showToast('success', response.message);
                    rejectModal.hide();
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showToast('error', response.message);
                    submitBtn.prop('disabled', false).html('<i class="fas fa-thumbs-down me-1"></i> Confirm Rejection');
                }
            },
            error: function(xhr) {
                let errorMsg = 'An error occurred';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                showToast('error', errorMsg);
                submitBtn.prop('disabled', false).html('<i class="fas fa-thumbs-down me-1"></i> Confirm Rejection');
            }
        });
    });
    
    // Process Dismissal
    $('.process-dismissal').click(function(e) {
        e.stopPropagation(); // Prevent row click
        currentDismissalId = $(this).data('id');
        $('#processForm')[0].reset();
        const today = new Date().toISOString().split('T')[0];
        $('#modal_effective_date').val(today);
        processModal.show();
    });
    
    $('#processForm').submit(function(e) {
        e.preventDefault();
        const effectiveDate = $('#modal_effective_date').val();
        const notes = $('#process_notes').val();
        const settlementAmount = $('#settlement_amount').val();
        
        if (!effectiveDate) {
            showToast('error', 'Effective date is required');
            return;
        }
        
        const submitBtn = $('#processSubmitBtn');
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Processing...');
        
        $.ajax({
            url: `/salary/dismissals/${currentDismissalId}/process`,
            method: 'POST',
            data: { 
                effective_date: effectiveDate, 
                notes: notes,
                settlement_amount: settlementAmount,
                _token: '{{ csrf_token() }}' 
            },
            success: function(response) {
                if (response.success) {
                    showToast('success', response.message);
                    processModal.hide();
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showToast('error', response.message);
                    submitBtn.prop('disabled', false).html('<i class="fas fa-check-circle me-1"></i> Complete Dismissal');
                }
            },
            error: function(xhr) {
                let errorMsg = 'An error occurred';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                showToast('error', errorMsg);
                submitBtn.prop('disabled', false).html('<i class="fas fa-check-circle me-1"></i> Complete Dismissal');
            }
        });
    });
    
    // Toast notification function
    function showToast(type, message) {
        $('.toast').remove();
        
        const bgColor = type === 'success' ? '#28a745' : '#dc3545';
        const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
        
        const toastHtml = `
            <div class="toast align-items-center text-white border-0 position-fixed" style="top: 20px; right: 20px; z-index: 10000; background: ${bgColor}; border-radius: 0.5rem; min-width: 300px;" role="alert" data-bs-autohide="true" data-bs-delay="3000">
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="fas ${icon} me-2"></i> ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            </div>
        `;
        
        $('body').append(toastHtml);
        const toast = $('.toast').last();
        const bsToast = new bootstrap.Toast(toast, { autohide: true, delay: 3000 });
        bsToast.show();
        
        toast.on('hidden.bs.toast', function() {
            $(this).remove();
        });
    }
});
</script>
@endpush