@extends('voyager::master')

@section('page_title', __('voyager::generic.viewing').' '.$dataType->getTranslatedAttribute('display_name_plural'))

@section('page_header')
    <div class="container-fluid">
        <h1 class="page-title">
            <i class="{{ $dataType->icon }}"></i> {{ $dataType->getTranslatedAttribute('display_name_plural') }}
        </h1>
        @can('add', app($dataType->model_name))
            <a href="{{ route('voyager.'.$dataType->slug.'.create', (!empty($typeFilter) && $typeFilter !== 'All') ? ['type' => $typeFilter] : []) }}" class="btn btn-success btn-add-new">
                <i class="voyager-plus"></i> <span>{{ __('voyager::generic.add_new') }}</span>
            </a>
        @endcan
        @can('delete', app($dataType->model_name))
            @include('voyager::partials.bulk-delete')
        @endcan
        @include('voyager::multilingual.language-selector')
    </div>
@stop

@section('content')
    <div class="page-content browse container-fluid">
        @include('voyager::alerts')

        @php
            $showCheckboxColumn = Auth::user()->can('delete', app($dataType->model_name));
        @endphp

        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        {{-- Category Filter Tabs --}}
                        <ul class="nav nav-pills news-category-tabs" style="margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; background: #f8fafc; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0;">
                            <li class="{{ empty($typeFilter) || $typeFilter === 'All' ? 'active' : '' }}">
                                <a href="{{ route('voyager.news.index', array_merge(request()->except('type', 'page'), ['type' => 'All'])) }}" style="border-radius: 6px; font-weight: 600; font-size: 13px; padding: 8px 16px;">
                                    <i class="voyager-list"></i> All Updates
                                    <span class="badge" style="background: {{ empty($typeFilter) || $typeFilter === 'All' ? '#ffffff' : '#64748b' }}; color: {{ empty($typeFilter) || $typeFilter === 'All' ? '#09383A' : '#ffffff' }}; margin-left: 6px;">
                                        {{ $totalNewsCount ?? 0 }}
                                    </span>
                                </a>
                            </li>
                            <li class="{{ ($typeFilter ?? '') === 'News' ? 'active' : '' }}">
                                <a href="{{ route('voyager.news.index', array_merge(request()->except('type', 'page'), ['type' => 'News'])) }}" style="border-radius: 6px; font-weight: 600; font-size: 13px; padding: 8px 16px;">
                                    <i class="voyager-news"></i> In The News
                                    <span class="badge" style="background: {{ ($typeFilter ?? '') === 'News' ? '#ffffff' : '#0d9488' }}; color: {{ ($typeFilter ?? '') === 'News' ? '#0d9488' : '#ffffff' }}; margin-left: 6px;">
                                        {{ $categoryCounts['News'] ?? 0 }}
                                    </span>
                                </a>
                            </li>
                            <li class="{{ ($typeFilter ?? '') === 'Insights' ? 'active' : '' }}">
                                <a href="{{ route('voyager.news.index', array_merge(request()->except('type', 'page'), ['type' => 'Insights'])) }}" style="border-radius: 6px; font-weight: 600; font-size: 13px; padding: 8px 16px;">
                                    <i class="voyager-lightbulb"></i> Insights
                                    <span class="badge" style="background: {{ ($typeFilter ?? '') === 'Insights' ? '#ffffff' : '#0284c7' }}; color: {{ ($typeFilter ?? '') === 'Insights' ? '#0284c7' : '#ffffff' }}; margin-left: 6px;">
                                        {{ $categoryCounts['Insights'] ?? 0 }}
                                    </span>
                                </a>
                            </li>
                            <li class="{{ ($typeFilter ?? '') === 'Blogs' ? 'active' : '' }}">
                                <a href="{{ route('voyager.news.index', array_merge(request()->except('type', 'page'), ['type' => 'Blogs'])) }}" style="border-radius: 6px; font-weight: 600; font-size: 13px; padding: 8px 16px;">
                                    <i class="voyager-documentation"></i> Blogs
                                    <span class="badge" style="background: {{ ($typeFilter ?? '') === 'Blogs' ? '#ffffff' : '#ea580c' }}; color: {{ ($typeFilter ?? '') === 'Blogs' ? '#ea580c' : '#ffffff' }}; margin-left: 6px;">
                                        {{ $categoryCounts['Blogs'] ?? 0 }}
                                    </span>
                                </a>
                            </li>
                            <li class="{{ ($typeFilter ?? '') === 'Newsletter' ? 'active' : '' }}">
                                <a href="{{ route('voyager.news.index', array_merge(request()->except('type', 'page'), ['type' => 'Newsletter'])) }}" style="border-radius: 6px; font-weight: 600; font-size: 13px; padding: 8px 16px;">
                                    <i class="voyager-mail"></i> Newsletter
                                    <span class="badge" style="background: {{ ($typeFilter ?? '') === 'Newsletter' ? '#ffffff' : '#7c3aed' }}; color: {{ ($typeFilter ?? '') === 'Newsletter' ? '#7c3aed' : '#ffffff' }}; margin-left: 6px;">
                                        {{ $categoryCounts['Newsletter'] ?? 0 }}
                                    </span>
                                </a>
                            </li>
                        </ul>

                        <div class="table-responsive">
                            <table id="dataTable" class="table table-hover">
                                <thead>
                                    <tr>
                                        @if($showCheckboxColumn)
                                            <th class="dt-not-orderable" style="width: 25px;">
                                                <input type="checkbox" class="select_all">
                                            </th>
                                        @endif
                                        <th style="width: 100px;">Type</th>
                                        <th>Title</th>
                                        <th style="width: 110px;">Link</th>
                                        <th style="width: 160px;">Pub Logo</th>
                                        <th style="width: 110px;">Pub Date</th>
                                        <th style="width: 100px; text-align: center;">Display Order</th>
                                        <th style="width: 90px;">Status</th>
                                        <th style="width: 100px;">Created At</th>
                                        <th class="actions text-right dt-not-orderable">{{ __('voyager::generic.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($dataTypeContent as $data)
                                        @php
                                            $typeBadgeColor = match(strtolower($data->type ?? 'news')) {
                                                'news'       => '#0d9488',
                                                'insights'   => '#0284c7',
                                                'blogs'      => '#ea580c',
                                                'newsletter' => '#7c3aed',
                                                default      => '#475569',
                                            };
                                            $status = strtolower($data->status ?? 'active');
                                        @endphp
                                        <tr>
                                            @if($showCheckboxColumn)
                                                <td>
                                                    <input type="checkbox" name="row_id" id="checkbox_{{ $data->getKey() }}" value="{{ $data->getKey() }}">
                                                </td>
                                            @endif
                                            <td>
                                                <span class="label" style="background-color: {{ $typeBadgeColor }}; color: #ffffff; font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 4px; display: inline-block;">
                                                    {{ $data->type ?? 'News' }}
                                                </span>
                                            </td>
                                            <td>
                                                <div style="font-weight: 600; color: #1e293b; max-width: 320px; line-height: 1.4;">
                                                    {{ $data->title }}
                                                </div>
                                            </td>
                                            <td>
                                                @if(!empty($data->link))
                                                    <a href="{{ $data->link }}" target="_blank" rel="noopener noreferrer" class="btn btn-default btn-xs" style="color: #0284c7; border-color: #bae6fd; background-color: #f0f9ff; font-weight: 500; font-size: 11px; padding: 3px 8px;" title="{{ $data->link }}">
                                                        <i class="voyager-external"></i> Visit Link
                                                    </a>
                                                @else
                                                    <span class="text-muted" style="font-size: 12px;">—</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if(!empty($data->publication_logo_url))
                                                    <div style="display: flex; align-items: center; gap: 8px;">
                                                        <img src="{{ $data->publication_logo_url }}" alt="Logo" style="max-height: 28px; max-width: 90px; object-fit: contain; background: #ffffff; padding: 2px 4px; border: 1px solid #e2e8f0; border-radius: 4px;">
                                                        <span class="text-muted" style="font-size: 11px; font-family: monospace;">{{ basename($data->publication_logo) }}</span>
                                                    </div>
                                                @else
                                                    <span class="text-muted" style="font-size: 11px;">None</span>
                                                @endif
                                            </td>
                                            <td>
                                                <span style="font-size: 12px; color: #334155; white-space: nowrap;">
                                                    {{ $data->published_at ? \Carbon\Carbon::parse($data->published_at)->format('M d, Y') : '—' }}
                                                </span>
                                            </td>
                                            <td style="text-align: center;">
                                                <span class="badge" style="background: #e2e8f0; color: #0f172a; font-size: 12px; font-weight: 700; padding: 4px 8px;">
                                                    {{ $data->display_order ?? 10 }}
                                                </span>
                                            </td>
                                            <td>
                                                @if(in_array($status, ['active', 'published']))
                                                    <span class="label label-success" style="font-size: 11px; font-weight: 600; padding: 4px 7px; border-radius: 4px;">{{ ucfirst($status) }}</span>
                                                @elseif(in_array($status, ['draft', 'inactive']))
                                                    <span class="label label-warning" style="font-size: 11px; font-weight: 600; padding: 4px 7px; border-radius: 4px;">{{ ucfirst($status) }}</span>
                                                @else
                                                    <span class="label label-default" style="font-size: 11px; font-weight: 600; padding: 4px 7px; border-radius: 4px;">{{ $data->status }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <span style="font-size: 12px; color: #64748b; white-space: nowrap;">
                                                    {{ $data->created_at ? $data->created_at->format('M d, Y') : '—' }}
                                                </span>
                                            </td>
                                            <td class="no-sort no-click bread-actions text-right">
                                                @foreach($actions as $action)
                                                    @if (!method_exists($action, 'massAction'))
                                                        @include('voyager::bread.partials.actions', ['action' => $action])
                                                    @endif
                                                @endforeach
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Single delete modal --}}
    <div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"><i class="voyager-trash"></i> {{ __('voyager::generic.delete_question') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}?</h4>
                </div>
                <div class="modal-footer">
                    <form action="#" id="delete_form" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm" value="{{ __('voyager::generic.delete_confirm') }}">
                    </form>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('javascript')
    <script>
        $(document).ready(function () {
            $('#dataTable').DataTable({
                "order": [],
                "language": {!! json_encode(__('voyager::datatable'), JSON_UNESCAPED_SLASHES) !!},
                "columnDefs": [{"targets": "dt-not-orderable", "searchable": false, "orderable": false}]
            });

            $('.select_all').on('click', function(e) {
                $('input[name="row_id"]').prop('checked', $(this).prop('checked')).trigger('change');
            });
        });

        $('td').on('click', '.delete', function (e) {
            $('#delete_form')[0].action = '{{ route('voyager.'.$dataType->slug.'.destroy', '__id') }}'.replace('__id', $(this).data('id'));
            $('#delete_modal').modal('show');
        });
    </script>
@stop