@extends('layouts.front')
@section('title', 'Subscribe for Availability')
@push('styles')
<style>
    .custom-alert {
    position: relative;
    padding: 15px 40px 15px 15px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    font-weight: 500;
}

.custom-alert-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.custom-alert-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 20px;
    font-weight: bold;
    color: inherit;
    cursor: pointer;
    outline: none;
}
</style>
@endpush
@section('content')
<div class="container py-5 text-center">
    <h2>{{ $course->title }}</h2>
    <div class="alert alert-warning text-start" role="alert" style="max-width: 600px; margin: 0 auto;">
    <h5 class="alert-heading">Slot Full</h5>
    <p>This course is currently full. Subscribe below to get notified when a slot becomes available.</p>
</div>


@if(session('success'))
    <div class="custom-alert custom-alert-success mt-3" style="max-width: 400px; margin: auto;">
        <span class="custom-alert-message">{{ session('success') }}</span>
        <button type="button" class="custom-alert-close" onclick="this.parentElement.style.display='none';">&times;</button>
    </div>
@endif



    <form method="POST" action="{{ route('courses.subscribe', $course->id) }}" class="mt-4" style="max-width: 400px; margin: auto;">
        @csrf
        <input type="email" name="email" class="form-control mb-3" placeholder="Enter your email" required>
        <input type="text" name="name" class="form-control mb-3" placeholder="Enter your name" required>
        <button type="submit" class="btn btn-primary w-100">Subscribe</button>
    </form>
</div>
@endsection