@extends('layouts.vertical', ["page_title"=> "Dashboard", "mode" => $mode ?? "", "demo" => $demo ?? ""])

@section('css')
        <!-- third party css -->
        <link href="{{ URL::asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css" />
        <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@30.0.0/dist/ag-grid-community.min.js"></script>
        <!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->
<div id="pageloader">
   <img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
</div>
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <button class="btn btn-success" id="btn_approve_all">Approve all Selected</button>
                    <button class="btn btn-danger ms-1" id="btn_reject_all">Reject all Selected</button>
                    <button class="btn btn-primary ms-1" >Show All</button>
                    <button class="btn btn-primary ms-1" id="btn_approve_all">Show Pending</button>
                    <a class="btn btn-dark waves-effect waves-light ms-1" href="/form/allsubmissions?partition={{$form->partition}}&form_id={{$form->id}}&download=1">Export</a>
                </div>
                <h4 class="page-title">All Workflow</h4>
            </div>
        </div>
    </div>     
    <!-- end page title --> 
    @if(session()->has('message'))
    <div class="alert alert-success">
    {{ session()->get('message') }}
    </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div id="myGrid" style="" class="ag-theme-alpine"></div>
                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>

</div> <!-- container -->

<div class="modal fade" id="scrollable-modal" tabindex="-1" role="dialog" aria-labelledby="scrollableModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content ">
            <div class="modal-header">
                <h5 class="modal-title" id="scrollableModalTitle">View Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<style type="text/css">
#pageloader {
  background: rgba( 255, 255, 255, 0.8 );
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9999;
}

