@extends('dashboard.main')

@section('main-content')

<style>

.custom-card{
    background:#fff;
    border:none;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(31,48,68,.08);
}

.custom-card .card-header{
    background:#1F3044;
    color:#fff;
    padding:22px 30px;
    border:none;
}

.custom-card .card-header h3{
    margin:0;
    font-size:28px;
    font-weight:700;
    color:#fff;
}

.total-badge{
    background:#fff;
    color:#1F3044;
    padding:10px 18px;
    border-radius:30px;
    font-weight:700;
}

.table{
    margin:0;
}

.table thead th{
    background:#F5F7FA;
    color:#1F3044;
    font-weight:700;
    border:none;
    padding:18px;
    text-transform:uppercase;
    font-size:14px;
    letter-spacing:.5px;
}

.table tbody td{
    padding:20px 18px;
    vertical-align:middle;
    border-color:#edf1f5;
}

.table tbody tr{
    transition:.3s;
}

.table tbody tr:hover{
    background:#F8FAFD;
}

.applicant-name{
    font-size:18px;
    font-weight:700;
    color:#1F3044;
}

.email-text,
.phone-text,
.position-text{
    color:#666;
}

.status-select{
    border-radius:10px;
    border:1px solid #d7dce3;
    padding:8px;
}

.cv-btn{
    background:#198754;
    color:#fff;
    border-radius:10px;
    padding:8px 16px;
    text-decoration:none;
    transition:.3s;
}

.cv-btn:hover{
    background:#157347;
    color:#fff;
}

.no-cv{
    background:#dc3545;
    color:#fff;
    padding:8px 15px;
    border-radius:20px;
}

.date{
    font-weight:700;
    color:#1F3044;
}

.time{
    color:#777;
    font-size:14px;
}

.action-btn{
    width:45px;
    height:45px;
    border:none;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:.3s;
}

.delete-btn{
    background:#dc3545;
}

.delete-btn:hover{
    background:#bb2d3b;
    transform:translateY(-3px);
}

.empty-box{
    text-align:center;
    padding:70px;
    color:#777;
}

.empty-box i{
    font-size:55px;
    color:#1F3044;
    margin-bottom:20px;
}

</style>

<div class="card custom-card">

    <div class="card-header d-flex justify-content-between align-items-center">

        <h3 class="text-white">

            <i class="fas fa-briefcase me-2"></i>

            Job Applications

        </h3>

        <span class="total-badge">

            Total :
            {{ $applications->count() }}

        </span>

    </div>

    <div class="card-body p-0">

        @if(session('success'))

            <div class="alert alert-success m-4">

                {{ session('success') }}

            </div>

        @endif

        <div class="table-responsive">

            <table class="table align-middle">

                <thead>

                    <tr>

                        <th>#</th>

                        <th>Applicant</th>

                        <th>Email</th>

                        <th>Phone</th>

                        <th>Position</th>

                        <th>Status</th>

                        <th>Resume</th>

                        <th>Date</th>

                        <th class="text-center">Action</th>

                    </tr>

                </thead>

                <tbody>

                    @forelse($applications as $application)

                    <tr>

                        <td>

                            <strong>{{ $loop->iteration }}</strong>

                        </td>

                        <td>

                            <div class="applicant-name">

                                {{ $application->full_name }}

                            </div>

                        </td>

                        <td>

                            <span class="email-text">

                                {{ $application->email }}

                            </span>

                        </td>

                        <td>

                            <span class="phone-text">

                                {{ $application->phone }}

                            </span>

                        </td>

                        <td>

                            <span class="position-text">

                                {{ $application->position }}

                            </span>

                        </td>

                        <td>

                            <form action="{{ route('applications.status',$application->id) }}"
                                  method="POST">

                                @csrf

                                <select class="form-select status-select"
                                        name="status"
                                        onchange="this.form.submit()">

                                    <option value="Pending"
                                        {{ $application->status=='Pending' ? 'selected' : '' }}>
                                        Pending
                                    </option>

                                    <option value="Reviewed"
                                        {{ $application->status=='Reviewed' ? 'selected' : '' }}>
                                        Reviewed
                                    </option>

                                    <option value="Shortlisted"
                                        {{ $application->status=='Shortlisted' ? 'selected' : '' }}>
                                        Shortlisted
                                    </option>

                                    <option value="Rejected"
                                        {{ $application->status=='Rejected' ? 'selected' : '' }}>
                                        Rejected
                                    </option>

                                </select>

                            </form>

                        </td>

                        <td>

                            @if($application->resume)

                                <a href="{{ route('applications.download',$application->id) }}"
                                   class="cv-btn">

                                    <i class="fas fa-download me-1"></i>

                                    CV

                                </a>

                            @else

                                <span class="no-cv">

                                    No CV

                                </span>

                            @endif

                        </td>

                        <td>

                            <div class="date">

                                {{ $application->created_at->format('d M Y') }}

                            </div>

                            <div class="time">

                                {{ $application->created_at->format('h:i A') }}

                            </div>

                        </td>

                        <td class="text-center">

                            <form action="{{ route('applications.destroy',$application->id) }}"
                                  method="POST"
                                  onsubmit="return confirm('Delete this application?')">

                                @csrf
                                @method('DELETE')

                                <button class="action-btn delete-btn">

                                    <i class="fas fa-trash"></i>

                                </button>

                            </form>

                        </td>

                    </tr>

                    @empty

                    <tr>

                        <td colspan="9">

                            <div class="empty-box">

                                <i class="fas fa-briefcase"></i>

                                <h4>

                                    No Job Applications Found

                                </h4>

                            </div>

                        </td>

                    </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>

@endsection
