<?php

use Livewire\Component;
use App\Models\BreakingNews;

new class extends Component
{
    public $breakingNewsId;
    public $content = '';
    public $is_active = true;

    public function mount(BreakingNews $breakingNews)
    {
        $this->breakingNewsId = $breakingNews->id;
        $this->content = $breakingNews->content;
        $this->is_active = $breakingNews->is_active;
    }

    public function render()
    {
        if (!auth()->user()->can('edit breaking news')) {
            abort(403);
        }
        return $this->view()->layout('layouts::auth');
    }

    protected $rules = [
        'content' => 'required|string',
        'is_active' => 'boolean',
    ];

    public function update()
    {
        if (!auth()->user()->can('edit breaking news')) {
            session()->flash('error', 'Unauthorized.');
            return;
        }

        $this->validate();

        $breakingNews = BreakingNews::find($this->breakingNewsId);
        if ($breakingNews) {
            $breakingNews->update([
                'content' => $this->content,
                'is_active' => $this->is_active,
            ]);
        }

        session()->flash('message', 'Breaking news updated successfully.');
        return redirect()->route('admin.breaking');
    }
};
?>

<div class="max-content">
    <header class="mb-10">
        <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Edit Breaking News</h1>
        <p class="text-sm text-gray-500 mt-1">Update breaking news content and status.</p>
    </header>

    @if (session()->has('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('error') }}</span>
        </div>
    @endif

    <div class="card p-6">
        <form wire:submit.prevent="update" class="space-y-6">
            <div>
                <label class="block text-[11px] font-bold text-gray-500 uppercase tracking-wider mb-1.5">Content <span class="text-red-400">*</span></label>
                <textarea wire:model="content" rows="4" class="input-field w-full text-sm"
                    placeholder="Enter breaking news content..."></textarea>
                @error('content') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" wire:model="is_active" class="rounded border-gray-300 text-[#99BC85] focus:ring-[#99BC85]">
                    <span class="text-sm font-semibold text-gray-700">Active</span>
                </label>
                <p class="text-[10px] text-gray-400 mt-1">Inactive breaking news will not be displayed on the frontend.</p>
            </div>

            <div class="flex gap-3 pt-4 border-t border-gray-100">
                <button type="submit" wire:loading.attr="disabled"
                    class="px-6 py-2 text-sm font-bold text-white rounded-md transition-colors"
                    style="background-color:#99BC85;">
                    <span wire:loading.remove>Update</span>
                    <span wire:loading>Updating...</span>
                </button>
                <a href="{{ route('admin.breaking') }}" class="px-4 py-2 text-sm font-semibold text-gray-600 bg-white border border-gray-200 rounded-md hover:bg-gray-50">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
