@extends('admin.layouts.app')
@section('title','Notice Board')
@section('breadcrumb') <span>/</span> Notice Board @endsection

@section('content')
<div class="page-header">
    <div><h1>Notice Board</h1><p class="page-subtitle">Post and manage notices for users and departments</p></div>
    @if(auth()->user()->hasPermission('notices.create'))
    <a href="{{ route('admin.notices.create') }}" class="btn btn-primary">
        <i class="fas fa-plus me-2"></i>Post Notice
    </a>
    @endif
</div>

<!-- Filters -->
<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-4"><input type="text" name="search" class="form-control" placeholder="Search by title..." value="{{ request('search') }}"></div>
            <div class="col-md-2">
                <select name="status" class="form-select">
                    <option value="">All Status</option>
                    <option value="active"   {{ request('status')==='active'?'selected':'' }}>Active</option>
                    <option value="inactive" {{ request('status')==='inactive'?'selected':'' }}>Inactive</option>
                </select>
            </div>
            <div class="col-md-2">
                <select name="flash_to" class="form-select">
                    <option value="">All Targets</option>
                    <option value="all"           {{ request('flash_to')==='all'?'selected':'' }}>All Users</option>
                    <option value="department"    {{ request('flash_to')==='department'?'selected':'' }}>Department</option>
                    <option value="role"          {{ request('flash_to')==='role'?'selected':'' }}>Role</option>
                    <option value="specific_user" {{ request('flash_to')==='specific_user'?'selected':'' }}>Specific User</option>
                </select>
            </div>
            <div class="col-md-4 d-flex gap-2">
                <button class="btn btn-primary flex-grow-1"><i class="fas fa-search me-1"></i>Search</button>
                <a href="{{ route('admin.notices.index') }}" class="btn btn-outline-secondary">Reset</a>
            </div>
        </form>
    </div>
</div>

<!-- Notices Table -->
<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>All Notices</h6>
        <span class="badge bg-warning text-dark">{{ $notices->total() }} total</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead style="background:#f8fafc;">
                    <tr>
                        <th class="ps-3">S.N.</th><th>Title</th><th>Posted Date</th>
                        <th>Flash Start</th><th>Flash End</th><th>Target</th>
                        <th>Flashing?</th><th>Status</th><th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($notices as $i => $notice)
                    <tr>
                        <td class="ps-3 text-muted">{{ ($notices->currentPage()-1)*$notices->perPage()+$i+1 }}</td>
                        <td>
                            <div style="font-weight:600;font-size:13px;">{{ $notice->title }}</div>
                            <div style="font-size:11px;color:#64748b;">{{ Str::limit($notice->description,60) }}</div>
                        </td>
                        <td style="font-size:12px;color:#64748b;">{{ $notice->created_at->format('d M Y') }}</td>
                        <td style="font-size:12px;">{{ $notice->flash_start_date?->format('d M Y') ?? '—' }}</td>
                        <td style="font-size:12px;">{{ $notice->flash_end_date?->format('d M Y') ?? '—' }}</td>
                        <td>
                            @php
                            $targetLabels = [
                                'all'           => ['All Users','primary'],
                                'department'    => [$notice->targetDepartment?->name ?? 'Dept','info'],
                                'role'          => [$notice->targetRole?->name ?? 'Role','warning'],
                                'specific_user' => [$notice->targetUser?->name ?? 'User','secondary'],
                            ];
                            [$label,$color] = $targetLabels[$notice->flash_to] ?? ['Unknown','secondary'];
                            @endphp
                            <span class="badge bg-{{ $color }}">{{ $label }}</span>
                        </td>
                        <td>
                            @if($notice->isFlashingNow())
                            <span class="badge bg-success"><i class="fas fa-broadcast-tower me-1"></i>Live</span>
                            @else
                            <span class="badge bg-light text-dark border">Not Flashing</span>
                            @endif
                        </td>
                        <td>
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input status-toggle" type="checkbox"
                                    {{ $notice->status==='active'?'checked':'' }}
                                    data-url="{{ route('admin.notices.toggle-status',$notice) }}"
                                    @if(!auth()->user()->hasPermission('notices.edit')) disabled @endif>
                            </div>
                        </td>
                        <td class="text-center">
                            <div class="d-flex gap-1 justify-content-center">
                                <a href="{{ route('admin.notices.show',$notice) }}" class="btn btn-sm btn-outline-info"><i class="fas fa-eye"></i></a>
                                @if(auth()->user()->hasPermission('notices.edit'))
                                <a href="{{ route('admin.notices.edit',$notice) }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i></a>
                                @endif
                                @if(auth()->user()->hasPermission('notices.delete'))
                                <button class="btn btn-sm btn-outline-danger" onclick="confirmDelete('{{ route('admin.notices.destroy',$notice) }}','{{ $notice->title }}')"><i class="fas fa-trash"></i></button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-5">
                            <i class="fas fa-bullhorn d-block mb-2" style="font-size:32px;color:#cbd5e1;"></i>
                            <p class="text-muted mb-2">No notices posted yet</p>
                            @if(auth()->user()->hasPermission('notices.create'))
                            <a href="{{ route('admin.notices.create') }}" class="btn btn-sm btn-primary">
                                <i class="fas fa-plus me-1"></i>Post First Notice
                            </a>
                            @endif
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($notices->hasPages())
    <div class="card-footer bg-white py-3">{{ $notices->links() }}</div>
    @endif
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.status-toggle').forEach(t => {
    t.addEventListener('change', function() {
        const el = this;
        fetch(this.dataset.url, { method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Content-Type':'application/json'} })
        .then(r=>r.json()).then(d => {
            if(d.success) toastr.success(d.message);
            else { el.checked=!el.checked; toastr.error('Failed'); }
        });
    });
});
</script>
@endpush