@extends('employee.layouts.app')
@section('title', get_setting('site_name').' | '.__('Notice Board'))
@section('content')
    <style>
        .emp-notice-wrap .card {
            border-radius: 14px;
            border: 1px solid #edf0f6;
            box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04);
        }
        .emp-notice-wrap .card-header {
            background: #fff;
            border-bottom: 1px solid #edf0f6;
            font-weight: 700;
            padding: 0.9rem 1.15rem;
        }
        .emp-notice-wrap .card-body.p-2 { padding: 0.5rem !important; }
        .emp-notice-wrap .card-footer {
            background: #fff;
            border-top: 1px solid #edf0f6;
            padding: 0.75rem 1.15rem;
        }
        .emp-notice-stat {
            background: #fff;
            border: 1px solid #edf0f6;
            border-radius: 10px;
            padding: 10px 14px;
            text-align: center;
            height: 100%;
        }
        .emp-notice-stat .num { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
        .emp-notice-stat .lbl {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #64748b;
        }
        .emp-notice-table { margin-bottom: 0; font-size: 13px; }
        .emp-notice-table thead th {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(15, 23, 42, .65);
            border-top: 0;
            white-space: nowrap;
            padding: 0.75rem 0.85rem;
        }
        .emp-notice-table tbody td {
            vertical-align: middle;
            padding: 0.85rem;
        }
        .emp-notice-table .emp-notice-empty {
            padding: 2rem 1rem !important;
            text-align: center;
            color: #64748b;
        }
        .emp-notice-title { font-weight: 700; color: #0f172a; }
        .emp-notice-excerpt {
            max-width: 420px;
            color: #475569;
            font-size: 13px;
            line-height: 1.45;
            white-space: normal;
            word-break: break-word;
            margin-top: 0.2rem;
        }
        .emp-notice-meta { font-size: 12px; color: #64748b; }
        .emp-notice-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }
        .emp-notice-badge.global { background: rgba(14, 165, 233, .12); color: #0369a1; }
        .emp-notice-badge.branch { background: rgba(99, 102, 241, .12); color: #4338ca; }
        .emp-notice-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
        .emp-notice-modal .modal-content {
            border: none;
            border-radius: 12px;
            box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15);
        }
        .emp-notice-modal .modal-header,
        .emp-notice-modal .modal-footer { border-color: #edf0f6; }
        .emp-notice-detail-title { font-weight: 800; color: #0f172a; }
        .emp-notice-detail-content {
            background: #f8fafc;
            border: 1px solid #edf0f6;
            border-radius: 10px;
            padding: 1rem 1.15rem;
            font-size: 14px;
            line-height: 1.6;
            color: #334155;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 420px;
            overflow-y: auto;
        }
    </style>

    <div class="container-fluid emp-notice-wrap">
        <div class="row mt-3">
            <div class="col-12 col-xl-10 mx-auto">

                <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                    <div>
                        <h4 class="page-title mb-0">{{ __('Notice board') }}</h4>
                        <p class="text-muted mb-0 small">{{ __('Company announcements for your branch and organization-wide notices.') }}</p>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="col-6 col-md-4 mb-2">
                        <div class="emp-notice-stat">
                            <div class="num text-primary">{{ (int) ($noticeStats->total ?? 0) }}</div>
                            <div class="lbl">{{ __('Notices') }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 mb-2">
                        <div class="emp-notice-stat">
                            <div class="num text-success">{{ (int) ($noticeStats->with_attachment ?? 0) }}</div>
                            <div class="lbl">{{ __('With attachment') }}</div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4 mb-2">
                        <div class="emp-notice-stat">
                            <div class="num text-info">{{ (int) ($noticeStats->all_branch_count ?? 0) }}</div>
                            <div class="lbl">{{ __('All-branch') }}</div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <span><i class="fas fa-bullhorn mr-1 text-muted"></i> {{ __('Notice list') }}</span>
                        @if($notices->total() > 0)
                            <span class="badge badge-light text-muted font-weight-normal">
                                {{ __('Showing') }} {{ $notices->firstItem() }}–{{ $notices->lastItem() }} {{ __('of') }} {{ $notices->total() }}
                            </span>
                        @endif
                    </div>

                    <div class="card-body p-2">
                        <div class="table-responsive">
                            <table class="table table-hover emp-notice-table">
                                <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('Notice') }}</th>
                                    <th>{{ __('Scope') }}</th>
                                    <th class="text-center">{{ __('Attachment') }}</th>
                                    <th>{{ __('Posted') }}</th>
                                    <th class="text-right">{{ __('Action') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($notices as $notice)
                                    <tr>
                                        <td class="text-muted font-weight-bold">{{ $notices->firstItem() + $loop->index }}</td>
                                        <td>
                                            <div class="emp-notice-title">{{ $notice->title }}</div>
                                            <div class="emp-notice-excerpt">{{ $notice->plainContentExcerpt(160) }}</div>
                                        </td>
                                        <td>
                                            @if($notice->warehouse_id === null)
                                                <span class="emp-notice-badge global">{{ __('All branches') }}</span>
                                            @else
                                                <span class="emp-notice-badge branch">{{ $notice->warehouse?->name ?? __('Branch') }}</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if($notice->attach)
                                                <a class="btn btn-sm btn-light"
                                                   href="{{ asset('storage/'.$notice->attach) }}"
                                                   target="_blank"
                                                   title="{{ __('Download') }}">
                                                    <i class="fas fa-file-download"></i>
                                                </a>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="emp-notice-meta">{{ optional($notice->created_at)->format('d M Y') }}</div>
                                            <div class="emp-notice-meta">{{ optional($notice->created_at)->format('h:i A') }}</div>
                                        </td>
                                        <td class="text-right emp-notice-actions">
                                            <button type="button"
                                                    class="btn btn-sm btn-primary"
                                                    onclick="Notice_show({{ $notice->id }})"
                                                    title="{{ __('View') }}">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="emp-notice-empty">{{ __('No notices available.') }}</td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    @if($notices->hasPages())
                        <div class="card-footer">{{ $notices->links() }}</div>
                    @endif
                </div>

            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div class="modal fade emp-notice-modal" id="notice_show" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bold">{{ __('Notice details') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="data_show"></div>
                    @include('spiner')
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function Notice_show(id) {
            $('#data_show').html('');
            $('#loadingOverlay').show();
            $('#notice_show').modal('show');

            $.ajax({
                url: @json(route('employee.notice.show')),
                method: 'GET',
                data: { id: id },
                success: function (res) {
                    $('#loadingOverlay').hide();
                    $('#data_show').html(res);
                },
                error: function () {
                    $('#loadingOverlay').hide();
                    $('#data_show').html('<div class="alert alert-danger mb-0">{{ __('Could not load notice.') }}</div>');
                }
            });
        }
    </script>
@endsection