#pageloader img {
  left: 50%;
  margin-left: -32px;
  margin-top: -32px;
  position: absolute;
  top: 50%;
}
.img-thumbnail {max-width: 100px}
.filter-section .form-select {max-width: 150px}
.filter-section .form-control {max-width: 120px}
.header-cell {background-color: #a6e1ec;text-align: center;}
.quarters-cell {background-color: #5bc0de;}
.row-header {}
.cell-span {background-color: #f4f7f8;}
</style>


@endsection


@section('script')

    <!-- third party js -->
    
    <script src="{{ URL::asset('assets/libs/datatables/datatables.min.js')}}"></script>
    <script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
    <!-- third party js ends -->
    <script type="text/javascript">
        let submissions = []
        function submissionHandle(id) {
            let submission = submissions.find(s => s.id == id)
            $('#scrollable-modal').modal('show');
            $('#scrollable-modal .modal-body').html(`
            <div class="row gx-0 justify-content-center" id="model_approval_status"><div class="col-2"><div class="avatar-md"><img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" class="img-fluid" alt="processing..." /></div></div></div>
            <div id="form-wrapper">
                <form method="POST" action="/form/submit" id="report-form" enctype="multipart/form-data">
                    @csrf
                    <div class="col-12 mb-2">
                        <div class="table-responsive">
                            <table class="table m-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Field</th>
                                        <th>Value</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><h5 class="m-0 fw-normal">User Name</h5> </td>
                                        <td> ${submission['submitted_by']} </td>
                                    </tr>
                                    <tr>
                                        <td><h5 class="m-0 fw-normal">User Email</h5> </td>
                                        <td> ${submission['user_email']} </td>
                                    </tr>
                                    <tr>
                                        <td><h5 class="m-0 fw-normal">User Phone</h5> </td>
                                        <td> ${submission['user_phone']} </td>
                                    </tr>
                                    <tr>
                                        <td><h5 class="m-0 fw-normal">Submitted On</h5> </td>
                                        <td> ${submission['submitted_on']} </td>
                                    </tr>
                                @foreach($questions as $que)
                                    <tr>
                                        <td><h5 class="m-0 fw-normal">{{$que->question}}</h5> </td>
                                        <td> ${submission['{{$que->code}}']} </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="text-center mt-3">
                        <button type="button" class="btn btn-success" submission="${id}" id="btn_approve" ${ ['approved', 'rejected'].includes(submission.workflow_status)  ? 'disabled':''}>Approve</button>
                        <button type="button" class="btn btn-danger ms-1" submission="${id}" id="btn_reject" ${ ['approved', 'rejected'].includes(submission.workflow_status)  ? 'disabled':''}>Reject</button>
                    </div>
                </form>
            </div>`)

            $.ajax({
                url: '/form/allaprovers',
                type: 'GET',
                data: {submission_id:id, form_id:'1719380553-df77ae1b-7861-4e3d-a8ef-6ae1b94bf456'},
                success: function( data ) {
                    $('#model_approval_status').html('')
                    for(let da of data) {
                        $('#model_approval_status').append(`<div class="col-auto">
                                <div class="widget-rounded-circle card">
                                    <div class="card-body">
                                        <div class="row align-items-center gx-2">
                                            <div class="col-auto">
                                                <div class="avatar-sm">
                                                    <img src="https://ui-avatars.com/api/?background=random&name=${da.user_name}" class="img-fluid rounded-circle" alt="user-img">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <h5 class="mb-1 mt-2 font-16">${da.user_name}</h5>
                                                <p class="mb-2 text-muted">${da.approval_status}</p>
                                            </div>
                                        </div> <!-- end row-->
                                    </div>
                                </div> <!-- end widget-rounded-circle-->
                            </div>`)
                    }
                    console.log(data)
                },
            });

            $('#btn_approve').unbind()
            $('#btn_approve').click(function(){
                $("#pageloader").fadeIn();
                let that = $(this)
                $.ajax({
                    url: '/form/approverejectmultiple',
                    type: 'GET',
                    data: {action:'approve', ids:[that.attr('submission')], form_id:'1719380553-df77ae1b-7861-4e3d-a8ef-6ae1b94bf456'},
                    success: function( data ) {
                        $("#pageloader").fadeOut();
                        $('#scrollable-modal').modal('hide');
                        Swal.fire({
                            title: 'Great!',
                            text: 'Your data is successfully submitted!',
                            icon: 'success'
                        })
                    },
                });
            })
            $('#btn_reject').unbind()
            $('#btn_reject').click(function(){
                $("#pageloader").fadeIn();
                let that = $(this)
                $.ajax({
                    url: '/form/approverejectmultiple',
                    type: 'GET',
                    data: {action:'reject', ids:[that.attr('submission')], form_id:'1719380553-df77ae1b-7861-4e3d-a8ef-6ae1b94bf456'},
                    success: function( data ) {
                        $("#pageloader").fadeOut();
                        $('#scrollable-modal').modal('hide');
                        Swal.fire({
                            title: 'Great!',
                            text: 'Your data is successfully submitted!',
                            icon: 'success'
                        })
                    },
                });
            })
        }

        $(document).ready(function () {

            $('#btn_approve_all').click(function(){
                $("#pageloader").fadeIn();
                let selected = []
                $('input[type=checkbox]').each(function () {
                    if(this.checked) {                        
                        selected.push($(this).val())
                    }
                });
                if(selected.length > 0) {
                    $.ajax({
                        url: '/form/approverejectmultiple',
                        type: 'GET',
                        data: {action:'approve', ids:selected, form_id:'1719380553-df77ae1b-7861-4e3d-a8ef-6ae1b94bf456'},
                        dataType: "json",
                        success: function(resultData) {
                            $("#pageloader").fadeOut();
                            Swal.fire({
                                title: 'Great!',
                                text: 'Your data is successfully submitted!',
                                icon: 'success'
                            })
                        }
                    });
                } else {
                    $("#pageloader").fadeOut();
                    Swal.fire({
                        icon: 'error',
                        title: 'No Submission Selected',
                        text: 'Please select at least 1 submission'
                    })
                }
                console.log(selected)
            })

            $('#btn_reject_all').click(function(){
                $("#pageloader").fadeIn();
                let selected = []
                $('input[type=checkbox]').each(function () {
                    if(this.checked) {                        
                        selected.push($(this).val())
                    }
                });
                if(selected.length > 0) {
                    $.ajax({
                        url: '/form/approverejectmultiple',
                        type: 'GET',
                        data: {action:'reject', ids:selected, form_id:'1719380553-df77ae1b-7861-4e3d-a8ef-6ae1b94bf456'},
                        dataType: "json",
                        success: function(resultData) {
                            $("#pageloader").fadeOut();
                            Swal.fire({
                                title: 'Great!',
                                text: 'Your data is successfully submitted!',
                                icon: 'success'
                            })
                        }
                    });
                } else {
                    $("#pageloader").fadeOut();
                    Swal.fire({
                        icon: 'error',
                        title: 'No Submission Selected',
                        text: 'Please select at least 1 submission'
                    })
                }
                console.log(selected)
            })

            const columnDefs = [{
                    headerName: "Select",
                    width: 120,
                    cellRenderer: params => {
                        return `<input type="checkbox" value="${params.data.id}" name="row-${params.data.id}" ${ ['approved', 'rejected'].includes(params.data.workflow_status)  ? 'disabled':''} class="form-check-input mt-2" /> <button type="button" onClick="submissionHandle('${params.data.id}')" class="btn btn-info btn-xs ms-1 btn_submission_view">View</button>`;
                    }
                },
                {
                    headerName: 'Approval Status',
                    field: 'workflow_status',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    width: 170,
                },
                {
                    headerName: 'User Name',
                    field: 'submitted_by',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    width: 170,
                },
                {
                    headerName: 'User Email',
                    field: 'user_email',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    width: 170,
                },
                {
                    headerName: 'User Phone',
                    field: 'user_phone',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    width: 170,
                },
                {
                    headerName: 'Submitted On',
                    field: 'submitted_on',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    width: 170,
                },
                @foreach($questions as $que)
                {
                    headerName: '{{$que->question}}',
                    field: '{{$que->code}}',
                    filter: 'agTextColumnFilter',
                    floatingFilter: true,
                    width: {{ strlen($que->question)*14 > 250 ? 250 : ( strlen($que->question)*14 < 150 ? 150 : strlen($que->question)*14 ) }},
                },
                @endforeach
            ]
            
            const rowData = [];
            const gridOptions = {
                columnDefs: columnDefs,
                pagination: true,
                paginationPageSize: 50,
                defaultColDef: {
                    resizable: true,
                    sortable: true,
                },
                rowData: rowData,
                domLayout: 'autoHeight',
            };

            const gridDiv = document.querySelector('#myGrid');
            new agGrid.Grid(gridDiv, gridOptions);

            $.ajax({
                type: "GET",
                url: '{{$submission_json}}',
                processData: false,
                contentType: false,
                success: function(data) {
                    //console.log(data)
                    submissions = data
                    gridOptions.api.setRowData(data);
                    $("#pageloader").fadeOut();
                },
            });

            
            $('.btn_submission_view').on( 'click', 'button', function () {
                $('#scrollable-modal').modal('show');
                
            });

        });
    </script>

@endsection