@extends('admin.layouts.app')
@section('title','Notice — '.$notice->title)
@section('breadcrumb')
    <span>/</span> <a href="{{ route('admin.notices.index') }}" style="color:inherit;text-decoration:none;">Notice Board</a>
    <span>/</span> {{ Str::limit($notice->title,30) }}
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>{{ $notice->title }}</h1>
        <p class="page-subtitle">Posted by {{ $notice->createdBy->name ?? 'System' }} on {{ $notice->created_at->format('d M Y, h:i A') }}</p>
    </div>
    <div class="d-flex gap-2">
        @if(auth()->user()->hasPermission('notices.edit'))
        <a href="{{ route('admin.notices.edit',$notice) }}" class="btn btn-primary"><i class="fas fa-edit me-2"></i>Edit</a>
        @endif
        <a href="{{ route('admin.notices.index') }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-2"></i>Back</a>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h6 class="mb-0 fw-700"><i class="fas fa-bullhorn text-warning me-2"></i>Notice Content</h6>
                @if($notice->status === 'active')
                    <span class="badge bg-success">Active</span>
                @else
                    <span class="badge bg-secondary">Inactive</span>
                @endif
            </div>
            <div class="card-body">
                <p style="white-space:pre-wrap;font-size:14px;line-height:1.7;">{{ $notice->description }}</p>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card mb-3">
            <div class="card-header"><h6 class="mb-0 fw-700"><i class="fas fa-bullseye text-danger me-2"></i>Target Audience</h6></div>
            <div class="card-body" style="font-size:12px;">
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">Flash To</span>
                    <span>{{ ['all'=>'All Users','department'=>'Department','role'=>'Role','specific_user'=>'Specific User'][$notice->flash_to] ?? ucfirst($notice->flash_to) }}</span>
                </div>
                @if($notice->targetDepartment)
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">Department</span><span>{{ $notice->targetDepartment->name }}</span>
                </div>
                @endif
                @if($notice->targetRole)
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">Role</span><span>{{ $notice->targetRole->name }}</span>
                </div>
                @endif
                @if($notice->targetUser)
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">User</span><span>{{ $notice->targetUser->name }}</span>
                </div>
                @endif
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">Flash Start</span><span>{{ $notice->flash_start_date?->format('d M Y') ?? '—' }}</span>
                </div>
                <div class="d-flex justify-content-between py-1">
                    <span class="text-muted">Flash End</span><span>{{ $notice->flash_end_date?->format('d M Y') ?? '—' }}</span>
                </div>
            </div>
        </div>

        <div class="card" style="{{ $notice->isFlashingNow() ? 'background:#f0fdf4;border:1.5px solid #bbf7d0;' : 'background:#f8fafc;' }}">
            <div class="card-body text-center" style="font-size:13px;">
                @if($notice->isFlashingNow())
                    <i class="fas fa-broadcast-tower text-success mb-1" style="font-size:20px;"></i>
                    <div class="fw-700 text-success">Currently Flashing</div>
                @else
                    <i class="fas fa-pause-circle text-muted mb-1" style="font-size:20px;"></i>
                    <div class="fw-700 text-muted">Not Flashing</div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection