@extends('layouts.app')
@section('title', 'New Announcement')
@section('page-title', 'New Announcement')

@section('content')
<div class="page-header">
    <div>
        <div class="breadcrumb"><a href="{{ route('admin.dashboard') }}">Dashboard</a><span>/</span><a href="{{ route('admin.announcements.index') }}">Announcements</a><span>/</span>New</div>
        <h1>Create Announcement</h1>
        <p>Send important updates to hotels.</p>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.announcements.store') }}">
            @csrf

            <div class="form-group">
                <label class="form-label">Subject <span class="required">*</span></label>
                <input type="text" name="subject" class="form-control @error('subject') is-invalid @enderror" required>
                @error('subject')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="form-group">
                <label class="form-label">Message <span class="required">*</span></label>
                <textarea name="message" class="form-control @error('message') is-invalid @enderror" rows="6" required></textarea>
                @error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="form-group">
                <label class="form-label">Priority <span class="required">*</span></label>
                <select name="priority" class="form-control @error('priority') is-invalid @enderror" required>
                    <option value="low">Low - General Information</option>
                    <option value="normal">Normal - Important Update</option>
                    <option value="urgent">Urgent - Action Required</option>
                </select>
                @error('priority')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="form-group">
                <label class="form-label">Send To <span class="required">*</span></label>
                <select name="target_type" id="target_type" class="form-control @error('target_type') is-invalid @enderror" required>
                    <option value="all">All Hotels</option>
                    <option value="single">Specific Hotels</option>
                    <option value="group">Hotels by State</option>
                </select>
                @error('target_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div id="single_hotel_group" style="display:none;">
                <div class="form-group">
                    <label class="form-label">Select Hotels</label>
                    <select name="target_ids[]" class="form-control" multiple size="8">
                        @foreach($hotels as $hotel)
                            <option value="{{ $hotel->id }}">{{ $hotel->name }} ({{ $hotel->city ?? 'No city' }})</option>
                        @endforeach
                    </select>
                    <small class="form-text">Hold Ctrl to select multiple hotels</small>
                </div>
            </div>

            <div id="group_state_group" style="display:none;">
                <div class="form-group">
                    <label class="form-label">Select State</label>
                    <select name="target_ids[]" class="form-control" multiple size="6">
                        @foreach($states as $state)
                            <option value="{{ $state }}">{{ $state }}</option>
                        @endforeach
                    </select>
                    <small class="form-text">Hold Ctrl to select multiple states</small>
                </div>
            </div>

            <div style="display:flex; gap:8px; justify-content:flex-end; margin-top:20px;">
                <a href="{{ route('admin.announcements.index') }}" class="btn btn-outline">Cancel</a>
                <button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane"></i> Send Announcement</button>
            </div>
        </form>
    </div>
</div>

<script>
    const targetType = document.getElementById('target_type');
    const singleDiv = document.getElementById('single_hotel_group');
    const groupDiv = document.getElementById('group_state_group');

    targetType.addEventListener('change', function() {
        singleDiv.style.display = 'none';
        groupDiv.style.display = 'none';
        if (this.value === 'single') singleDiv.style.display = 'block';
        if (this.value === 'group') groupDiv.style.display = 'block';
    });
    targetType.dispatchEvent(new Event('change'));
</script>
@endsection