@extends('layout.app')

@section('header')
<link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https:////cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
@endsection

@section('content')
<div class='clearfix'></div>
<div class="row mt-5 mb-5">
    <div class="col-1"></div>
    <div class='col-3'>
        <h5 class="card-title">Navigation</h5>
        <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="/admin">Account Management</a>
              <hr>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/report-managements">Posts Management</a>
                <hr>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/meeting-managements">Annual General Meeting Management</a>
                <hr>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/annual-report-managements">Annual Report Management</a>
            </li>
        </ul>
    </div>
    <div class="col-7">
        <h5 class='h5'>Posts Management
            <button class="btn btn-primary float-right" data-toggle="modal" data-target="#new-post">New Post</button>
        </h5>
        <div class='clearfix'></div>
        <div class='card-content mt-4'>
            <div class='table-responsive'>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Post</th>
                            <th>Link</th>
                            <th>Type</th>
                            <th>Date</th>
                            <th>Last Update</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($posts as $post)
                        <tr>
                            <td>{{$post->post}}</td>
                            <td>{{$post->link}}</td>
                            <td>
                                @if($post->type == 1)
                                Announcement / Press Releases
                                @elseif($post->type == 2)
                                Corporate Governance
                                @elseif($post->type == 3)
                                Financial Information
                                @elseif($post->type == 4)
                                Annual General Meeting
                                @elseif($post->type == 5)
                                Annual Reports
                                @endif
                            </td>
                            <td>{{$post->publish_date}}</td>
                            <td>{{$post->created_at}}</td>
                            <td>    
                                <form method="POST" action="/delete-post/{{$post->id}}" onsubmit="return confirm('Confirm to delete post?')">
                                    @csrf
                                    @method("DELETE")
                                    <button type="submit" class='btn btn-danger'>Delete</button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class='col-1'></div>
</div>
<div class="clearfix"></div>

<!-- Modal -->
<div class="modal fade" id="new-post" tabindex="-1" aria-labelledby="new-post-label" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="new-post-label">New Post</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="/new-post" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Post</label>
                        <input type="text" class="form-control" required name="post" placeholder="Post Name">
                    </div>
                    <div class='form-group'>
                        <label>Type</label>
                        <select class="form-control" name="type">
                            <option value="1">Annoucement / Press Releases</option>
                            <option value="2">Corporate Governance</option>
                            <option value="3">Financial Information</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Date Of Publish</label>
                        <input type="date" name="date" class="form-control" placeholder="Date Of Publish" required value="{{date("Y-m-d")}}">
                    </div>
                    <div class="form-group">
                        <label>File Type</label><br>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="option" id="inlineRadio1" value="0" checked="checked">
                            <label class="form-check-label" for="inlineRadio1">PDF</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="option" id="inlineRadio2" value="1">
                            <label class="form-check-label" for="inlineRadio2">URL</label>
                        </div>
                    </div>
                    <div id="pdf" class="form-group">
                        <label>Attachment</label>
                        <input type="file" class='form-control' name="file">
                    </div>  
                    <div class="form-group" id="url" style="display:none;">
                        <label>URL</label>
                        <input type="url" class="form-control" name="url" placeholder="Please insert link">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    $(document).ready(function(){
        $(".table").DataTable();

        $(".form-check-input").click(function(){
            $("#pdf").hide();
            $("#url").hide();
            if($(this).val() == 0){
                $("#pdf").show();
            }else{
                $("#url").show();
            }
        })
    })
</script>
@endsection