@extends('layouts/gnr_layout')
@section('title', '| Menu')
@section('content')
@include('successMsg')

@php
    $pageNo = isset($_GET['page']) ? $_GET['page'] : 1;
    $moduleSelected = isset($_GET['filModule']) ? $_GET['filModule'] : null;
@endphp

<style type="text/css">
    #searchButton{
        font-size: 12px;
        margin-top: 20px;
    }
</style>

<div class="row">
<div class="col-md-12">
<div class="" style="">
    <div class="">
      <div class="panel panel-default" style="background-color:#708090;">
        <div class="panel-heading" style="padding-bottom:0px">
          <div class="panel-options">
              {{-- <a href="{{url('addMenu/')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Menu</a> --}}
              <a href="javascript:;" class="btn btn-info pull-right sync-modal addViewBtn"><i class="glyphicon glyphicon-refresh addIcon"></i>Sync Menu</a>
          </div>
          <h1 align="center" style="font-family: Antiqua;letter-spacing: 2px"><font color="white">Menu List</font></h1>
        </div>
        <div class="panel-body panelBodyView"> 

            <!-- Filtering, Sync Start -->
                {!! Form::open(array('url' => 'viewMenuList', 'role' => 'form', 'class'=>'form-horizontal form-groups', 'id' => 'filterFormId', 'method'=>'get')) !!}
                <div class="row">
                    <div class="col-md-12">

                        <div class="col-md-1">
                            <div class="form-group">
                                <div class="col-md-12">
                                    {!! Form::label('', 'Module:', ['class' => 'control-label pull-left']) !!}
                                </div>
                                <div class="col-md-12">
                                    {!! Form::select('filModule', $moduleList, $moduleSelected, ['id'=>'filModule','class'=>'form-control input-sm','autocomplete'=>'off']) !!}
                                </div>
                            </div>
                        </div>
                       
                        <div class="col-md-1">
                            <div class="form-group">
                                {!! Form::label('', '', ['class' => 'control-label col-md-12']) !!}
                                <div class="col-md-12">
                                    {!! Form::submit('Search', ['id' => 'searchButton', 'class' => 'btn btn-primary btn-xs']); !!}
                                </div>
                            </div>
                        </div>
                            
                    </div>
                </div>
            <!-- filtering end-->

            <table class="table table-striped table-bordered" id="functionListTable" style="color: black;">
                <thead>
                        <tr>
                            <th width="60">SL#</th>
                            
                            <th>Module Name</th>
                            <th width="80">Array ID</th>
                            <th>Menu Name</th>
                            <th>Parent Menu</th>
                            <th width="80">Order</th>
                            <th>URL</th>
                            <th>Icon</th>
                            <th width="80">Status</th>
                            <th>Action</th>
                        </tr>
                </thead>
                <tbody>
                                        @foreach ($gnrMenu as $gnrMenus)

                        <tr class="item{{ ($no + 1) }}">

                            <td class="text-center slNo">{{ ++$no }}</td>
                            <td> {{ $gnrMenus->moduleName }} </td>
                            <td> {{ $gnrMenus->id }} </td>
                            <td> {{ $gnrMenus->name }} </td>
                            <td> {{ $gnrMenus->menuName }} </td>
                            <td> {{ $gnrMenus->serial }} </td>
                            <td> {{ $gnrMenus->url }} </td>
                            <td> {{ $gnrMenus->fontawesome_icon }} </td>

                            @if($gnrMenus->status == 1 )
                                <td style="color: green"> <i class="fa fa-check" aria-hidden="true"></i> </td>
                            @else
                                <td style="color: gray"> <i class="fa fa-times" aria-hidden="true"></i> </td>
                            @endif
                            
                             <td style="text-align: middle;" width="90">
                                <a href="{!! url('editItem/'.$gnrMenus->id)!!}">
                                    <span class="fa fa-edit"></span>
                                </a>&nbsp;
                                {{-- <a href="javascript:;" class="delete-modal" gnrMenuItem="{{$gnrMenus->id}}">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </a> --}}
                            </td> 

                        </tr>

                    @endforeach
                </tbody>
            </table>

            {!! Form::close()  !!}
        </div>
      </div>
  </div>
</div>
</div>
</div>


    <!----------------------------- Delete Modal ----------------------------->
    <div id="deleteModal" class="modal fade" style="margin-top:3%;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="clear:both; background-color:black; color:white; padding:10px; text-align:center;">Delete Menu Item</h4>
                </div>
                <div class="modal-body ">
                    {!! Form::open(array('url' => '','id'=>'entryForm', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}
                        <div class="row" style="padding-bottom:20px;"> </div>
                        <h2 style="color: Black;">Are You Confirm to Delete This Menu Item ?</h2>

                        <div class="modal-footer">
                            <input id="gnrMenuItem" type="hidden"  value="">
                            <button type="button" class="btn btn-danger"  id="deleteGnrMenuItem"  data-dismiss="modal">Delete</button>
                            <button type="button" class="btn btn-warning"  data-dismiss="modal"><span class="glyphicon glyphicon-remove" style="padding-right:4px;"></span>Close</button>
                        </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>

    <!----------------------------- Sync Menu ----------------------------->
    <div id="syncMenuModal" class="modal fade" style="margin-top:3%;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="clear:both; background-color:black; color:white; padding:10px; text-align:center;">Sync Menu</h4>
                </div>
                <div class="modal-body ">
                    {!! Form::open(array('url' => '','id'=>'entryForm', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}
                        <div class="row" style="padding-bottom:20px;"> </div>
                        <h2 style="color: Black;">Are You Confirm to Sync Menu ?</h2>

                        <div class="modal-footer">
                            <input id="gnrMenuSync" type="hidden"  value="">
                            <button type="button" class="btn btn-danger"  id="syncMenuItem"  data-dismiss="modal">Confirm</button>
                            <button type="button" class="btn btn-warning"  data-dismiss="modal"><span class="glyphicon glyphicon-remove" style="padding-right:4px;"></span>Close</button>
                        </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>



<script type="text/javascript">

    $(document).ready(function(){

        $(document).on('click', '.delete-modal', function(){
            $("#gnrMenuItem").val($(this).attr('gnrMenuItem'));
            $('#deleteModal').modal('show');
        });

        $(document).on('click', '.sync-modal', function(){
            $("#gnrMenuSync").val($(this).attr('gnrMenuSync'));
            $('#syncMenuModal').modal('show');
        });

        
        $("#deleteGnrMenuItem").on('click',  function() {
            var gnrMenuItem= $("#gnrMenuItem").val();
            var csrf = "{{csrf_token()}}";
            $.ajax({
                url:  "{{url('deleteMenuItem/')}}",
                type: 'POST',
                dataType: 'json',
                data: {id:gnrMenuItem, _token:csrf},
            })
            .done(function(data) { 
                location.reload();
                window.location.href = '{{url('viewMenuList/')}}';
            })
            .fail(function(){
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
        });


        $("#syncMenuItem").on('click',  function() {
            var gnrMenuSync= $("#gnrMenuSync").val();
            var csrf = "{{csrf_token()}}";
            $.ajax({
                url:  "{{url('syncMenuItem/')}}",
                type: 'POST',
                dataType: 'json',
                data: {id:gnrMenuSync, _token:csrf},
            })
            .done(function(data) {
                if(data.responseTitle=='Warning!'){
                    toastr.warning(data.responseText, data.responseTitle, opts);
                    $('.btn').removeAttr("disabled", 'disabled');
                }
                else{
                    location.reload();
                    window.location.href = '{{url('viewMenuList/')}}';
                }
                
            })
            .fail(function(){
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
        });


    });


</script>


@endsection