@extends('layouts.app')
@section('content')
@include('loans.modal')
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption font-dark">
                <i class="icon-settings font-dark"></i>&nbsp;
                <span class="caption-subject bold uppercase">@lang('layout.Alerts')</span>
            </div>
            <div class="tools"> </div> 
            <!--div class="btn-group pull-right">
                @permission('services-export') 
                    <a href="{{route('systemAlerts.create')}}">
                        <button class="btn btn-success">
                            <i class="fa fa-plus"></i> @lang('layout.AddNew')
                        </button>
                    </a>
                @endpermission
            </div-->
        </div>
    </div>
    <div class="tabbable-line tabbable-custom-profile">
        <ul class="nav nav-tabs">  
            <li class="active">
                <a href="#pending" data-toggle="tab" id="tab-on">
                    <i class="fa "></i><b>@lang('layout.Pending')</b>
                </a>
            </li> 
            <li>
                <a href="#active" data-toggle="tab" id="tab-on">
                    <i class="fa "></i><b>@lang('layout.Active')</b>
                </a>
            </li>
        </ul>  
        <div class="tab-content padding" style="padding: 0px;">
            <div class="tab-pane active" id="pending" style="margin-top: 10px;">
                <div class="row">
                    <div class="col-md-12">
                        <!-- BEGIN EXAMPLE TABLE PORTLET-->
                        <div class="portlet light bordered">
                            <div class="portlet-title">
                                <div class="caption font-dark">
                                    <i class="icon-settings font-dark"></i>&nbsp;
                                    <span class="caption-subject bold uppercase">@lang('layout.ProjectSteps') @lang('layout.Pending')</span>
                                </div>
                                <div class="tools"> </div> 
                                <div class="pull-right">
                                    {{Form::open(['route' => 'export.PDFAll','method' => 'DELETE','class' => 'inline'])}}
                                    <input type="hidden" name="type" value="pendingProjectSteps"/>
                                    <button type="submit" class="btn btn-success"> <i class="fa fa-file-pdf-o"></i> @lang('layout.PDF') </button>
                                    {{Form::close()}} 
                                </div>
                            </div>
                            <div class="portlet-body">
                                <table class="table table-striped table-bordered table-hover" cellspacing="0" id="pendingProjectSteps">
                                    <thead>
                                        <tr>
                                            <th>@lang('layout.Record')</th>
                                            <th>@lang('layout.Project')</th>
                                            <th>@lang('layout.Name')</th>
                                            <th>@lang('layout.Number')</th>
                                            <th>@lang('layout.StartDate')</th>
                                            <th>@lang('layout.EndDate')</th>
                                            <th>@lang('layout.Status')</th>
                                            <th>@lang('layout.Description')</th>
                                            <th>@lang('layout.User')</th>
                                            <th>@lang('layout.Action')</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <!-- END EXAMPLE TABLE PORTLET-->
                    </div>
                </div>
            </div> 
            <div class="tab-pane" id="active" style="margin-top: 10px;">
                <div class="row">
                    <div class="col-md-12">
                        <!-- BEGIN EXAMPLE TABLE PORTLET-->
                        <div class="portlet light bordered">
                            <div class="portlet-title">
                                <div class="caption font-dark">
                                    <i class="icon-settings font-dark"></i>&nbsp;
                                    <span class="caption-subject bold uppercase">@lang('layout.ProjectSteps') @lang('layout.Active')</span>
                                </div>
                                <div class="tools"> </div> 
                                <div class="pull-right">
                                    {{Form::open(['route' => 'export.PDFAll','method' => 'DELETE','class' => 'inline'])}}
                                    <input type="hidden" name="type" value="activeProjectSteps"/>
                                    <button type="submit" class="btn btn-success"> <i class="fa fa-file-pdf-o"></i> @lang('layout.PDF') </button>
                                    {{Form::close()}} 
                                </div>
                            </div>
                            <div class="portlet-body">
                                <table class="table table-striped table-bordered table-hover" cellspacing="0" id="activeProjectSteps">
                                    <thead>
                                        <tr>
                                            <th>@lang('layout.Record')</th>
                                            <th>@lang('layout.Project')</th>
                                            <th>@lang('layout.Name')</th>
                                            <th>@lang('layout.Number')</th>
                                            <th>@lang('layout.StartDate')</th>
                                            <th>@lang('layout.EndDate')</th>
                                            <th>@lang('layout.Status')</th>
                                            <th>@lang('layout.Description')</th>
                                            <th>@lang('layout.User')</th>
                                            <th>@lang('layout.Action')</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <!-- END EXAMPLE TABLE PORTLET-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- project steps modal start --}}
    <div id="nProOrder" v-cloak>        
        <modal v-show="showModal" @close="showModal = false">
            <div slot="header">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h3>
                        @lang('layout.Update')
                    </h3>
                </div>
                <div class="col-md-4">
                    <div v-if="fieldErrors.length > 0">
                        <p class="text-danger" fieldErrors>
                            <spna v-text="fieldErrors"></spna>
                        </p>
                    </div>
                </div>
            </div>
            <div slot="body">
                <div class="row">
                    <div class="col-md-4">
                        <label class="control-label">@lang('layout.Status')</label>
                        <select name="selected_step_status" ref="selected_step_status" class="form-control">
                            <option value="pending">@lang('layout.Pending')</option>
                            <option value="active">@lang('layout.Active')</option>
                            <option value="inActive">@lang('layout.InActive')</option>
                            <option value="onProgress">@lang('layout.OnProgress')</option>
                            <option value="completedProjects">@lang('layout.CompletedProjects')</option>
                        </select>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <button type=button class="btn btn-success" @click="addClass" >
                    @lang('layout.OK')
                </button>
                <button type=button class="btn btn-danger" @click="showModal =false" >
                    @lang('layout.Cancel')
                </button>
            </div>
        </modal>
    </div>
    {{-- project steps modal end  --}}
    {{-- project steps modal start --}}
    <div id="nProOrder1" v-cloak>        
        <modal v-show="showModal" @close="showModal = false">
            <div slot="header">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h3>
                        @lang('layout.Update')
                    </h3>
                </div>
                <div class="col-md-4">
                    <div v-if="fieldErrors.length > 0">
                        <p class="text-danger" fieldErrors>
                            <spna v-text="fieldErrors"></spna>
                        </p>
                    </div>
                </div>
            </div>
            <div slot="body">
                <div class="row">
                    <div class="col-md-4">
                        <label class="control-label">@lang('layout.Status')</label>
                        <select name="selected_step_status" ref="selected_step_status" class="form-control">
                            <option value="pending">@lang('layout.Pending')</option>
                            <option value="active">@lang('layout.Active')</option>
                            <option value="inActive">@lang('layout.InActive')</option>
                            <option value="onProgress">@lang('layout.OnProgress')</option>
                            <option value="completedProjects">@lang('layout.CompletedProjects')</option>
                        </select>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <button type=button class="btn btn-success" @click="addClass1" >
                    @lang('layout.OK')
                </button>
                <button type=button class="btn btn-danger" @click="showModal =false" >
                    @lang('layout.Cancel')
                </button>
            </div>
        </modal>
    </div>
    {{-- project steps modal end  --}}
