@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'>Annual Report Management
            <button class="btn btn-primary float-right" data-toggle="modal" data-target="#new-post">New Post</button>
        </h5>
        <div class="clearfix mt-3"></div>
        <div class='card-content'>
            <div class='table-responsive'>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Post</th>
                            <th>Link</th>
                            <th>Year</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($reports as $report)
                            <tr>
                                <td>{{$report->post}}</td>
                                <td>{{$report->link}}</td>
                                <td>{{$report->year}}</td>
                                <td>{{$report->created_at}}</td>
                                <td>
                                    <form method="POST" action="/delete-report/{{$report->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-report" 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>Year</label>
                        <select class="form-control" name="year" required>
                            @for($i = date('Y'); $i > intval(date('Y')) - 10 ; $i--)
                                <option value="{{$i}}">{{$i}}</option>
                            @endfor
                        </select>
                    </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