@extends('site.layouts.app')

@section('title', 'Dashboard Approval')

@section('datatable')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
    <style type="text/css">
        input {
            border: 0;
            outline: 0;
            border-bottom: 2px solid #03a8f45e !important;
            color: #ccc;
        }
        .avatar-lg {
            height: 8rem;
            width: 8rem
        }
        .customcheckbox {
            width: 22px;
            height: 22px;
            background: url("/img/green.png") no-repeat;
            background-position-x: 0%;
            background-position-y: 0%;
            cursor: pointer;
            margin: 0 auto;
        }

        .customcheckbox.checked {
            background-position: -48px 0;
        }

        .customcheckbox input {
            cursor: pointer;
            opacity: 0;
            scale: 1.6;
            width: 22px;
            height: 22px;
            margin: 0;
        }
    </style>
@endsection

@section('subtitle', 'Control Panel')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Dashboard Approval</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{route('site.home',['site'=>$site->slug])}}">Dashboard Approval</a></li>
                </ol>
            </div>

        </div>
    </div>
</div>
<div class="container-fluid">
        <div class="col">
            <div class="h-100">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex align-items-center flex-wrap gap-2">
                                    <div class="flex-grow-1">
                                        {{-- <a href="{{route('site.purchaserequestapprovaluser.create',['site'=>$site->slug])}}" class="btn btn-info add-btn" ><i class="ri-add-fill me-1 align-bottom"></i> Add Purchase Request</a> --}}
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div class="hstack text-nowrap gap-2">
                                            <a onclick="sendMass('1')" class="btn btn-success me-1">
                                                <i class="fa fa-check"></i>
                                            </a>
                                            <a onclick="sendMass('0')" class="btn btn-danger me-1">
                                                <i class="fa fa-times"></i>
                                            </a>
                                            {{-- <a href="#" onclick="filter()" class="btn btn-danger"><i
                                                    class="ri-filter-2-line me-1 align-bottom"></i> Filter</a> --}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-12">
                        <div class="card">
                            {{-- <div class="card-header border-0 align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Approval Data</h4>
                            </div> --}}
                            <!-- end card header -->

                            <div class="card-body">
                                <div class="overlay d-none" id="overlay_expense">
                                    <div class="spinner-border" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                <table class="table table-bordered nowrap table-striped align-middle no-footer dtr-inline" id="datatable" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th style="width:20%;">Trans No</th>
                                            <th style="width:15%;">Location</th>
                                            <th style="width:20%;">Description</th>
                                            <th style="width:20%;text-align:center">Requested By</th>
                                            <th style="width:20%;text-align:center">Status Approval</th>
                                            <th style="width:10px">
                                                <div class="customcheckbox">
                                                    <input type="checkbox" class="checkall">
                                                </div>
                                            </th>
                                            <th style="width:15%; text-align:center">#</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($datapo as $po)
                                            <tr>
                                                <td>{{$po->code}} <br><small class="text-muted">Purchase Order</small></td>
                                                <td>{!!$po->loc_name!!}</td>
                                                <td></td>
                                                <td style="text-align:center">{{$po->created_by?$po->creator->name:''}} <br> At: {{$po->request_date}}</td>
                                                <td style="text-align:center"><span class="btn btn-sm btn-warning" onclick="showApprovalpo({{$po->id}})">Waiting Approval</span></td>
                                                <td>
                                                    <label class="customcheckbox">
                                                        <input data-id="{{ $po->id }}" data-type="purchase_order" type="checkbox" name="checkapprove[]" value="{{ $po->id }}"><span class="checkmark"></span>
                                                        </label>
                                                </td>
                                                <td style="text-align:center"><a href="{{ url($site->slug . '/purchaseorderapproval') }}/{{$po->id}}?from=dashboard&delegation_id={{$po->delegation_id ?? NULL}}"><i class="ri-eye-line align-bottom text-muted"></i></a></td>
                                            </tr>
                                        @endforeach
                                        @foreach ($datapr as $pr)
                                            <tr>
                                                <td>{{$pr->code}} <br><small class="text-muted">Purchase Request</small></td>
                                                <td>{!!$pr->loc_name!!}</td>
                                                <td>{{$pr->description}}</td>
                                                <td style="text-align:center">{{$pr->created_by?$pr->creator->name:''}} <br> At: {{$pr->request_date}}</td>
                                                <td style="text-align:center"><span class="btn btn-sm btn-warning" onclick="showApprovalpr({{$pr->id}})">Waiting Approval</span></td>
                                                <td>
                                                    <label class="customcheckbox">
                                                    <input data-id="{{ $pr->id }}" data-type="purchase_request" type="checkbox" name="checkapprove[]" value="{{ $pr->id }}"><span class="checkmark"></span>
                                                    </label>
                                                </td>
                                                <td style="text-align:center"><a href="{{ url($site->slug . '/purchaserequestapproval') }}/{{$pr->id}}?from=dashboard"><i class="ri-eye-line align-bottom text-muted"></i></a></td>
                                            </tr>
                                        @endforeach
                                        @foreach ($datacomp as $comp)
                                            <tr>
                                                <td>{{ $comp->code }} <br><small class="text-muted">Complimentary</small></td>
                                                <td>{!! $comp->loc_name !!}</td>
                                                <td>{{ $comp->description }}</td>
                                                <td style="text-align:center">{{ $comp->creator_id ? $comp->creator->name : ''}} <br> At: {{ $comp->request_date }}</td>
                                                <td style="text-align:center"><span class="btn btn-sm btn-warning" onclick="showApprovalComp({{ $comp->id }})">Waiting Approval</span></td>
                                                <td>
                                                    <label class="customcheckbox">
                                                    <input data-id="{{ $comp->id }}" data-type="complimentary" type="checkbox" name="checkapprove[]" value="{{ $comp->id }}"><span class="checkmark"></span>
                                                    </label>
                                                </td>
                                                <td style="text-align:center"><a href="{{ url($site->slug . '/complimentaryapproval') }}/{{$comp->id}}?from=dashboard"><i class="ri-eye-line align-bottom text-muted"></i></a></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                </div>
                            </div>
                        </div><!-- end card -->
                    </div><!-- end col -->

                </div>

            </div> <!-- end .h-100-->

        </div> <!-- end col -->
    </div>
</div>

<div class="modal fade" id="approval-modal-po" tabindex="-1" role="dialog" aria-hidden="true" tabindex="-1"
        role="dialog" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Approval <b id="type-approval"></b></h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                </div>
                <div class="modal-body">
                    <table class="table-striped table-borderless table">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Action Time</th>
                                <th class="text-center">#Status</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="approval-modal-pr" tabindex="-1" role="dialog" aria-hidden="true" tabindex="-1"
        role="dialog" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Approval <b id="type-approval"></b></h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                </div>
                <div class="modal-body">
                    <table class="table-striped table-borderless table">
                        <thead>
                            <tr>
                                <th>#User</th>
                                <th>#Action Time</th>
                                <th class="text-center">#Status</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="approval-modal-comp" tabindex="-1" role="dialog" aria-hidden="true" tabindex="-1"
        role="dialog" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Approval <b id="type-approval"></b></h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                </div>
                <div class="modal-body">
                    <table class="table-striped table-borderless table">
                        <thead>
                            <tr>
                                <th>#User</th>
                                <th>#Action Time</th>
                                <th class="text-center">#Status</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Progress Bar --}}
    <div class="modal fade" id="progress" tabindex="-1" role="dialog" data-bs-backdrop="static"
        data-bs-keyboard="false" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Please wait...</h4>
                </div>
                <div class="modal-body center-block">
                    <span id="progress-message" class="mb-2"></span>
                    <div style="height: 25px" class="progress mt-3" role="progressbar" aria-valuenow="0"
                        aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success">
                            <span class="show"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
<script src="https://themesbrand.com/velzon/html/creative/assets/libs/apexcharts/apexcharts.min.js"></script>
{{-- <script src="https://themesbrand.com/velzon/html/creative/assets/libs/jsvectormap/js/jsvectormap.min.js"></script>
<script src="https://themesbrand.com/velzon/html/creative/assets/libs/jsvectormap/maps/world-merc.js"></script> --}}
<script src="https://themesbrand.com/velzon/html/creative/assets/libs/swiper/swiper-bundle.min.js"></script>
<!-- <script src="https://themesbrand.com/velzon/html/creative/assets/js/pages/dashboard-ecommerce.init.js"></script> -->
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="{{ asset('adminlte/component/accounting/accounting.min.js') }}"></script>
<script type="text/javascript">

    function showApprovalpo(id) {
        $("#approval-modal-po table tbody").empty();
        var data = {
            id: id,
        };
        $.ajax({
            url: "{{ route('site.purchaseorderapproval.getListApproval', ['site' => $site->slug]) }}",
            method: 'get',
            data: data,
            beforeSend: function() {
                $('.overlay').removeClass('d-none');
            }
        }).done(function(response) {
            $('.overlay').addClass('d-none');
            var html = "";
            $.each(response.data, function(index, val) {
                html += `
                <tr>
                <td>
                    <b>${val.title_name}<b><br>
                </td>
                <td style="vertical-align:middle">
                    ${val.action_date}
                </td>
                <td class="text-center" style="vertical-align:middle"><b>${val.log}<b></td>
                </tr>
            `;
                // console.log(val.approval_type);
                // $("#approval-modal #type-approval").text("#" + val.approval_type);
            });
            $("#approval-modal-po table tbody").append(html);
            $("#approval-modal-po").modal("show");
        }).fail(function(response) {
            $('.overlay').addClass('d-none');
        });
    }

    function showApprovalpr(id) {
        $("#approval-modal-pr table tbody").empty();
        var data = {
            id: id,
        };
        $.ajax({
            url: "{{ route('site.purchaserequestapproval.getListApproval', ['site' => $site->slug]) }}",
            method: 'get',
            data: data,
            beforeSend: function() {
                $('.overlay').removeClass('d-none');
            }
        }).done(function(response) {
            $('.overlay').addClass('d-none');
            console.log(response.data);
            var html = "";
            $.each(response.data, function(index, val) {
                html += `
            <tr>
            <td>
                <b>${val.title_name}<b><br>
                <small>${val.employee_name}<small>
            </td>
            <td style="vertical-align:middle">
                ${val.action_date}
            </td>
            <td class="text-center" style="vertical-align:middle"><b>${val.log}<b></td>
            </tr>
        `;
                // console.log(val.approval_type);
                // $("#approval-modal #type-approval").text("#" + val.approval_type);
            });
            $("#approval-modal-pr table tbody").append(html);
            $("#approval-modal-pr").modal("show");
        }).fail(function(response) {
            $('.overlay').addClass('d-none');
        });
    }

    function showApprovalComp(id) {
        $("#approval-modal-comp table tbody").empty();
        var data = {
            id: id,
        };
        $.ajax({
            url: "{{ route('site.complimentaryapproval.getListApproval', ['site' => $site->slug]) }}",
            method: 'get',
            data: data,
            beforeSend: function() {
                $('.overlay').removeClass('d-none');
            }
        }).done(function(response) {
            $('.overlay').addClass('d-none');
            var html = "";
            $.each(response.data, function(index, val) {
                html += `
                    <tr>
                        <td>
                            <b>${val.title_name}<b><br>
                            <small>${val.employee_name}<small>
                        </td>
                        <td style="vertical-align:middle">
                            ${val.action_date}
                        </td>
                        <td class="text-center" style="vertical-align:middle"><b>${val.log}<b></td>
                    </tr>
                `;
            });
            $("#approval-modal-comp table tbody").append(html);
            $("#approval-modal-comp").modal("show");
        }).fail(function(response) {
            $('.overlay').addClass('d-none');
        });
    }

     $(function(){
        $('.select2').select2();
        new DataTable('#datatable', {
            columnDefs: [
                {
                    targets: [5, 6],
                    orderable: false,
                    searchable: false,
                }
            ]
        });
     });

     $(document).on('click', '.customcheckbox input', function() {
        if ($(this).is(':checked')) {
            $(this).parent().addClass('checked');
        } else {
            $(this).parent().removeClass('checked');
        }
    });

    $(document).on('change', '.checkall', function() {
        if (this.checked) {
            $('input[name^=checkapprove]').prop('checked', true);
            $('input[name^=checkapprove]').parent().addClass('checked');
        } else {
            $('input[name^=checkapprove]').prop('checked', false);
            $('input[name^=checkapprove]').parent().removeClass('checked');
        }
    });

    function sendMass(status) {
        var ids = [];
        $('input[name^=checkapprove]').each(function() {
            if (this.checked) {
                ids.push({
                    id: $(this).data('id'),
                    type: $(this).data('type')
                });
            }
        });
        if (ids.length <= 0) {
            $.gritter.add({
                title: 'Warning!',
                text: 'No data has been selected yet',
                class_name: 'gritter-success',
                time: 2500,
            });
            return false;
        }
        Swal.fire({
            title: `${status == '1' ? 'Approve' : 'Reject'} purchase request?`,
            text: `Data that has been ${status == '1' ? 'approve' : 'reject'} cannot be delete or change`,
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: `Yes, ${status == '1' ? 'approve' : 'reject'} it!`
        }).then((result) => {
            if (result.isConfirmed) {
                $('#progress').modal('show');
                processBatch(ids, status);
                $('#progress').modal('hide');
            }
        });
    }

    function processBatch(ids, status, batch = 0) {
        var batchSize = 1;
        // var currentBatch = ids.slice(batch, batch + batchSize);
        var currentBatch = ids.slice(batch, batch + batchSize).map(function(item) {
            return item.id;
        });
        var data = new FormData();
        data.append('ids', JSON.stringify(ids));
        data.append('status', status);
        data.append('data', currentBatch);
        data.append('batch', batch);
        data.append('batch_size', batchSize);

        $('#progress').find('#progress-message').text('Processing approve mass');
        $.ajax({
            url: `{{ route('site.dashboard.approvemass', ['site' => $site->slug]) }}`,
            method: 'POST',
            data: data,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(response) {
                console.log(response);
                if (response.hasMore) {
                    var totalSize = response.totalSize;
                    var progress = (batch * batchSize) + '/' + totalSize + ' Data';
                    $('#progress').find('.show').text(progress);
                    $('#progress').find('.progress-bar').width(((batch * batchSize) / totalSize * 100) +
                        '%');
                    console.log("Batch: " + batch + " status " + status);
                    console.log(response);
                    processBatch(ids, status, response.nextBatch);
                } else {
                    $('#progress').find('.show').text('');
                    $('#progress').find('.progress-bar').width('0%');
                    setTimeout(function() {
                        $('#progress').modal('hide');
                    }, 1000);
                    location.reload();
                }
            },
            error: function(xhr) {
                setTimeout(function() {
                    $('#progress').modal('hide');
                }, 1000);
                alert('An error occurred: ' + xhr.responseText);
            }
        });
    }

</script>
@endpush