@extends('layouts.app')

@section('title', __('news'))

@section('content')
<div class="container-fluid">
    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="d-flex align-items-center justify-content-between gap-2 mb-3 flex-wrap">
        <div>
            <div class="fw-bold fs-5">{{ __('news') }}</div>
            <div class="text-muted small">{{ __('news.manage.subtitle') }}</div>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            @if(auth()->user()?->hasPermission('news.create'))
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addNewsModal">
                    <i class="bi bi-plus-circle"></i> {{ __('news.manage.add_button') }}
                </button>
                <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addImportantNewsModal">
                    <i class="bi bi-megaphone"></i> {{ __('news.manage.add_important_button') }}
                </button>
                <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#sendAlertModal">
                    <i class="bi bi-bell"></i> {{ __('news.manage.alert_button') }}
                </button>
            @endif
            @if(auth()->user()?->hasPermission('news.update'))
                <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#newsSettingsModal">
                    <i class="bi bi-gear"></i> {{ __('news.manage.settings_button') }}
                </button>
            @endif
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            @forelse($newsItems as $newsItem)
                <div class="p-3 p-md-4 border-bottom">
                    <div class="d-flex align-items-start justify-content-between gap-3 flex-wrap">
                        <div class="flex-grow-1">
                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                <div class="fw-bold">{{ $newsItem->title }}</div>
                                @if($newsItem->is_important)
                                    <span class="badge bg-danger">{{ __('news.badge.important') }}</span>
                                @endif
                            </div>
                            <div class="text-muted mt-1">
                                {{ \Illuminate\Support\Str::limit($newsItem->details, 160) }}
                            </div>
                            @if($newsItem->is_important && $newsItem->expires_at)
                                <div class="text-muted small mt-2">
                                    {{ __('news.list.expires_at_label') }}: {{ $newsItem->expires_at->format('Y-m-d H:i') }}
                                </div>
                            @endif
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            @if(auth()->user()?->hasPermission('news.update'))
                                <form method="POST" action="{{ route('news.toggle', $newsItem->id) }}">
                                    @csrf
                                    <button type="submit" class="btn btn-sm {{ $newsItem->is_active ? 'btn-outline-warning' : 'btn-outline-success' }}" title="{{ $newsItem->is_active ? __('news.actions.disable') : __('news.actions.enable') }}">
                                        <i class="bi {{ $newsItem->is_active ? 'bi-pause-fill' : 'bi-play-fill' }}"></i>
                                        {{ $newsItem->is_active ? __('news.actions.disable') : __('news.actions.enable') }}
                                    </button>
                                </form>
                            @endif
                            @if(auth()->user()?->hasPermission('news.update'))
                                <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editNewsModal-{{ $newsItem->id }}" title="{{ __('common.edit') }}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                            @endif
                            @if(auth()->user()?->hasPermission('news.delete'))
                                <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteNewsModal-{{ $newsItem->id }}" title="{{ __('common.delete') }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            @endif
                        </div>
                    </div>
                </div>

                @if(auth()->user()?->hasPermission('news.update'))
                    <div class="modal fade" id="editNewsModal-{{ $newsItem->id }}" tabindex="-1" aria-labelledby="editNewsModalLabel-{{ $newsItem->id }}" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg">
                            <div class="modal-content border-0 shadow">
                                <form method="POST" action="{{ route('news.update', $newsItem->id) }}">
                                    @csrf
                                    @method('PUT')
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="editNewsModalLabel-{{ $newsItem->id }}">{{ __('news.manage.edit_title') }}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="mb-3">
                                            <label class="form-label">{{ __('news.fields.title') }}</label>
                                            <input type="text" name="title" class="form-control" value="{{ old('title', $newsItem->title) }}" required>
                                        </div>
                                        <div class="mb-0">
                                            <label class="form-label">{{ __('news.fields.details') }}</label>
                                            <textarea name="details" class="form-control" rows="5" required>{{ old('details', $newsItem->details) }}</textarea>
                                        </div>
                                        @if($newsItem->is_important)
                                            <div class="mt-3">
                                                <label class="form-label">{{ __('news.fields.expires_at') }}</label>
                                                <input
                                                    type="datetime-local"
                                                    name="expires_at"
                                                    class="form-control"
                                                    value="{{ old('expires_at', $newsItem->expires_at?->format('Y-m-d\\TH:i')) }}"
                                                    required
                                                >
                                            </div>
                                        @endif
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('common.cancel') }}</button>
                                        <button type="submit" class="btn btn-primary">{{ __('common.save') }}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @endif

                @if(auth()->user()?->hasPermission('news.delete'))
                    <div class="modal fade" id="deleteNewsModal-{{ $newsItem->id }}" tabindex="-1" aria-labelledby="deleteNewsModalLabel-{{ $newsItem->id }}" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content border-0 shadow">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="deleteNewsModalLabel-{{ $newsItem->id }}">{{ __('common.confirm_delete_title') }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="fw-semibold">{{ $newsItem->title }}</div>
                                    <div class="text-muted mt-1">{{ __('common.confirm_delete_message') }}</div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('common.cancel') }}</button>
                                    <form method="POST" action="{{ route('news.destroy', $newsItem->id) }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger">{{ __('common.confirm_delete_action') }}</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @empty
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-newspaper fs-1 d-block mb-2"></i>
                    <div class="fw-semibold">{{ __('news.manage.empty') }}</div>
                </div>
            @endforelse
        </div>
    </div>