@stop
@push('scripts')
<script>
    // delete item by ajax
    function  DisableItemAjax(element,datatableId) {
        var e = $(element);  
        var form = e.parent('form').get(0);
        var url= $(form).get(0).action;
        var table=$(datatableId).DataTable();
        swal({
           title: "@lang('layout.AreYouSure?')",
           icon: "warning",
           buttons: ["@lang('layout.Cancel')", "@lang('layout.Deactive')"],
           dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    type:'PATCH',
                    url:url,
                    headers: {'X-CSRF-TOKEN': "{{csrf_token()}}"},
                    success: function(result)
                    {
                       // swal("{{__('message.DSuccess')}}",result.message);
                        toastr.success('',result.message);
                        table.ajax.reload();
                    },
                    error:function(error){
                        swal("{{__('message.Warning')}}",error.responseJSON.message);
                    }
                });
            } else {
                swal({
                    buttons: "@lang('layout.Confirm')",
                    title: "@lang('layout.FileIsSave')",
                });
                return false;
            }
        });
    }
    $(document).ready(function(){
        $('#pendingProjectSteps').DataTable({  
            scrollCollapse: true,
            responsive:'{{responsiveDataTable()}}',
            pagingType:'{{paginationType()}}',
            serverSide: true,
            paging: true,
            retrieve: true,
            ajax:{
                url:'{{route("systemAlerts.projectSteps")}}',
                data:{type:'pendingProjectSteps'}
            },
            columns: [
                {data: 'id', name: 'id'},
                {data: 'project_name', name: 'project_name'},
                {data: 'name', name: 'name'},
                {data: 'number', name: 'number'},
                {data: 'start_date', name: 'start_date'},
                {data: 'end_date', name: 'end_date'},
                {data: 'status', name: 'status'},
                {data: 'description', name: 'description'},
                {data: 'username', name: 'username'},
                {data: 'action', name: 'action'},
            ]
        });
    }); 
    $(document).ready(function(){
        $('#activeProjectSteps').DataTable({  
            scrollCollapse: true,
            responsive:'{{responsiveDataTable()}}',
            pagingType:'{{paginationType()}}',
            serverSide: true,
            paging: true,
            retrieve: true,
            ajax:{
                url:'{{route("systemAlerts.projectSteps")}}',
                data:{type:'activeProjectSteps'}
            },
            columns: [
                {data: 'id', name: 'id'},
                {data: 'project_name', name: 'project_name'},
                {data: 'name', name: 'name'},
                {data: 'number', name: 'number'},
                {data: 'start_date', name: 'start_date'},
                {data: 'end_date', name: 'end_date'},
                {data: 'status', name: 'status'},
                {data: 'description', name: 'description'},
                {data: 'username', name: 'username'},
                {data: 'action', name: 'action'},
            ]
        });
    }); 
    Vue.component('v-select', VueSelect.VueSelect);
    function createFeedback(id) {
        vu.showModal = true;
        vu.id = id;
    }
    function createFeedback1(id) {
        vu1.showModal = true;
        vu1.id = id;
    }
    Vue.component('modal',{
        template: '#modal-template'
    });
    let vu = new Vue({
        el: '#nProOrder',
        data:{
            showModal:false,
            fieldErrors:[],
            id: null,
            selected_step_status:null
        },
        methods:{
            addClass(){
            this.selected_step_status = this.$refs.selected_step_status.value;       
            axios.post("{{route('projectStepUpdate.update')}}",{
                id: this.id,
                selected_step_status: this.selected_step_status
            })
            .then(function(response){
                if (response) {
                if (response.data.result == 1) {
                    toastr.success('',  "{{__('message.USuccess')}}");
                    $('#pendingProjectSteps').DataTable().ajax.reload();
                    $('#activeProjectSteps').DataTable().ajax.reload();
                } else {
                    toastr.warning('', "{{__('message.Warning')}}");
                }
                }
                vu.showModal = false;
                vu.id = null;
                vu.selected_step_status = null;
            })
            }
        }
    });
    let vu1 = new Vue({
        el: '#nProOrder1',
        data:{
            showModal:false,
            fieldErrors:[],
            id: null,
            selected_step_status:null
        },
        methods:{
            addClass1(){
            this.selected_step_status = this.$refs.selected_step_status.value;       
            axios.post("{{route('projectStepUpdate.update')}}",{
                id: this.id,
                selected_step_status: this.selected_step_status
            })
            .then(function(response){
                if (response) {
                if (response.data.result == 1) {
                    toastr.success('',  "{{__('message.USuccess')}}");
                    $('#activeProjectSteps').DataTable().ajax.reload();
                    $('#pendingProjectSteps').DataTable().ajax.reload();
                } else {
                    toastr.warning('', "{{__('message.Warning')}}");
                }
                }
                vu1.showModal = false;
                vu1.id = null;
                vu1.selected_step_status = null;
            })
            }
        }
    });
    //Start Export Modal
    var Modal=Vue.component('modal', {
        template: '#modal-template',
        methods: {
            ok: function() {
                this.$emit('ok')
            }
        }
    });
    // start app
    new Vue({
        el: '#app',
        data: {
            showModal: false,
        },
        methods:{
            ok:function(){
                this.showModal = !this.showModal;
            },
            close:function(e)
            {
                this.showModal = !this.showModal;
            },
            editExample : function(){
                //Your other code that launches the modal
                this.showModal= true;
                this.$nextTick(function(){
                    $(document).ready(function(){
                        $(".date").persianDatepicker(modelDate());
                    });
                })
            }
        },
    });
    // start app
    new Vue({
        el: '#app2',
        data: {
            showModal: false,
        },
        methods:{
            ok:function(){
                this.showModal = !this.showModal;
            },
            close:function(e)
            {
                this.showModal = !this.showModal;
            },
            editExample : function(){
                //Your other code that launches the modal
                this.showModal= true;
                this.$nextTick(function(){
                    $(document).ready(function(){
                        $(".date").persianDatepicker(modelDate());
                    });
                })
            }
        },
    });
    $('#print_pdf_all').on('click',function(e){
        $('#show-modal').click();
        e.preventDefault();
    }) 
    $('#print_pdf_all2').on('click',function(e){
        $('#show-modal2').click();
        e.preventDefault();
    }) 
    //End Export Modal
</script>
@endpush