@extends('layouts.app')
@section('style')
<style>
    .tiles .tile {
        float: {{(session()->get("system_direction") == "ltr"?"left":"right")}};      
        /* width: 100% !important; */
    }
    .tiles{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        margin: auto auto;
    }
    .tiles .tile{
        width: 16em !important;
    }
    .tiles .tile i{
        transition: .5s;
    }
    .tiles .tile:hover i{
        transform: scale(1.2);
        transition: .5s;
    }
</style>
@endsection
@section('content')
@include('loans.modal')
<!-- END PAGE HEADER-->
<div class="row">
    <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption font-dark">
                <i class="fa fa-edit"></i>&nbsp;
                <span class="caption-subject bold uppercase">@lang('menu.ProjectDashboard')</span>
            </div>
            <div class="tools"> </div>
            <div class="pull-right">
            </div>
        </div>
        <div class="portlet-body">
            <div class="row">
                <div class="tiles" style="">
                    <a href="{{route('project.index')}}">
                        <div class="tile selected bg-red-sunglo">
                            <div class="corner"> </div>
                            <div class="tile-body">
                                <i class="fa fa-edit"></i>
                            </div>
                            <div class="tile-object">
                                <div class="name" style="font-weight: bold;">@if($activeProjects) {{$activeProjects}} @endif</div>
                                <div class="number">@lang('layout.Projects') @lang('layout.Active')</div>
                            </div>
                        </div>
                    </a> 
                    <a href="{{route('project.index')}}">
                        <div class="tile selected bg-blue-steel">
                            <div class="corner"> </div>
                            <div class="tile-body">
                                <i class="fa fa-ban"></i>
                            </div>
                            <div class="tile-object">
                                <div class="name" style="font-weight: bold;">@if($deactiveProjects) {{$deactiveProjects}} @endif</div>
                                <div class="number">@lang('layout.Projects') @lang('layout.Deactive')</div>
                            </div>
                        </div>
                    </a>
                    <a style="cursor: default !important;">
                        <div class="tile selected bg-yellow-saffron" style="cursor: default !important;">
                            <div class="corner"> </div>
                            <div class="tile-body">
                                <i class="fa fa-spinner"></i>
                            </div>
                            <div class="tile-object">
                                <div class="name" style="font-weight: bold;">@if($pendingProjectStep) {{$pendingProjectStep}} @endif</div>
                                <div class="number"> @lang('menu.Project') @lang('layout.Pending')</div>
                            </div>
                        </div>
                    </a>
                    <a style="cursor: default !important;">
                        <div class="tile selected bg-green-meadow" style="cursor: default !important;">
                            <div class="corner"> </div>
                            <div class="tile-body">
                                <i class="fa fa-check"></i>
                            </div>
                            <div class="tile-object">
                                <div class="name" style="font-weight: bold;">@if($activeProjectStep) {{$activeProjectStep}} @endif</div>
                                <div class="number"> @lang('menu.Project') @lang('layout.Active')</div>
                            </div>
                        </div>
                    </a>
                    <a style="cursor: default !important;">
                        <div class="tile selected bg-purple-studio" style="cursor: default !important;">
                            <div class="corner"> </div>
                            <div class="tile-body">
                                <i class="fa fa-cubes"></i>
                            </div>
                            <div class="tile-object">
                                <div class="name" style="font-weight: bold;">@if($selectedProjectSteps) {{$selectedProjectSteps}} @endif</div>
                                <div class="number"> @lang('menu.ProjectSteps')</div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- END EXAMPLE TABLE PORTLET-->
