@extends('layouts.dashboard')

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

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">My Applications</h4>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header border-0">
                <h5 class="card-title mb-0">Application History</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-borderless align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Job Title</th>
                                <th>Company</th>
                                <th>Applied On</th>
                                <th>Status</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($applications as $app)
                            <tr>
                                <td>
                                    <h6 class="mb-1"><a href="{{ route('jobs.show', $app->job->id) }}" class="text-reset">{{ $app->job->title }}</a></h6>
                                </td>
                                <td>{{ $app->job->company->name ?? 'Unknown Company' }}</td>
                                <td>{{ $app->created_at->format('d M, Y') }}</td>
                                <td>
                                    @if($app->status == 'pending')
                                        <span class="badge bg-warning-subtle text-warning">Pending Review</span>
                                    @elseif($app->status == 'accepted')
                                        <span class="badge bg-success-subtle text-success">Accepted</span>
                                    @else
                                        <span class="badge bg-danger-subtle text-danger">Rejected</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <ul class="list-inline hstack gap-2 justify-content-end mb-0">
                                        <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="View Job">
                                            <a href="{{ route('jobs.show', $app->job->id) }}" class="text-primary d-inline-block">
                                                <i class="ri-eye-fill fs-16"></i>
                                            </a>
                                        </li>
                                        @if($app->status == 'pending')
                                        <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Withdraw">
                                            <form action="{{ route('freelancer.applications.destroy', $app->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="text-danger d-inline-block border-0 bg-transparent p-0" onclick="return confirm('Are you sure you want to withdraw this application?')">
                                                    <i class="ri-close-circle-fill fs-16"></i>
                                                </button>
                                            </form>
                                        </li>
                                        @endif
                                    </ul>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center py-4">
                                    <div class="avatar-sm mx-auto mb-3">
                                        <div class="avatar-title bg-light text-primary rounded-circle fs-20">
                                            <i class="ri-send-plane-fill"></i>
                                        </div>
                                    </div>
                                    <h5 class="mt-2">No Applications Found</h5>
                                    <p class="text-muted mb-0">You haven't applied to any jobs yet.</p>
                                    <a href="{{ route('jobs.index') }}" class="btn btn-sm btn-primary mt-3">Browse Jobs</a>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="mt-3">
                    {{ $applications->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection