@extends('layouts.admin')

@section('styles')
<style>
    tr:nth-child(even){
        background-color: #4b79cf !important;
    }
    tr:nth-child(odd){
        background-color: #4269b1 !important;
    }
    tr:first-child{
        background-color: navy  !important;
    }
    td,th{
        padding:2px 5px !important;
    }
    table{
        border:1px solid navy;
        border-radius:5px;
        padding:0;
    }
    th{ color:white; }
</style>

@endsection

@section('content')
<div class="col-md-9 admincontent  justify-content-center">
    <h4>{{ __('King_david') }}</h4>
    <form method="post" action="/admin/king_david" style="padding-bottom: 10px; padding-top:0;">
        @csrf
        New Article: <input type="text" name="heading" placeholder="Heading" required style="background: #a9cfed; border:1px solid white; color: navy;"> <select name="type" required style="height:28px;background: #a9cfed; border:1px solid white; color: navy;"><option style="color:navy;" value="">Select Type</option><option value="article"  style="color:navy;">Text Article</option><option value="scanned"  style="color:navy;">Scanned Article</option><option value="link"  style="color:navy;">Linked Article</option><option value="video"  style="color:navy;">Youtube Video</option></select> <button style="background: none; border:1px dashed white; height:28px;color:white;"> Add <img src="/images/addGallery.png" height='28px' style="margin-top: -5px;"/></button>
    </form>
    @if (session('success'))
        <div class="alert alert-success">
            {!! session('success') !!}
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger">
            {!! session('error') !!}
        </div>
    @endif
    @if ($errors->has('name'))
        <span class="invalid-feedback" role="alert">
            <strong>{{ $errors->first('name') }}</strong>
        </span>
    @endif
    @if ($errors->has('type'))
        <span class="invalid-feedback" role="alert">
            <strong>{{ $errors->first('type') }}</strong>
        </span>
    @endif
    <table class="" style="width:100%;">
        <tbody style="width:100%;">
        <tr>
            <th>Heading</th>
            <th>Type</th>
            <th>url*</th>
            <th>Published</th>
            <th>Visible**</th>
            <th>Created By</th>
            <th> Action*** </th>
        </tr>
        @foreach($king_david as $article)
            <tr>
                <td>{{$article->heading}}</td>
                <td>
                    {{$article->type}}
                </td>
                <td>{{$article->url}}</td>
                <td>{{$article->updated_at}}</td>
                <td>
                    <a href="/admin/king_david/visible/{{$article->id}}">
                        @if($article->visible)
                            <img src="/images/visibleIcon.png" width="20px">
                        @else
                            <img src="/images/invisibleIcon.png" width="20px">
                        @endif
                    </a>
                    </td>
                <td>{{$article->createdBy->name}}
                    {{$article->createdBy->surname}}</td>
                <td>

                        <form method="post" action="/admin/king_david/delete" style="display: inline;">
                            <input type="hidden" name="king_david_id" value="{{$article->id}}">
        @csrf
                        <button style="background: none; border:none;"><image src="/images/deleteIcon.png" width="20px"/></button></form>&nbsp;&nbsp;&nbsp;<a href="/admin/king_david/{{$article->id}}"><img src="/images/editIcon.png" width="20px"></a>
                </td>
            </tr>
        @endforeach
    </tbody>
    </table>
    {{ $king_david->links() }}
    <small>* 
    ** Click icon to change visibility: <img src="/images/visibleIcon.png" width="20px"> (Visble) &nbsp;&nbsp; <img src="/images/invisibleIcon.png" width="20px"> (NOT Visble)<br/>
    *** <img src="/images/editIcon.png" width="20px"> Edit Article
    &nbsp;&nbsp; <image src="/images/deleteIcon.png" width="20px"/> Delete Article
    </small>
    <br/><small style="color:#ff8355;"><b>NOTES: <span style="display:inline-block;vertical-align: top;padding-top:3px;">
    Delete can not be undone.</span></b></small>
</div>
@endsection