@extends('layouts.app')
@include('plugins.datatables')

@section('content')
<!-- START JUMBOTRON -->
<div class="jumbotron" data-pages="parallax">
    <div class=" container-fluid container-fixed-lg sm-p-l-0 sm-p-r-0">
        <div class="inner">
            <!-- START BREADCRUMB -->
            {{ Breadcrumbs::render('admin.master.parameter-list') }}
            <!-- END BREADCRUMB -->
            <div class="row">
                <div class="col-xl-12 col-lg-12 ">
                    <!-- START card -->
                    <div class="card card-transparent">
                        <div class="card-block p-t-0">
                            <h3 class='m-t-0'>Master Data - Parameter List</h3>
                            <p class="small hint-text m-t-5">
                                {{ config('global')['system_name'] }} master data parameter list can be done below
                            </p>

                            <form class="p-t-10" id="form-project" role="form" autocomplete="off" method="post" action="{{ route('admin.master.parameter-list') }}" novalidate>
                                <div class="form-group-attached">
                                    <div class="row clearfix">
                                        <div class="col-md-4">
                                            <div class="form-group form-group-default form-group-default-custom form-group-default-select2">
                                                <label><span>Group</span></label>
                                                <select id="group_code_filter" name="group_code_filter" class="full-width autoscroll" data-init-plugin="select2">
                                                    <option value="" selected="" >Choose one..</option>
                                                    @foreach($parameterGroupList as $group_code_index => $group_val)
                                                    <option value="{{ $group_code_index }}">{{ $group_val }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                    <!-- END card -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END JUMBOTRON -->

<!-- START CONTAINER FLUID -->
<div class=" container-fluid container-fixed-lg bg-white">
    <!-- START card -->
    <div class="card card-transparent">
        <div class="card-header px-0 search-on-button">
            <!-- <div class="card-title">
                <button onclick="add()" class="btn btn-success btn-cons"><i class="fa fa-plus m-r-5"></i> Jawatan</button>
            </div> -->
            <div class="pull-right">
                <div class="col-xs-12">
                    <input type="text" id="search-table" class="form-control pull-right" placeholder="Search..">
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="card-block m-b-20">
            <table class="table table-hover" id="table">
                <thead>
                    <tr>
                        <th class="fit">No.</th>
                        <th>Name</th>
                        <th>Name Malay</th>
                        <th>Group</th>
                        <th>Code</th>
                        <th>Description</th>
                        <th>Last Modified Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <!-- END card -->
</div>
<!-- END CONTAINER FLUID -->

<!-- Modal -->
<div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-labelledby="addModalTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addModalTitle">Add <span class="bold">Parameter List</span></h5>
                <small class="text-muted">Please fill in below field input.</small>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body m-t-20">
                <form id='form-add' role="form" method="post" action="{{ route('admin.master.parameter-list') }}">
                    @include('components.input', [
                        'name' => 'name',
                        'label' => 'Name',
                        'mode' => 'required',
                        'value' => ''
                    ])
                    @include('components.input', [
                        'name' => 'name_bm',
                        'label' => 'Name (Malay)',
                        'mode' => 'required',
                        'value' => ''
                    ])
                    @include('components.select', [
                        'name' => 'group_code',
                        'label' => 'Group',
                        'mode' => 'required',
                        'data' => $parameterGroupList,
                        'selected' => ''
                    ])
                    @include('components.input', [
                        'name' => 'code',
                        'label' => 'Code',
                        'mode' => 'required',
                        'class' => 'text-uppercase',
                        'value' => ''
                    ])
                    @include('components.textarea', [
                        'name' => 'description',
                        'label' => 'Description',
                        'mode' => '',
                        'value' => ''
                    ])
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-info" onclick="submitForm('form-add')"><i class="fa fa-check m-r-5"></i> Submit</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script type="text/javascript">
var table = $('#table');

var settings = {
    "processing": true,
    "serverSide": true,
    "deferRender": true,
    "ajax": "{{ fullUrl() }}",
    "columns": [
        { data: 'index', defaultContent: '', orderable: false, searchable: false, render: function (data, type, row, meta) {
            return meta.row + meta.settings._iDisplayStart + 1;
        }},
        { data: "name", name: "name"},
        { data: "name_bm", name: "name_bm"},
        { data: "group", name: "group"},
        { data: "code", name: "code", defaultContent: "-", render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "description", name: "description", defaultContent: "-", render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "updated_at", name: "updated_at"},
        { data: "action", name: "action", orderable: false, searchable: false},
    ],
    "columnDefs": [
        { className: "nowrap", "targets": [ 6 ] }
    ],
    "dom": "Blfrtip",
    "buttons": [
        {
            text: '<i class="fa fa-plus m-r-5"></i> Parameter List',
            className: 'btn btn-success btn-cons',
            action: function ( e, dt, node, config ) {
                add();
            }
        },
        {
            text: '<i class="fa fa-print m-r-5"></i> Print',
            extend: 'print',
            className: 'btn btn-default btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="fa fa-download m-r-5"></i> Excel',
            extend: 'excelHtml5',
            className: 'btn btn-default btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="fa fa-download m-r-5"></i> PDF',
            extend: 'pdfHtml5',
            className: 'btn btn-default btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
    ],
    "destroy": true,
    "scrollCollapse": true,
    "oLanguage": {
        "sEmptyTable":      "No result",
        "sInfo":            "Showing _START_ to _END_ from _TOTAL_ record",
        "sInfoEmpty":       "Showing 0 record",
        "sInfoFiltered":    "(Filtered from total _MAX_ record)",
        "sInfoPostFix":     "",
        "sInfoThousands":   ",",
        "sLengthMenu":      "Show _MENU_ record",
        "sLoadingRecords":  "Processed...",
        "sProcessing":      "Processing...",
        "sSearch":          "Searching:",
       "sZeroRecords":      "No record matches found.",
       "oPaginate": {
           "sFirst":        "First",
           "sPrevious":     "Previous",
           "sNext":         "Next",
           "sLast":         "Last"
       },
       "oAria": {
           "sSortAscending":  ": activated to ascending column order",
           "sSortDescending": ": activated to descending column order"
       }
    },
    "iDisplayLength": 10
};

table.dataTable(settings);


$("select#group_code_filter").on('change', function() {

    var form = $("#form-project");

    var settings = {
        "processing": true,
        "serverSide": true,
        "deferRender": true,
        "ajax": form.attr('action')+"?"+form.serialize(),
        "columns": [
            { data: 'index', defaultContent: '', orderable: false, searchable: false, render: function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            }},
            { data: "name", name: "name"},
            { data: "name_bm", name: "name_bm"},
            { data: "group", name: "group"},
            { data: "code", name: "code", defaultContent: "-", render: function(data, type, row){
                return $("<div/>").html(data).text();
            }},
            { data: "description", name: "description", defaultContent: "-", render: function(data, type, row){
                return $("<div/>").html(data).text();
            }},
            { data: "updated_at", name: "updated_at"},
            { data: "action", name: "action", orderable: false, searchable: false},
        ],
        "columnDefs": [
            { className: "nowrap", "targets": [ 6 ] }
        ],
        "dom": "Blfrtip",
        "buttons": [
            {
                text: '<i class="fa fa-plus m-r-5"></i> Parameter List',
                className: 'btn btn-success btn-cons',
                action: function ( e, dt, node, config ) {
                    add();
                }
            },
            {
                text: '<i class="fa fa-print m-r-5"></i> Print',
                extend: 'print',
                className: 'btn btn-default btn-sm',
                exportOptions: {
                    columns: ':visible:not(.nowrap)'
                }
            },
            {
                text: '<i class="fa fa-download m-r-5"></i> Excel',
                extend: 'excelHtml5',
                className: 'btn btn-default btn-sm',
                exportOptions: {
                    columns: ':visible:not(.nowrap)'
                }
            },
            {
                text: '<i class="fa fa-download m-r-5"></i> PDF',
                extend: 'pdfHtml5',
                className: 'btn btn-default btn-sm',
                exportOptions: {
                    columns: ':visible:not(.nowrap)'
                }
            },
        ],
        "destroy": true,
        "scrollCollapse": true,
        "oLanguage": {
            "sEmptyTable":      "No result",
            "sInfo":            "Showing _START_ to _END_ from _TOTAL_ record",
            "sInfoEmpty":       "Showing 0 record",
            "sInfoFiltered":    "(Filtered from total _MAX_ record)",
            "sInfoPostFix":     "",
            "sInfoThousands":   ",",
            "sLengthMenu":      "Show _MENU_ record",
            "sLoadingRecords":  "Processed...",
            "sProcessing":      "Processing...",
            "sSearch":          "Searching:",
           "sZeroRecords":      "No record matches found.",
           "oPaginate": {
               "sFirst":        "First",
               "sPrevious":     "Previous",
               "sNext":         "Next",
               "sLast":         "Last"
           },
           "oAria": {
               "sSortAscending":  ": activated to ascending column order",
               "sSortDescending": ": activated to descending column order"
           }
        },
        "iDisplayLength": 10
    };

    table.dataTable(settings);


})

// search box for table
$('#search-table').keyup(function() {
    table.fnFilter($(this).val());
});

function edit(id) {
    $("#modal-div").load("{{ route('admin.master.parameter-list') }}/"+id);
}

function add() {
    $('#modal-add').modal('show');
    $('.modal form').trigger("reset");
    $('.modal form').validate();
}

$("#form-add").submit(function(e) {
    e.preventDefault();
    var form = $(this);

    if(!form.valid())
       return;

    $.ajax({
        url: form.attr('action'),
        method: form.attr('method'),
        data: new FormData(form[0]),
        dataType: 'json',
        async: true,
        contentType: false,
        processData: false,
        success: function(data) {
            swal(data.title, data.message, data.status);
            $("#modal-add").modal("hide");
            table.api().ajax.reload(null, false);
        }
    });
});

function remove(id) {
    swal({
        title: "Delete Data",
        text: "Data that have been deleted cannot be recovered. Proceed?",
        icon: "warning",
        buttons: ["Cancel", { text: "Delete", closeModal: false }],
        dangerMode: true,
    })
    .then((confirm) => {
        if (confirm) {
            $.ajax({
                url: '{{ route('admin.master.parameter-list') }}/'+id,
                method: 'delete',
                dataType: 'json',
                async: true,
                contentType: false,
                processData: false,
                success: function(data) {
                    swal(data.title, data.message, data.status);
                    table.api().ajax.reload(null, false);
                }
            });
        }
    });
}
</script>
@endpush