</div>
<div class="row" style="overflow: hidden;">
    @permission('project-list')
    <div class="col-md-12">
        <div class="portlet light" style="box-shadow: 0px 0px 3px rgba(187, 187, 187, 0.69);border-radius: 8px;padding: 20px;border-top: 1px solid rgba(187, 187, 187, 0.266);">
            <div class="portlet-title">
                <div class="caption font-dark">
                    <span class="caption-subject bold uppercase">@lang('layout.Project')</span>
                </div>
                <div class="tools"> </div>
                <div class="pull-right">
                    @permission('project-export')
                    <span id="anchore-modal1">
                        {{Form::open(['route' => 'export.PDFAll','method' => 'DELETE','class' => 'inline'])}}
                        <input type="hidden" name="type" value="Project_report"/>
                        <button type="submit" class="btn btn-success"><i class="fa fa-print"></i></button>
                        {{Form::close()}} 
                    </span>
                    @endpermission
                </div>
            </div>
            <div class="portlet-body">
                <div class="col-md-12 col-sm-12" style="margin-bottom: 10px;" id="project_search">
                    <div class="col-md-4">
                        <select name="type" @change="getAllProjects()" v-model="selected_type" class="form-control">
                            <option value="0">@lang('layout.SelectType')</option>
                            <option value="active">@lang('layout.Active')</option>
                            <option value="deactive">@lang('layout.Deactive')</option>
                        </select>
                    </div>
                </div>
                <table class="table table-striped table-bordered table-hover" id="project">
                    <thead>
                        <tr>
                            <th>@lang('layout.Code') </th>
                            <th>@lang('layout.ProjectName') </th>
                            <th>@lang('layout.Customer')</th>
                            <th>@lang('layout.StartDate')</th>
                            <th>@lang('layout.EndDate')</th>
                            <th>@lang('layout.Percent')</th>
                            <th>@lang('layout.ProjectProgress')</th> 
                            <th>@lang('layout.Status') </th>
                            <th>@lang('layout.Location') </th>
                            <th>@lang('layout.Price') </th>
                            <th>@lang('layout.InitialPrice') </th>
                            <th>@lang('layout.Currency') </th>
                            <th>@lang('layout.Type') </th>
                            <th>@lang('layout.Color') </th>
                            <th>@lang('layout.User') </th>
                            <th>@lang('layout.Actions') </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    @endpermission
    @permission(['ProjectSteps-list'])
    <div class="col-md-12">
        <div class="portlet light" style="box-shadow: 0px 0px 3px rgba(187, 187, 187, 0.69);border-radius: 8px;padding: 20px;border-top: 1px solid rgba(187, 187, 187, 0.266);">
            <div class="portlet-title">
                <div class="caption font-dark">
                    <span class="caption-subject bold uppercase">@lang('layout.ProjectSteps') @lang('layout.Pending')</span>
                </div>
                <div class="tools"> </div>
                <div class="pull-right">
                    @permission('ProjectSteps-export')
                    <span id="anchore-modal1">
                        {{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-print"></i></button>
                        {{Form::close()}} 
                    </span>
                    @endpermission
                </div>
            </div>
            <div class="portlet-body">
                <table class="table table-striped table-bordered table-hover" 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.Photo')</th>
                            <th>@lang('layout.User') </th>
                            <th>@lang('layout.Actions') </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="portlet light" style="box-shadow: 0px 0px 3px rgba(187, 187, 187, 0.69);border-radius: 8px;padding: 20px;border-top: 1px solid rgba(187, 187, 187, 0.266);">
            <div class="portlet-title">
                <div class="caption font-dark">
                    <span class="caption-subject bold uppercase">@lang('layout.ProjectSteps') @lang('layout.Active')</span>
                </div>
                <div class="tools"> </div>
                <div class="pull-right">
                    @permission('ProjectSteps-export')
                    <span id="anchore-modal1">
                        {{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-print"></i></button>
                        {{Form::close()}} 
                    </span>
                    @endpermission
                </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.Photo')</th>
                            <th>@lang('layout.User')</th>
                            <th>@lang('layout.Action')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="portlet light" style="box-shadow: 0px 0px 3px rgba(187, 187, 187, 0.69);border-radius: 8px;padding: 20px;border-top: 1px solid rgba(187, 187, 187, 0.266);">
            <div class="portlet-title">
                <div class="caption font-dark">
                    <span class="caption-subject bold uppercase">@lang('layout.ProjectSteps') @lang('layout.OnProgress')</span>
                </div>
                <div class="tools"> </div>
                <div class="pull-right">
                    @permission('ProjectSteps-export')
                    <span id="anchore-modal1">
                        {{Form::open(['route' => 'export.PDFAll','method' => 'DELETE','class' => 'inline'])}}
                            <input type="hidden" name="type" value="onProgressProjectSteps"/>
                            <button type="submit" class="btn btn-success"><i class="fa fa-print"></i></button>
                        {{Form::close()}} 
                    </span>
                    @endpermission
                </div>
            </div>
            <div class="portlet-body">
                <table class="table table-striped table-bordered table-hover" cellspacing="0" id="onProgressProjectSteps">
                    <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.Photo')</th>
                            <th>@lang('layout.User')</th>
                            <th>@lang('layout.Action')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="portlet light" style="box-shadow: 0px 0px 3px rgba(187, 187, 187, 0.69);border-radius: 8px;padding: 20px;border-top: 1px solid rgba(187, 187, 187, 0.266);">
            <div class="portlet-title">
                <div class="caption font-dark">
                    <span class="caption-subject bold uppercase">@lang('layout.ProjectSteps')</span>
                </div>
                <div class="tools"> </div>
                <div class="pull-right">
                    @permission('ProjectSteps-export')
                    <span id="anchore-modal1">
                        {{Form::open(['route' => 'export.PDFAll','method' => 'DELETE','class' => 'inline'])}}
                            <input type="hidden" name="type" value="allProjectSteps"/>
                            <button type="submit" class="btn btn-success"><i class="fa fa-print"></i></button>
                        {{Form::close()}} 
                    </span>
                    @endpermission
                </div>
            </div>
            <div class="portlet-body">
                <div class="col-md-12 col-sm-12" style="margin-bottom: 10px;" id="member_search">
                    <div class="col-md-4">
                        <select name="status" @change="getAllData()" v-model="selected_status" class="form-control">
                            <option value="0">@lang('layout.SelectType')</option>
                            <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>
                <table class="table table-striped table-bordered table-hover" cellspacing="0" id="projectStep">
                    <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.Photo')</th>
                            <th>@lang('layout.User')</th>
                            <th>@lang('layout.Action')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    @endpermission
</div>
<!-- END TAB PORTLET-->
<!-- END CONTENT BODY -->
{{-- 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">
            {!! Form::open(array('route' => 'projectStepUpdate.update','method'=>'POST','class'=>'form-horizontal','files'=> true)) !!}
            <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>
                @permission('ProjectSteps-edit')
                <div class="col-md-4">
                    <label class="control-label">@lang('layout.Status')</label>
                    <input class="form-control" type="file" placeholder="@lang('layout.image')" name="selected_step_image" >
                </div>
                @endpermission
                <input type="hidden" name="id" :value="id" >
                <input type="hidden" name="second_form" value="true" >
            </div>
            <br/>
            <div class="row">
                <div class="col-md-12">
                    <button type="submit" class="btn btn-success" >
                        @lang('layout.OK')
                    </button>
                    <button type=button class="btn btn-danger" @click="showModal =false" >
                        @lang('layout.Cancel')
                    </button>
                </div>
            </div>
            {{Form::close()}}
        </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  --}}
{{-- project steps modal start --}}
<div id="nProOrder3" 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  --}}
{{-- project steps modal start --}}
<div id="nProOrder2" 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
@include('print.modal')
@push('scripts')
<script>
    // scrollToProjectSteps(){
    //     const el = document.getElementById('projectSteps');
    //     if(el){
    //         el.scrollIntoView({behavvior: 'smooth', block: 'start'});
    //     }
    // }
    let data_table_project;
    function getRecord2() {
        var type = vpp.selected_type;
        // $(document).ready(function(){
            data_table_project = $('#project').DataTable({  
            scrollCollapse: true,
            responsive:'{{responsiveDataTable()}}',
            pagingType:'{{paginationType()}}',
            serverSide: true,
            paging: true,
            // retrieve: true,
            destroy: true,
            ajax:{
                ajax:'{{route("project.projectsReport")}}',
                data:{
                    type:'project',
                    types: vpp.selected_type
                }
            },
            buttons: [{
                extend: 'excel',
                text: '',
                key: {
                    key: 'x',
                    altkey: true
                }
            }],
            columns: [
                {data: 'number', name: 'number'},
                {data: 'name', name: 'name'},
                {data: 'member', name: 'members.name'},
                {data: 'startDate', name: 'startDate'},
                {data: 'endDate', name: 'endDate', searchable: false},
                {data: 'percent', name: 'percent', orderable: false, searchable: false},
                {data: 'progress', name: 'progress', orderable: false, searchable: false},
                {data: 'status', name: 'status', orderable: false, searchable: false},
                {data: 'location', name: 'projects.location'},
                {data: 'amount', name: 'amount', searchable: false},
                {data: 'initial_price', name: 'initial_price', searchable: false},
                {data: 'currency', name: 'projects.currency'},
                {data: 'type', name: 'type', orderable: false, searchable: false},
                {data: 'color', name: 'color', orderable: false, searchable: false},
                {data: 'user', name: 'users.name'},
                {data: 'actions', name: 'actions', orderable: false, searchable: false}
            ]
        });
        // });
    }
    $(document).ready(function() {
        getRecord2();
    });

    // $(document).ready(function () {
    //     $.fn.dataTable.ext.errMode='{{dataTableWarning()}}';
    //     data_table = $('#project').DataTable({
    //         ajax:{
    //             url: '{{route("project.projectsReport")}}',
    //             data:{type:'project'}
    //         },
    //         order: [["{{orderByColumn()=='number'?0:3}}", "{{getRowOrder()}}"]],
    //         responsive:'{{responsiveDataTable()}}',
    //         pagingType:'{{paginationType()}}',
    //         scrollCollapse: true,
    //         paging: true,
    //         serverSide: true,
    //         buttons: [{
    //             extend: 'excel',
    //             text: '',
    //             key: {
    //                 key: 'x',
    //                 altkey: true
    //             }
    //         }],
    //         columns: [
    //             {data: 'number', name: 'number'},
    //             {data: 'name', name: 'name'},
    //             {data: 'member', name: 'members.name'},
    //             {data: 'startDate', name: 'startDate'},
    //             {data: 'endDate', name: 'endDate', searchable: false},
    //             {data: 'percent', name: 'percent', orderable: false, searchable: false},
    //             {data: 'progress', name: 'progress', orderable: false, searchable: false},
    //             {data: 'status', name: 'status', orderable: false, searchable: false},
    //             {data: 'location', name: 'projects.location'},
    //             {data: 'amount', name: 'amount', searchable: false},
    //             {data: 'initial_price', name: 'initial_price', searchable: false},
    //             {data: 'currency', name: 'projects.currency'},
    //             {data: 'type', name: 'type', orderable: false, searchable: false},
    //             {data: 'color', name: 'color', orderable: false, searchable: false},
    //             {data: 'user', name: 'users.name'},
    //             {data: 'actions', name: 'actions', orderable: false, searchable: false}
    //         ]
    //     });
    // });
    $(document).ready(function(){
        $('#pendingProjectSteps').DataTable({  
            scrollCollapse: true,
            responsive:'{{responsiveDataTable()}}',
            pagingType:'{{paginationType()}}',
            serverSide: true,
            paging: true,
            retrieve: true,
            ajax:{
                url:'{{route("project.projectsReport")}}',
                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: 'image', name: 'image'},
                {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("project.projectsReport")}}',
                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: 'image', name: 'image'},
                {data: 'username', name: 'username'},
                {data: 'action', name: 'action'},
            ]
        });
    }); 
    $(document).ready(function(){
        $('#onProgressProjectSteps').DataTable({  
            scrollCollapse: true,
            responsive:'{{responsiveDataTable()}}',
            pagingType:'{{paginationType()}}',
            serverSide: true,
            paging: true,
            retrieve: true,
            ajax:{
                url:'{{route("project.projectsReport")}}',
                data:{type:'onProgressProjectSteps'}
            },
            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: 'image', name: 'image'},
                {data: 'username', name: 'username'},
                {data: 'action', name: 'action'},
            ]
        });
    }); 
    let data_table;
    function getRecord1() {
        var status = vpss.selected_status;
        // $(document).ready(function(){
        data_table = $('#projectStep').DataTable({  
            scrollCollapse: true,
            responsive:'{{responsiveDataTable()}}',
            pagingType:'{{paginationType()}}',
            serverSide: true,
            paging: true,
            // retrieve: true,
            destroy: true,
            ajax:{
                ajax:'{{route("project.projectsReport")}}',
                data:{
                    type:'projectStep',
                    statuss: vpss.selected_status
                }
            },
            columns: [
                {data: 'project_number', name: 'project_number'},
                {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: 'image', name: 'image'},
                {data: 'username', name: 'username'},
                {data: 'action', name: 'action'},
            ]
        });
        // });
    }
    $(document).ready(function() {
        getRecord1();
    });
    Vue.component('v-select', VueSelect.VueSelect);
    function createFeedback(id) {
        vu.showModal = true;
        vu.id = id;
    }
    // function createFeedback1(id) {
    //     vu.showModal = true;
    //     vu.id = id;
    // }
    // function createFeedback2(id) {
    //     vu3.showModal = true;
    //     vu3.id = id;
    // }
    function createFeedback2(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();
                    $('#projectStep').DataTable().ajax.reload();
                    $('#onProgressProjectSteps').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();
                    $('#projectStep').DataTable().ajax.reload();
                    $('#onProgressProjectSteps').DataTable().ajax.reload();
                } else {
                    toastr.warning('', "{{__('message.Warning')}}");
                }
                }
                vu1.showModal = false;
                vu1.id = null;
                vu1.selected_step_status = null;
            })
            }
        }
    });
    let vu3 = new Vue({
        el: '#nProOrder3',
        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();
                    $('#projectStep').DataTable().ajax.reload();
                    $('#onProgressProjectSteps').DataTable().ajax.reload();
                } else {
                    toastr.warning('', "{{__('message.Warning')}}");
                }
                }
                vu1.showModal = false;
                vu1.id = null;
                vu1.selected_step_status = null;
            })
            }
        }
    });
    let vu2 = new Vue({
        el: '#nProOrder2',
        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();
                        $('#projectStep').DataTable().ajax.reload();
                        $('#onProgressProjectSteps').DataTable().ajax.reload();
                    } else {
                        toastr.warning('', "{{__('message.Warning')}}");
                    }
                    }
                    vu2.showModal = false;
                    vu2.id = null;
                    vu2.selected_step_status = null;
                })
            }
        }
    });
    var vpss = new Vue({
        el: '#member_search',
        data: { 
            selected_status:null,
            newstatus: null
        },
        methods: {
            getAllData() {  
                getRecord1();
            },   
        }
    });
    var vpp = new Vue({
        el: '#project_search',
        data: { 
            selected_type:null
        },
        methods: {
            getAllProjects() {  
                getRecord2();
            },   
        }
    });
</script>
@endpush