@extends('layouts.app')

@section('title', 'Meja Bantuan')
@section('bantuan', 'm-menu__item--active')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
@endsection

@section('content')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

@section('js')
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
@endsection

<div class="row">
    <div class="col-lg-12">
        <div class="m-portlet">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon m--hide">
                            <i class="la la-gear"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            SSIPR Meja Bantuana
                        </h3>
                    </div>
                </div>
            </div>
            @role(['super_admin','rakyat'])
            <form id="profile_form" class="m-form m-form--label-align-right" action="{{ url('bantuan/hantar') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="m-portlet__body">
                    <div class="m-form__section m-form__section--first">
                        <div class="m-form__heading">
                            <h3 class="m-form__heading-title">
                                Laporan Masalah:
                            </h3>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Kategori:
                            </label>
                            <div class="col-lg-10">
                                <div class="form-group">
                                    <select class="form-control" id="iprlist" name="kategori" required>
                                            <option value="umum">Laporan Umum</option>
                                            <option value="dasar">Dasar</option>
                                            <option value="teknikal">Teknikal</option>
                                            @foreach($iprs as $ipr)
                                                <option value="{{ $ipr->name }}">{{ $ipr->display_name }}</option>
                                            @endforeach
                                    </select>
                                </div> 
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Tajuk:
                            </label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control m-input" name="tajuk_masalah" placeholder="Tajuk Masalah" value="" id="tajuk" required>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Muat Naik Dokumen:
                            </label>
                            <div class="col-lg-10">
                                <input type="file" class="form-control" id="id_doc_masalah" name="doc_masalah" accept=".jpg,.jpeg,.png,.pdf" value="">
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                Laporan Masalah:
                            </label>
                            <div class="col-lg-10">
                                <div class="form-group">
                                    <textarea name="body_masalah" id="summernote"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <center>
                                    <button type="submit" class="btn btn-primary" id="hantar">
                                        Hantar Laporan
                                    </button>
                                </center>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            @endrole

            @role(['super_admin', 'admin'])
            <!-- admin -->
            <hr>
            <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
            <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
            <div class="m-portlet__body">
                <div class="m-form__section m-form__section--first">
                    <div class="m-form__heading">
                        <h4 class="m-form__heading-title" style="color: #f4516c; margin-bottom: 20px">
                            Laporan Masalah:
                        </h4>
                    </div>
                    <div class="table-responsive m-2">
                        <table id="jdatatable" class="" style="width:100%">
                            <thead class="bg-dark text-white">
                                <tr>
                                    <th>ID</th>
                                    <th>No. Kad Pengenalan</th>
                                    <th>Waktu</th>
                                    <th>Kategori</th>
                                    <th>Tajuk Laporan</th>
                                    <th>Status</th>
                                    <th>Lihat</th>
                                </tr>
                            </thead>
                            {{-- <tbody>
                                @foreach($datas as $data)
                                <tr>
                                    <td>{{ $data->id }}</td>
                                    <td>{{ $data->ic }}</td>
                                    <td>{{ \Carbon\Carbon::parse($data->date_created)->format('d-m-Y (g:i A)') }}</td>
                                    <td>{{ !empty($data->display_name) ? $data->display_name : 'Laporan Umum' }}</td>
                                    <td>{{ $data->tajuk_laporan }}</td>
                                    <td>{{ $data->feedback_status == 1 ? 'Dalam Proses' : ( $data->feedback_status == 2 ? 'Selesai' : 'Baru' ) }}</td>
                                    <td><a href="{{ url('bantuan/details') }}/{{ $data->id }}" class="btn btn-primary btn-sm">Lihat</a></td>
                                </tr>
                                @endforeach
                            </tbody> --}}
                        </table>
                    </div>
                </div>
            </div>

            {{-- <script>
                //data table
                $('#jdatatable').DataTable({
                    "order": [[ 0, "desc" ]]
                });
            </script> --}}
            @endrole
        </div>
    </div>
</div>
    
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
    $(function () {
        $('#jdatatable').dataTable({
            scrollX: true,
            processing: true,
            paging: true,
            pageLength: 10,
            // lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
            serverSide: true,
            ajax: {
                url:'{{ url('bantuan/list') }}',
            },
            searching: true,
            language: {
                emptyTable: "Tiada Data"
            },
            columns: [
                { data: 'id', name: 'feedback_sistem.id' },
                { data: 'ic', name: 'feedback_sistem.ic' },
                { data: 'created_at', name: 'feedback_sistem.created_at' },
                { data: 'display_name', name: 'ipr.display_name' },
                { data: 'tajuk_laporan', name: 'feedback_sistem.tajuk_laporan' },
                { data: 'feedback_status', name: 'feedback_sistem.feedback_status' },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ],
        });
    })

    function showDetail(id) {
        window.location = "bantuan/details/" + id
    }

    $('#summernote').summernote({
        height: 400,
        toolbar: [
            [ 'style', [ 'style' ] ],
            [ 'font', [ 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear'] ],
            [ 'fontname', [ 'fontname' ] ],
            [ 'fontsize', [ 'fontsize' ] ],
            [ 'color', [ 'color' ] ],
            [ 'para', [ 'ol', 'ul', 'paragraph', 'height' ] ],
            [ 'table', [ 'table' ] ],
            [ 'insert', [ 'link'] ],
            [ 'view', [ 'undo', 'redo', 'fullscreen', 'codeview', 'help' ] ]
        ]
    });

    $("#hantar").click(function(){
    if($('#iprlist').val() && $('#tajuk').val() && $('#summernote').val() && $('#id_doc_masalah').val()){
            document.getElementById("hantar").innerHTML = "<i class='fa fa-spinner fa-spin'></i>";
        }
    });
</script>
@endsection