{{-- @extends('layouts.applicant')

@section('title', 'My Applications')

@section('breadcrumbs')
    <li class="breadcrumb-item active">Applications</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-1">My Applications</h1>
                    <p class="text-muted mb-0">Manage and track your job applications</p>
                </div>
                <a href="{{ route('applicant.applications.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> New Application
                </a>
            </div>
        </div>
    </div>

    <!-- Filter and Search -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="GET" action="{{ route('applicant.applications.index') }}">
                        <div class="row align-items-end">
                            <div class="col-md-4">
                                <label for="search" class="form-label">Search</label>
                                <input type="text" class="form-control" id="search" name="search" 
                                       value="{{ request('search') }}" placeholder="Search by position or application number">
                            </div>
                            <div class="col-md-3">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select" id="status" name="status">
                                    <option value="">All Status</option>
                                    <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                                    <option value="submitted" {{ request('status') === 'submitted' ? 'selected' : '' }}>Submitted</option>
                                    <option value="under_review" {{ request('status') === 'under_review' ? 'selected' : '' }}>Under Review</option>
                                    <option value="shortlisted" {{ request('status') === 'shortlisted' ? 'selected' : '' }}>Shortlisted</option>
                                    <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="date_from" class="form-label">Date From</label>
                                <input type="date" class="form-control" id="date_from" name="date_from" 
                                       value="{{ request('date_from') }}">
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class="fas fa-search"></i> Filter
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Applications List -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if($applications->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Application #</th>
                                        <th>Position</th>
                                        <th>Department</th>
                                        <th>Status</th>
                                        <th>Progress</th>
                                        <th>Applied Date</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($applications as $application)
                                    <tr>
                                        <td>
                                            <strong>{{ $application->application_number }}</strong>
                                        </td>
                                        <td>
                                            <div>
                                                <strong>{{ $application->position_title }}</strong>
                                                @if($application->position_code)
                                                <br><small class="text-muted">{{ $application->position_code }}</small>
                                                @endif
                                            </div>
                                        </td>
                                        <td>{{ $application->department }}</td>
                                        <td>
                                            <span class="badge badge-{{ $application->getStatusColor() }}">
                                                {{ ucfirst(str_replace('_', ' ', $application->status)) }}
                                            </span>
                                        </td>
                                        <td>
                                            @php
                                                $completion = $application->getCompletionPercentage();
                                            @endphp
                                            <div class="progress" style="height: 20px;">
                                                <div class="progress-bar" role="progressbar" 
                                                     style="width: {{ $completion }}%">
                                                    {{ $completion }}%
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $application->created_at->format('M d, Y') }}</td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('applicant.applications.show', $application) }}" 
                                                   class="btn btn-sm btn-outline-primary" title="View">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                @if(!$application->is_finalized)
                                                <a href="{{ route('applicant.applications.edit', $application) }}" 
                                                   class="btn btn-sm btn-outline-secondary" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button type="button" class="btn btn-sm btn-outline-danger" 
                                                        onclick="deleteApplication({{ $application->id }})" title="Delete">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination -->
                        <div class="d-flex justify-content-center mt-4">
                            {{ $applications->appends(request()->query())->links() }}
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-file-alt fa-4x text-muted mb-3"></i>
                            <h4>No Applications Found</h4>
                            <p class="text-muted mb-4">
                                @if(request()->hasAny(['search', 'status', 'date_from']))
                                    No applications match your current filters.
                                @else
                                    You haven't created any applications yet.
                                @endif
                            </p>
                            @if(!request()->hasAny(['search', 'status', 'date_from']))
                            <a href="{{ route('applicant.applications.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Create Your First Application
                            </a>
                            @else
                            <a href="{{ route('applicant.applications.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Clear Filters
                            </a>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this application? This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function deleteApplication(applicationId) {
    const form = document.getElementById('deleteForm');
    form.action = `/applicant/applications/${applicationId}`;
    
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}
</script>
@endpush
 --}}

 @extends('layouts.app')

@section('title', 'My Applications')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">My Applications</h4>
                </div>
                <div class="card-body">
                    @forelse($applications as $application)
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <h5>{{ $application->post->title }}</h5>
                                    <p class="mb-1">
                                        <strong>Department:</strong> {{ $application->post->department }} |
                                        <strong>Application ID:</strong> {{ $application->application_number }}
                                    </p>
                                    <p class="mb-1">
                                        <strong>Applied On:</strong> {{ $application->created_at->format('d M Y, h:i A') }}
                                    </p>
                                    <p class="mb-0">
                                        <strong>Status:</strong> 
                                        <span class="badge badge-{{ $application->status_color }}">
                                            {{ ucfirst($application->status) }}
                                        </span>
                                    </p>
                                </div>
                                <div class="col-md-4 text-right">
                                    <div class="mb-2">
                                        <small>Progress: {{ $application->completion_percentage }}%</small>
                                        <div class="progress" style="height: 5px;">
                                            <div class="progress-bar" role="progressbar" 
                                                 style="width: {{ $application->completion_percentage }}%"></div>
                                        </div>
                                    </div>
                                    
                                    @if($application->status !== 'finalized')
                                        <a href="{{ route('applicant.applications.show', $application->id) }}" 
                                           class="btn btn-primary btn-sm">Continue</a>
                                    @endif
                                    
                                    @if($application->completion_percentage == 100)
                                        <a href="{{ route('applicant.applications.pdf', $application->id) }}" 
                                           class="btn btn-success btn-sm" target="_blank">
                                            <i class="fas fa-download"></i> PDF
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="alert alert-info text-center">
                        <h5>No Applications Found</h5>
                        <p>You haven't applied for any positions yet.</p>
                        <a href="{{ route('applicant.posts.index') }}" class="btn btn-primary">
                            Browse Available Posts
                        </a>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
@endsection