</div>

@if(auth()->user()?->hasPermission('news.create'))
    <div class="modal fade" id="addNewsModal" tabindex="-1" aria-labelledby="addNewsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow">
                <form method="POST" action="{{ route('news.store') }}">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="addNewsModalLabel">{{ __('news.manage.add_title') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">{{ __('news.fields.title') }}</label>
                            <input type="text" name="title" class="form-control" value="{{ old('title') }}" required>
                        </div>
                        <div class="mb-0">
                            <label class="form-label">{{ __('news.fields.details') }}</label>
                            <textarea name="details" class="form-control" rows="5" required>{{ old('details') }}</textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('common.cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('common.save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addImportantNewsModal" tabindex="-1" aria-labelledby="addImportantNewsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow">
                <form method="POST" action="{{ route('news.important.store') }}">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="addImportantNewsModalLabel">{{ __('news.manage.add_important_title') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">{{ __('news.fields.title') }}</label>
                            <input type="text" name="title" class="form-control" value="{{ old('title') }}" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ __('news.fields.details') }}</label>
                            <textarea name="details" class="form-control" rows="5" required>{{ old('details') }}</textarea>
                        </div>
                        <div class="mb-0">
                            <label class="form-label">{{ __('news.fields.expires_at') }}</label>
                            <input type="datetime-local" name="expires_at" class="form-control" value="{{ old('expires_at') }}" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('common.cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('common.save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="sendAlertModal" tabindex="-1" aria-labelledby="sendAlertModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow">
                <form method="POST" action="{{ route('news.alert.send') }}">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="sendAlertModalLabel">{{ __('news.alert.title') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">{{ __('news.alert.fields.title') }}</label>
                            <input type="text" name="alert_title" class="form-control" value="{{ old('alert_title') }}" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ __('news.alert.fields.details') }}</label>
                            <textarea name="alert_details" class="form-control" rows="5" required>{{ old('alert_details') }}</textarea>
                        </div>

                        <div class="mb-2">
                            <label class="form-label d-block">{{ __('news.alert.fields.recipients') }}</label>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="recipients_mode" id="alertRecipientsAll" value="all" {{ old('recipients_mode', 'all') === 'all' ? 'checked' : '' }}>
                                <label class="form-check-label" for="alertRecipientsAll">
                                    {{ __('news.alert.recipients.all') }}
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="recipients_mode" id="alertRecipientsSelected" value="selected" {{ old('recipients_mode') === 'selected' ? 'checked' : '' }}>
                                <label class="form-check-label" for="alertRecipientsSelected">
                                    {{ __('news.alert.recipients.selected') }}
                                </label>
                            </div>
                        </div>

                        <div class="mb-0">
                            <label class="form-label">{{ __('news.alert.fields.select_employees') }}</label>
                            <select name="user_ids[]" class="form-select" multiple size="8" id="alertRecipientsSelect" {{ old('recipients_mode') === 'selected' ? '' : 'disabled' }}>
                                @foreach(($employees ?? collect()) as $employee)
                                    @if($employee->user_id)
                                        <option value="{{ $employee->user_id }}" @selected(collect(old('user_ids', []))->contains($employee->user_id))>
                                            {{ $employee->full_name }}
                                        </option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('common.cancel') }}</button>
                        <button type="submit" class="btn btn-danger">{{ __('news.alert.send') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endif

@if(auth()->user()?->hasPermission('news.update'))
    @php
        $currentSpeed = old('ticker_speed', $settings?->ticker_speed ?? 'medium');
    @endphp
    <div class="modal fade" id="newsSettingsModal" tabindex="-1" aria-labelledby="newsSettingsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <form method="POST" action="{{ route('news.settings.update') }}">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="newsSettingsModalLabel">{{ __('news.settings.title') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <label class="form-label">{{ __('news.settings.ticker_speed') }}</label>
                        <select name="ticker_speed" class="form-select" required>
                            <option value="slow" @selected($currentSpeed === 'slow')>{{ __('news.settings.speed.slow') }}</option>
                            <option value="medium" @selected($currentSpeed === 'medium')>{{ __('news.settings.speed.medium') }}</option>
                            <option value="fast" @selected($currentSpeed === 'fast')>{{ __('news.settings.speed.fast') }}</option>
                            <option value="very_fast" @selected($currentSpeed === 'very_fast')>{{ __('news.settings.speed.very_fast') }}</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('common.cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('common.save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endif
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const allRadio = document.getElementById('alertRecipientsAll');
            const selectedRadio = document.getElementById('alertRecipientsSelected');
            const selectEl = document.getElementById('alertRecipientsSelect');
            if (!allRadio || !selectedRadio || !selectEl) return;

            function updateState() {
                const isSelected = selectedRadio.checked;
                selectEl.disabled = !isSelected;
                if (!isSelected) {
                    Array.from(selectEl.options).forEach((opt) => (opt.selected = false));
                }
            }

            allRadio.addEventListener('change', updateState);
            selectedRadio.addEventListener('change', updateState);
            updateState();
        });
    </script>
@endpush