@extends('layouts/gnr_layout')
@section('title', '| Approval Steps')
@section('content')

    @php
        $pageNo = isset($_GET['page']) ? (int) $_GET['page'] : 1;
    @endphp
    <style>
        .text-left {
            text-align: left !important;
        }

        .text-right {
            text-align: right !important;
        }
    </style>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default" style="background-color:#708090;">
                <div class="panel-heading" style="padding-bottom:0px">
                    <div class="panel-options">
                        <a href="javascript:void(0)" id="step" class="btn btn-info pull-right addViewBtn">
                            <i class="glyphicon glyphicon-plus-sign addIcon"></i>
                            Add Approval Step
                        </a>
                    </div>
                    <h3 align="center" style="font-family: Antiqua;letter-spacing: 2px;">
                        <font color="white">Approval Step List</font>
                    </h3>
                </div>

                <div class="panel-body panelBodyView">

                    <table class="table table-striped table-bordered" id="savingsAccountTable">
                        <thead>
                            <tr>
                                <th>SL NO</th>
                                <th>Name of Step</th>
                                <th>Step Type</th>
                                <th>Position/Role</th>
                                <th>Department</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php($sl = 1)
                            @foreach ($approvalSteps as $key => $v)
                                <tr>
                                    <td>{{ $sl++ }}</td>
                                    <td class="name">{{ $v->name }}</td>
                                    <td class="name">{{ $v->stepType }}</td>
                                    <td class="name">{{ $v->positionName }}</td>
                                    <td class="name">{{ $v->departmentName }}</td>
                                    <td>
                                        <a href="javascript:void(0)" class="edit_step" data-id="{{ $v->id }}">
                                            <i class="fa fa-pencil" aria-hidden="true"></i>
                                        </a>

                                        <a href="javascript:;" class="deleteConfirmation" data-id="{{ $v->id }}">
                                            <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="pull-right">
                        {{--  {{ $interest->appends(request()->input())->links() }} --}}
                    </div>
                </div>

            </div>
        </div>

    </div>
@endsection

{{-- Delete Modal --}}
<div class="modal fade" id="delete-confirmation-modal">
    <div class="modal-dialog">
        <div class="modal-header">
            <h4 class="modal-title">Delete Confirmation</h4>
            <a class="close" href="#" data-dismiss="modal">X</a>
        </div>
        <div class="modal-content">
            <div class="modal-body">
                Are you sure to delete this item?
            </div>
        </div>
        <div class="modal-footer">
            <div class="form-group hidden">
                <div class="col-sm-6 col-sm-offset-2">
                    {!! Form::hidden('delete_id', null, [
                        'class' => 'form-control',
                        'id' => 'delete_id',
                        'type' => 'text',
                        'readonly',
                    ]) !!}
                </div>
            </div>
            <button id="yesBtn" type="button" class="btn btn-info animated slideInRight"
                style="margin-bottom:0!important;">Yes</button>
            <button id="noBtn" type="button" class="btn btn-white animated slideInRight" data-dismiss="modal"
                style="margin-bottom:0!important;">No</button>
        </div>
    </div>
</div>
{{-- End Delete Modal --}}

<div class="modal fade" id="step_modal">
    <div class="modal-dialog modal-md">
        {!! Form::open(['url' => '', 'role' => 'form', 'id' => 'stepForm', 'class' => 'form-horizontal']) !!}
        <h2>Please Wait...</h2>
        {!! Form::close() !!}
    </div>
</div>

<script src="{{ asset('js/jquery-1.11.1.min.js') }}"></script>

<script>
    $(document).on('click', '#step, .edit_step', function(event) {
        var edit_id = $(this).data('id');
        $("#stepForm").html('');
        $(".error").remove();
        var product_id = 1;
        $.ajax({
            data: {
                edit_id: edit_id
            },
            url: "{{ url('gnr/approvalStep/create') }}",
            type: 'GET',
            dataType: 'html',
            success: function(data) {
                $("#stepForm").html(data);
                $("#step_modal").modal('show');
            },
            error: function(data) {
                alert('ERROR!!')
            }
        })
    });
</script>


<script>
    /*Delete Modal*/
    $(document).on('click', '.deleteConfirmation', function() {
        if (hasAccess('gnr/approvalStep/destroy')) {
            event.preventDefault();
            $('#delete_id').val($(this).data('id'));
            jQuery('#delete-confirmation-modal').modal('show', {
                backdrop: 'fade'
            });
        }
    });
    /*End Delete Modal*/

    /*Delete*/
    $("#yesBtn").click(function(event) {
        $.ajax({
                url: "{{ url('gnr/approvalStep/destroy') }}",
                type: 'POST',
                dataType: 'json',
                data: {
                    _token: "{{ csrf_token() }}",
                    id: $('#delete_id').val()
                },
            })
            .done(function(data) {
                if (data.responseTitle == 'Warning!') {
                    toastr.warning(data.responseText, data.responseTitle, opts);
                } else {
                    toastr.success(data.responseText, data.responseTitle, opts);
                    setTimeout(function() {
                        location.reload();
                    }, 3000);
                }
            })
            .fail(function() {
                alert("error");
            })


    });
    /*End Delete*/
</script>