@extends('layouts.jobs')

@push('styles')
    <style>
        .track-container {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 2.5rem;
            max-width: 600px;
            margin: 2rem auto;
        }

        .track-icon {
            width: 4rem;
            height: 4rem;
            background-color: #dbeafe;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
        }

        .track-icon svg {
            width: 2rem;
            height: 2rem;
            color: #2563eb;
        }

        .track-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #111827;
            text-align: center;
            margin-bottom: 0.75rem;
        }

        .track-description {
            color: #6b7280;
            font-size: 14px;
            line-height: 1.6;
            text-align: center;
            margin-bottom: 2rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
        }

        .form-input {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            font-size: 14px;
            transition: all 0.2s ease;
            background: white;
        }

        .form-input:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .btn-track {
            width: 100%;
            background-color: #2563eb;
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 0.375rem;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.2s ease;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .btn-track:hover {
            background-color: #1d4ed8;
        }

        .alert-success {
            background-color: #d1fae5;
            color: #065f46;
            padding: 0.875rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            margin-bottom: 1.5rem;
            border: 1px solid #a7f3d0;
        }

        .alert-error {
            background-color: #fee2e2;
            color: #991b1b;
            padding: 0.875rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            margin-bottom: 1.5rem;
            border: 1px solid #fecaca;
        }

        .back-link {
            text-align: center;
            margin-top: 1.5rem;
        }

        .back-link a {
            color: #2563eb;
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .back-link a:hover {
            text-decoration: underline;
        }
    </style>
@endpush

@section('breadcrumb')
    <img src="https://careers.mersifarma.com/logo.png" alt="mersifarma" style="height: 32px;">
@endsection

@section('header')
    <h1 class="text-3xl font-bold text-white mb-3">Track Your Application</h1>
    <div class="job-header-info justify-center">
        <div class="flex items-center gap-2">
            <span>Check the status of your journey with us</span>
        </div>
    </div>
@endsection

@section('content')
    <div class="container mx-auto px-4 py-12">
        <div class="track-container">
            <div class="track-icon">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01">
                    </path>
                </svg>
            </div>

            <h2 class="track-title">Track Your Applications</h2>
            <p class="track-description">
                Enter your email address to view the status of all your job applications. We'll show you the current
                stage and next steps for each application.
            </p>

            @if (session('status') || session('success'))
                <div class="alert-success">
                    {{ session('status') ?? session('success') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert-error">
                    <ul class="list-disc list-inside space-y-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('applicant.track.post') }}">
                @csrf

                <div class="form-group">
                    <label for="email" class="form-label">
                        Email Address
                    </label>
                    <input type="email" id="email" name="email" value="{{ old('email', session('email')) }}"
                        required autofocus class="form-input" placeholder="your.email@example.com">
                </div>

                <button type="submit" class="btn-track">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    Track My Applications
                </button>
            </form>

            <div class="back-link">
                <a href="{{ route('jobs.index') }}">
                    ← Back to Job Listings
                </a>
            </div>
        </div>
    </div>
@endsection