@extends('dashboard.base')

@section('content')

{{-- Show validation errors --}}
@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

{{-- Show success message --}}
@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif


<div class="container my-4">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center bg-orange text-white p-3">
            
            <h3 class="text-center flex-grow-1 m-0">My Applications</h3>
        </div>
        
        <div class="card-body">
              
                <div class="container">
                    
                    <div class="row">
                    @if($applications->isEmpty())
        <div class="alert alert-info">You have not submitted any applications yet.</div>
    @else
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Position</th>
                    <th>Status</th>
                    <th>Applied On</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($applications as $index => $app)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $app->position }}</td>
                    <td>{{ $app->status ?? 'Pending' }}</td>
                    <td>{{ $app->created_at->format('d M, Y') }}</td>
                    <td>
                    <a href="{{ route('applications.show', $app->id) }}" class="btn btn-sm btn-orange">View</a>

                </tr>
                @endforeach
            </tbody>
        </table>
    @endif
                        
                    </div>

                </div>
        </div>
    </div>
</div>

                

<!-- Custom Styles -->
<style>
    .btn-orange {
        background-color: #ff6c2f;
        color: white;
        border: none;
    }
    .btn-orange:hover {
        background-color: #e65a1b;
    }
    .bg-orange {
        background-color: #ff6c2f;
    }

    /* Step Navigation */
    .nav-tabs {
        border-bottom: none;
        display: flex;
    }

    .nav-tabs .nav-item {
        position: relative;
    }

    .nav-tabs .nav-link {
        border: none;
        font-weight: bold;
        color: #333;
        padding: 10px 20px;
        cursor: pointer;
    }

    .nav-tabs .nav-link.active {
        background-color: #ff6c2f;
        color: white;
        border-radius: 5px;
        position: relative;
    }

    .nav-tabs .nav-link.active::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -15px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid #ff6c2f;
        transform: translateY(-50%);
    }

    /* Step Content */
    .step-content {
        display: none;
    }

    .step-content.active {
        display: block;
    }
</style>



@endsection