@extends('layouts.applicant.applicant')

@section('title', 'New Application')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.index') }}">My Applications</a></li>
    <li class="breadcrumb-item active">New Application</li>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Start New Application</h1>
            <p class="text-muted">Choose a position to apply for</p>
        </div>
        <div>
            <a href="{{ route('applicant.applications.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Applications
            </a>
        </div>
    </div>

    @if($advertisements->count() > 0)
        <div class="row">
            @foreach($advertisements as $advertisement)
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card h-100 border-left-primary shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <span class="badge badge-success">
                                <i class="fas fa-circle me-1"></i>Active
                            </span>
                            <span class="badge badge-warning">
                                <i class="fas fa-clock me-1"></i>
                                {{ $advertisement->application_end_date->diffForHumans() }}
                            </span>
                        </div>
                        
                        <h5 class="card-title text-primary mb-2">{{ $advertisement->title }}</h5>
                        <h6 class="card-subtitle mb-3 text-muted">
                            <i class="fas fa-briefcase me-1"></i>{{ $advertisement->position }}
                        </h6>
                        
                        <div class="mb-3">
                            <p class="card-text">{{ Str::limit($advertisement->description, 120) }}</p>
                        </div>
                        
                        <div class="mb-3">
                            <div class="row text-sm">
                                <div class="col-12 mb-2">
                                    <i class="fas fa-building text-muted me-2"></i>
                                    <strong>Department:</strong> {{ $advertisement->department ? $advertisement->department->name : 'N/A' }}
                                </div>
                                <div class="col-12 mb-2">
                                    <i class="fas fa-users text-muted me-2"></i>
                                    <strong>Positions:</strong> {{ $advertisement->number_of_posts }}
                                </div>
                                @if($advertisement->salary_min && $advertisement->salary_max)
                                <div class="col-12 mb-2">
                                    <i class="fas fa-money-bill-wave text-muted me-2"></i>
                                    <strong>Salary:</strong> ₹{{ number_format($advertisement->salary_min) }} - ₹{{ number_format($advertisement->salary_max) }}
                                </div>
                                @endif
                                <div class="col-12 mb-2">
                                    <i class="fas fa-calendar-alt text-muted me-2"></i>
                                    <strong>Deadline:</strong> {{ $advertisement->application_end_date->format('M d, Y') }}
                                </div>
                            </div>
                        </div>
                        
                        @php
                            $daysLeft = now()->diffInDays($advertisement->application_end_date, false);
                        @endphp
                        
                        @if($daysLeft > 0)
                            <div class="alert alert-info py-2 mb-3">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>{{ $daysLeft }} days</strong> left to apply
                            </div>
                        @elseif($daysLeft == 0)
                            <div class="alert alert-warning py-2 mb-3">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <strong>Last day</strong> to apply!
                            </div>
                        @endif
                    </div>
                    
                    <div class="card-footer bg-transparent">
                        <div class="d-grid gap-2">
                            <a href="{{ route('recruitment.show', $advertisement) }}" 
                               class="btn btn-outline-primary btn-sm" target="_blank">
                                <i class="fas fa-external-link-alt me-1"></i>View Full Details
                            </a>
                            
                            @php
                                $existingApplication = \App\Models\Application::getExistingApplication(auth()->id(), $advertisement->id);
                            @endphp
                            
                            @if($existingApplication)
                                @if($existingApplication->status === 'submitted')
                                    <button class="btn btn-success btn-sm w-100" disabled>
                                        <i class="fas fa-check me-1"></i>Already Applied
                                    </button>
                                    <small class="text-muted mt-1 d-block">
                                        <i class="fas fa-info-circle me-1"></i>
                                        You have already submitted an application for this position.
                                    </small>
                                @else
                                    <a href="{{ route('applicant.applications.step', [$existingApplication->id, 'personal-information']) }}" 
                                       class="btn btn-warning btn-sm w-100">
                                        <i class="fas fa-edit me-1"></i>Continue Application
                                    </a>
                                    <small class="text-muted mt-1 d-block">
                                        <i class="fas fa-info-circle me-1"></i>
                                        You have a draft application for this position.
                                    </small>
                                @endif
                            @elseif($daysLeft >= 0)
                                <form action="{{ route('applicant.applications.store') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="advertisement_id" value="{{ $advertisement->id }}">
                                    <button type="submit" class="btn btn-primary btn-sm w-100">
                                        <i class="fas fa-paper-plane me-1"></i>Start Application
                                    </button>
                                </form>
                                <small class="text-success mt-1 d-block">
                                    <i class="fas fa-check-circle me-1"></i>
                                    You can apply for this position.
                                </small>
                            @else
                                <button class="btn btn-secondary btn-sm w-100" disabled>
                                    <i class="fas fa-times me-1"></i>Application Closed
                                </button>
                                <small class="text-muted mt-1 d-block">
                                    <i class="fas fa-clock me-1"></i>
                                    Application deadline has passed.
                                </small>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <!-- Pagination if needed -->
        @if($advertisements instanceof \Illuminate\Pagination\LengthAwarePaginator)
            <div class="d-flex justify-content-center mt-4">
                {{ $advertisements->links() }}
            </div>
        @endif
    @else
        <div class="card shadow">
            <div class="card-body text-center py-5">
                <i class="fas fa-search fa-4x text-muted mb-4"></i>
                <h4 class="text-muted mb-3">No Active Positions Available</h4>
                <p class="text-muted mb-4">
                    There are currently no open positions available for application. 
                    Please check back later or visit our homepage for updates.
                </p>
                <div class="d-flex justify-content-center gap-3">
                    <a href="{{ route('welcome') }}" class="btn btn-primary">
                        <i class="fas fa-home me-2"></i>Visit Homepage
                    </a>
                    <a href="{{ route('applicant.dashboard') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
                    </a>
                </div>
            </div>
        </div>
    @endif
</div>

<style>
.border-left-primary {
    border-left: 4px solid #667eea !important;
}

.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
}

.alert {
    border-radius: 8px;
    border: none;
}

.btn {
    border-radius: 8px;
    font-weight: 500;
}

.card-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.card-title {
    font-weight: 600;
}

.card-subtitle {
    font-weight: 500;
}

.gap-2 > * + * {
    margin-top: 0.5rem;
}

.gap-3 > * + * {
    margin-left: 1rem;
}

@media (max-width: 768px) {
    .gap-3 {
        flex-direction: column;
    }
    
    .gap-3 > * + * {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}
</style>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add confirmation for application start
    const applicationForms = document.querySelectorAll('form[action*="applications.store"]');
    
    applicationForms.forEach(form => {
        form.addEventListener('submit', function(e) {
            const advertisementTitle = this.closest('.card').querySelector('.card-title').textContent;
            
            if (!confirm(`Are you sure you want to start an application for "${advertisementTitle}"?`)) {
                e.preventDefault();
            }
        });
    });
    
    // Auto-refresh countdown timers
    function updateCountdowns() {
        const badges = document.querySelectorAll('.badge-warning');
        badges.forEach(badge => {
            // This would need server-side data to work properly
            // For now, just add a visual indicator
            if (badge.textContent.includes('hours')) {
                badge.classList.add('animate-pulse');
            }
        });
    }
    
    updateCountdowns();
    setInterval(updateCountdowns, 60000); // Update every minute
});
</script>
@endpush