@extends('adminlte::page')

@section('title', __("clinic-news.index.title"))

@section('content_header')
    <h5><label class="title-underbar">{{ __("clinic-news.index.title") }}</label></h5>
@stop
@section('content')
<style>
    @media (max-width: 767px) {
    .table {
            white-space: normal;
            display: table;
        }
    }
</style>
    <x-admin.success-flush-message />
    <x-admin.error-flush-message />
    <x-admin.validation-message />
    
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-5">
                <form method="GET" action="{{ route('clinic.news.index') }}">
                    <div class="input-group">
                        <select name="news_category_id" id="" class="custom-select">
                            <option value="">{{ __("clinic-news.index.option_category_default") }}</option>
                                @foreach (NewsCategoryHelper::allNewsCategories() as $newsCategory)
                                    @if (isset($inputs['news_category_id']) && (string) $newsCategory['id'] === $inputs['news_category_id'])
                                        <option value="{{ $newsCategory['id'] }}" selected>{{ $newsCategory['name_ja'] }}</option>
                                    @else
                                        <option value="{{ $newsCategory['id'] }}">{{ $newsCategory['name_ja'] }}</option>
                                    @endif
                                @endforeach
                        </select>
                        <div class="input-group-append">
                            <button class="btn button-go" type="submit" style="margin: 0">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                    <div style="margin-top:5px;margin-bottom:15px;">
                        <input id="is_designated_clinic" type="checkbox" name="is_designated_clinic" value="1" {{ isset($inputs['is_designated_clinic']) && $inputs['is_designated_clinic']==1 ? 'checked="checked"' : '' }}>
                        <label for="is_designated_clinic">{{ __("clinic-news.index.is_designated_clinic") }}</label>
                    </div>
                </form>
            </div>
            <div class="card">
                <div class="card-body">
                    <table class="table news">
                        <thead class="thead-light">
                            <tr class="head">
                                <th style="width:10%">{{ __("clinic-news.index.target") }}</th>
                                <th style="width:10%">{{ __("common.news.post_at") }}</th>
                                <th style="width:20%">{{ __("common.news.category") }}</th>
                                <th style="width:60%">{{ __("common.news.title") }}</th>
                            </tr>
                        </thead>
                        <tbody>
                        @if ($news->count() > 0)
                            @foreach ($news as $newsItem)
                                <tr>
                                    <td class="first_col" style="text-align:center;vertical-align:middle;">
                                    @if (strcmp($newsItem->is_designated_clinic, '1') == 0)
                                        <i class="fa fa-user" aria-hidden="true"></i><br>
                                        <span style="font-size: small;">{{ __("clinic-news.index.target_for_me") }}</span>
                                    @else
                                        <i class="fa fa-globe" aria-hidden="true"></i><br>
                                        <span style="font-size: small;">{{ __("clinic-news.index.target_for_all") }}</span>
                                    @endif
                                    </td>
                                    <td style="vertical-align:middle;">{{$newsItem->post_at->format('Y/m/d')}}</td>
                                    <td style="vertical-align:middle;">
                                        <p style="background-color:#{{ $newsItem->newsCategory->background_color }};color:#fff;">{{ $newsItem->newsCategory['name_' . $locale] }}</p>
                                    </td>
                                    <td style="vertical-align:middle;">
                                        <a href="{{ route('clinic.news.show', $newsItem->id) }}">
                                        @if (strcmp($newsItem->is_important, '1') == 0)
                                            <i class="fa fa-exclamation-circle" aria-hidden="true" style="margin-right:5px;color:#b81414;"></i>
                                        @endif
                                            <span>{{$newsItem->title}}</span>
                                        </a>
                                        @if (strcmp($newsItem->is_attached_file, '1') == 0)
                                            <i class="fa fa-paperclip" aria-hidden="true" style="margin-left:5px;"></i>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="4" style="text-align: center;">{{ __("common.news.no_news") }}</td>
                            </tr>
                        @endif
                        </tbody>
                    </table>
                </div>
                <br>
                <div style="margin: 0 auto;">
                  {{ $news->links() }}
                </div>
            </div>
        </div>
    </div>

@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <style>
        table.news td p{
            margin:auto 0;
            text-align:center;
            padding:5px;
            background-color:none;
        }
        @media screen and (max-width: 640px) {
            table.news {
                width: 100%;
            }
            table.news thead{
                display: none;
            }
            table.news td {
                display: block;
                width: 100%;
                border-bottom:none;
                text-align:center;
            }
            table.news td p{
                margin:auto;
                width:90%;
            }
            table.news tr:last-child{
                border-bottom: solid 1px #ccc;
            }
            table.news td.first_col{
                background-color:#e9ecef;
            }
        }
    </style>
@stop