@extends('front.layout.app')
@section('content')

    <section class="innerbanner">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>{{ $application->title ?? '' }}</h2>
                </div>
            </div>
        </div>
    </section>
    </div>
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @foreach($errors->all() as $error)
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ $error }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endforeach
    <section class="py-5">
        <div class="container">

            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="card shadow-lg border-0 rounded-3 p-4">
                        <h3 class="fw-bold">{{ $application->title ?? '' }}</h3>
                        <p class="text-muted mb-1"><strong>Department:</strong> {{ $application->department ?? 'N/A' }}
                        </p>
                        <p class="text-muted mb-1"><strong>Address:</strong> {{ $application->address ?? 'N/A' }}</p>
                        <p class="text-muted mb-1"><strong>Salary:</strong> {{ $application->salary ?? 'Negotiable' }}
                        </p>
                        <p class="text-muted mb-3">
                            <strong>Deadline:</strong> {{ $application->deadline ?? 'Open Until Filled' }}</p>

                        <h5 class="mt-4">Description</h5>
                        <p>{!! nl2br(e($application->description ?? '')) !!}</p>

                        @if($application->requirements)
                            <h5 class="mt-4">Requirements</h5>
                            <p>{!! nl2br(e($application->requirements)) !!}</p>
                        @endif

                        <div class="text-center mt-4">
                            <button class="btn btn-primary px-5 py-2 rounded-pill" data-bs-toggle="modal"
                                    data-bs-target="#applyModal">
                                Apply Now
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <div class="modal fade" id="applyModal" tabindex="-1" aria-labelledby="applyModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content rounded-3 shadow-lg">
                <div class="modal-header">
                    <h5 class="modal-title" id="applyModalLabel">Apply for {{ $application->title }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('job.apply', $application->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Full Name</label>
                                <input type="text" name="name" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Email</label>
                                <input type="email" name="email" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Phone</label>
                                <input type="text" name="phone" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Upload CV</label>
                                <input type="file" name="cv" class="form-control" accept=".pdf,.doc,.docx" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Note</label>
                                <textarea name="note" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success px-4">Submit Application</button>
                    </div>
                </form>
            </div>
        </div>
    </div>



    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap JS (includes modal, dropdown, collapse, etc.) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>



@endsection