@extends('jobs.layout')
@section('title', 'Job alerts')
@section('content')
<main class="wrap" style="max-width:900px">
    <span class="eyebrow">Job seeker workspace</span>
    <h1 class="title">Job alerts</h1>
    <p class="muted">Save job filters and see an update here when an employer publishes a matching job.</p>
    @if (session('status'))<div class="note" role="status">{{ session('status') }}</div>@endif
    @if ($errors->any())<div class="note" role="alert" style="background:#fff0ed;color:#a13e30">{{ $errors->first() }}</div>@endif

    <section class="panel">
        <h2 class="section-title">Create an alert</h2>
        <p class="muted">Choose at least one filter.</p>
        <form method="POST" action="{{ route('seeker.alerts.store') }}">
            @csrf
            <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px">
                <p><label for="keywords">Keywords</label><input class="input" id="keywords" name="keywords" maxlength="255" value="{{ old('keywords') }}" placeholder="e.g. accounting, driver"></p>
                <p><label for="county_id">County</label><select class="input" id="county_id" name="county_id"><option value="">Any county</option>@foreach ($counties as $county)<option value="{{ $county->id }}" @selected(old('county_id') == $county->id)>{{ $county->name }}</option>@endforeach</select></p>
                <p><label for="town">Town</label><input class="input" id="town" name="town" maxlength="255" value="{{ old('town') }}"></p>
                <p><label for="employment_type">Schedule</label><select class="input" id="employment_type" name="employment_type"><option value="">Any schedule</option><option value="full_time">Full-time</option><option value="part_time">Part-time</option><option value="contract">Contract</option><option value="temporary">Temporary</option><option value="internship">Internship</option></select></p>
                <p><label for="work_mode">Work arrangement</label><select class="input" id="work_mode" name="work_mode"><option value="">Any work mode</option><option value="onsite">On-site</option><option value="hybrid">Hybrid</option><option value="remote">Remote</option></select></p>
            </div>
            <button class="button" type="submit">Create alert</button>
        </form>
    </section>

    <section class="panel">
        <h2 class="section-title">Your saved alerts</h2>
        @forelse ($alerts as $alert)
            <article style="border-top:1px solid #edf1ee;padding:16px 0">
                <form method="POST" action="{{ route('seeker.alerts.update', $alert) }}">
                    @csrf @method('PATCH')
                    <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px">
                        <p><label for="keywords_{{ $alert->id }}">Keywords</label><input class="input" id="keywords_{{ $alert->id }}" name="keywords" value="{{ $alert->keywords }}" maxlength="255"></p>
                        <p><label for="county_{{ $alert->id }}">County</label><select class="input" id="county_{{ $alert->id }}" name="county_id"><option value="">Any county</option>@foreach ($counties as $county)<option value="{{ $county->id }}" @selected($alert->county_id == $county->id)>{{ $county->name }}</option>@endforeach</select></p>
                        <p><label for="town_{{ $alert->id }}">Town</label><input class="input" id="town_{{ $alert->id }}" name="town" value="{{ $alert->town }}" maxlength="255"></p>
                        <p><label for="schedule_{{ $alert->id }}">Schedule</label><select class="input" id="schedule_{{ $alert->id }}" name="employment_type"><option value="">Any schedule</option><option value="full_time" @selected($alert->employment_type === 'full_time')>Full-time</option><option value="part_time" @selected($alert->employment_type === 'part_time')>Part-time</option><option value="contract" @selected($alert->employment_type === 'contract')>Contract</option><option value="temporary" @selected($alert->employment_type === 'temporary')>Temporary</option><option value="internship" @selected($alert->employment_type === 'internship')>Internship</option></select></p>
                        <p><label for="mode_{{ $alert->id }}">Work arrangement</label><select class="input" id="mode_{{ $alert->id }}" name="work_mode"><option value="">Any work mode</option><option value="onsite" @selected($alert->work_mode === 'onsite')>On-site</option><option value="hybrid" @selected($alert->work_mode === 'hybrid')>Hybrid</option><option value="remote" @selected($alert->work_mode === 'remote')>Remote</option></select></p>
                    </div>
                    <label style="display:flex;gap:8px;align-items:center;margin:10px 0"><input type="checkbox" name="is_active" value="1" @checked($alert->is_active)> Alert is active</label>
                    <button class="button" type="submit">Save alert</button>
                </form>
                <form method="POST" action="{{ route('seeker.alerts.delete', $alert) }}" style="margin-top:8px">@csrf @method('DELETE')<button class="button" type="submit" style="background:#edf4f0;color:#245d4d">Delete alert</button></form>
            </article>
        @empty
            <p class="muted">You haven’t created any alerts yet.</p>
        @endforelse
    </section>
    <p><a class="button" href="{{ route('seeker.applications') }}">Back to my workspace</a></p>
</main>
@endsection