@include('inc.header-inc')
<style>
    #sbu, #department{
        background: var(--sidebar-color) !important;
        color:var(--text-color);
    }
    .dashboard-box{
        background: var(--sidebar-color) !important;
    }
    canvas{
        background: var(--sidebar-color) !important;
    }
    .form-select, .select2-selection{
        background-color: var(--body-color) !important;
        color:var(--text-color);
    }
    .card-title{
        color:white !important;
    }
    #graph-title{
        background:var(--primary-color)
    }

    /* NEW STYLE */
    .select2-container--default .select2-selection--single{
        padding:12px 5px !important;
        height: 57px !important;
        width: 100% !important; 
        font-size: 16px !important;  
        position: relative !important;
        border:1px solid rgba(0,0,0,0.2) !important;
        background-color: var(--sidebar-color) !important;
        transition: var(--tran-03) !important;
    }
    body.dark .select2-container--default .select2-selection--single{
    border:1px solid var(--text-color) !important;
    transition: var(--tran-03) !important;
    }
    span.select2-selection__rendered{
        color: var(--text-color) !important;
        transition: var(--tran-03) !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow{
        font-size: 1.3em !important;
        padding: 25px 12px !important;
        height: 27px !important;
        position: absolute !important;
        top: 0px !important;
        right: 0px !important;
        width: 20px !important;
        transition: var(--tran-03) !important;
    }
</style>
<script src="{{asset('wms/js/Chart.js')}}"></script>
<section class="container-fluid p-3 py-2 " style="padding-bottom:300px;">
    <div class="card container-shadow py-3 mb-2" id="PRStitle-header">
        <div class="container-fluid">
            <div class="flex position-relative">
                <span class="fw-semibold fs-4 align-middle justify-content-start text-secondary" style="font-weight: 500; font-size: 1.5em;">{{ ucwords($title) }}</span>
            </div>  
        </div>
    </div>


    <!-- FILTERATION AND NUMBER CARD -->
    <div class="border rounded container-shadow p-2 mt-4 mb-3">
        @if(auth()->user()->user_level == 8 || auth()->user()->user_level == 6)
            <form method="POST" action="{{ route('dashboard') }}">
                @csrf
                <div class="input-group mt-2 mb-2">
                    <div class="form-floating form-floating-group flex-grow-1">
                        <select class="form-select" aria-label="Default select example" name="sbu" id="sbu" style="width:100%">
                            <option value="" selected>All SBU</option>
                            @foreach ($allSbu as $sbus )
                            <option value="{{$sbus->id}}">{{ucwords($sbus->sbu)}}</option>
                            @endforeach
                        </select>
                        <label for="statusSelect">Filter By Warehouse</label>
                    </div>
                    <button class="btn btn-primary" type="submit">Filter</button>
                </div>
            </form>
        @elseif(auth()->user()->user_level == 7 || auth()->user()->user_level == 5 || auth()->user()->user_level == 4)
            <form method="POST" action="{{ route('dashboard') }}">
                @csrf
                <div class="input-group mt-2 mb-2">
                    <div class="form-floating form-floating-group flex-grow-1">
                        <select class="form-select" aria-label="Default select example" name="department" id="department" style="width:100%">
                            <option value="">Select Department</option>
                            <option value="">All Department</option>
                            @foreach ($allDepartment as $depts )
                            <option value="{{$depts->department}}">{{ucwords(strtolower($depts->department))}}</option>
                            @endforeach
                        </select>
                        <label for="statusSelect">Filter By Department</label>
                    </div>
                    <button class="btn btn-primary" type="submit">Filter</button>
                </div>
            </form>
        @endif
        <div class="row g-3">
            <div class="col-xl-3 col-md-6">
                <div class="card h-100 ">
                    <div class="card-body border-start border-primary border-4 dashboard-box">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <div class="small fw-bold text-primary mb-1">
                                    Pending
                                    <h5>{{$sbudata['pending']}}</h5>
                                </div>
                            </div>
                            <div class="ms-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="48" hight="48" viewBox="0 0 24 24" style="fill: blue;transform: ;msFilter:;">
                                    <path d="M19 22h1v-2h-1v-1a7.014 7.014 0 0 0-3.433-6.02c-.355-.21-.567-.547-.567-.901v-.158c0-.354.212-.691.566-.9A7.016 7.016 0 0 0 19 5V4h1V2H4v2h1v1a7.016 7.016 0 0 0 3.434 6.021c.354.209.566.545.566.9v.158c0 .354-.212.691-.566.9A7.016 7.016 0 0 0 5 19v1H4v2h15zM17 4v1a5.005 5.005 0 0 1-1.004 3H8.004A5.005 5.005 0 0 1 7 5V4h10zM9.45 14.702c.971-.574 1.55-1.554 1.55-2.623V12h2v.079c0 1.068.579 2.049 1.551 2.623A4.98 4.98 0 0 1 16.573 17H7.427a4.977 4.977 0 0 1 2.023-2.298z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card h-100">
                    <div class="card-body card-body border-start border-info border-4 dashboard-box">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <div class="small fw-bold text-info mb-1">
                                    For Approval
                                    <h5>{{$sbudata['forApproval']}}</h5>
                                </div>
                            </div>
                            <div class="ms-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" style="fill: #0dcaf0;transform: ;msFilter:;">
                                    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card h-100">
                    <div class="card-body card-body border-start border-success border-4 dashboard-box">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <div class="small fw-bold text-success mb-1">
                                    Approved
                                    <h5>{{$sbudata['approved']}}</h5>
                                </div>
                            </div>
                            <div class="ms-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" style="fill: green;transform: ;msFilter:;">
                                    <path d="M4 21h1V8H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2zM20 8h-7l1.122-3.368A2 2 0 0 0 12.225 2H12L7 7.438V21h11l3.912-8.596L22 12v-2a2 2 0 0 0-2-2z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6" >
                <div class="card h-100">
                    <div class="card-body card-body border-start border-danger border-4 dashboard-box">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <div class="small fw-bold text-danger mb-1">
                                    Rejected
                                    <h5>{{$sbudata['rejected']}}</h5>
                                </div>
                            </div>
                            <div class="ms-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" style="fill: red;transform: ;msFilter:;">
                                    <path d="M20 3h-1v13h1a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM4 16h7l-1.122 3.368A2 2 0 0 0 11.775 22H12l5-5.438V3H6l-3.937 8.649-.063.293V14a2 2 0 0 0 2 2z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- CHART CONTAINER -->
    <div class="border rounded container-shadow mb-3 overflow-hidden">
        <div class="border-bottom p-3" id="graph-title">
            <h2 class="card-title mb-0 fs-5 fw-bolder">
                @if (auth()->user()->user_level == 8 || auth()->user()->user_level == 6)
                    {{strtoupper($sbu_val)}}
                @elseif (auth()->user()->user_level == 7)
                    {{strtoupper($dept_val)}}
                @elseif (auth()->user()->user_level == 2 || auth()->user()->user_level == 1)
                {{strtoupper(auth()->user()->department)}} DEPARTMENT
                @endif
            </h2>
        </div>
        <div class="p-2">
            <canvas id="sbuChart" height="302" style="display: block; box-sizing: border-box; width: 100%; height: 282px;"></canvas>
        </div>
    </div>

</section>
<!--container -->
<script>
    var ctx = document.getElementById('sbuChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
                    labels: {!! json_encode($sbulabels) !!},
                    datasets: [{
                        label: 'Pending',
                        data: {!! json_encode([$sbudata['pending']]) !!},
                        backgroundColor: '#0d6efd',
                        borderColor: '#0d6efd',
                        borderWidth: 1
                    },
                    {
                        label: 'For Approval',
                        data: {!! json_encode([$sbudata['forApproval']]) !!},
                        backgroundColor: '#0dcaf0',
                        borderColor: '#0dcaf0',
                        borderWidth: 1
                    },
                    {
                        label: 'Approved',
                        data: {!! json_encode([$sbudata['approved']]) !!},
                        backgroundColor: '#198754',
                        borderColor: '#198754',
                        borderWidth: 1
                    },
                    {
                        label: 'Rejected',
                        data: {!! json_encode([$sbudata['rejected']]) !!},
                        backgroundColor: '#dc3545',
                        borderColor: '#dc3545',
                        borderWidth: 1
                    }]
                },
        options: {
            scales: {
                yAxes: [{
                    ticks: {

                        beginAtZero: true
                    }
                }]
            }
        }
    });
    
</script>
{{-- <script>
    var ctx = document.getElementById('departmentChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
                    labels: {!! json_encode($auth_dept) !!},
                    datasets: [{
                        label: 'Pending',
                        data: {!! json_encode([$departmentData['pending']]) !!},
                        backgroundColor: '#0d6efd',
                        borderColor: '#0d6efd',
                        borderWidth: 1
                    },
                    {
                        label: 'For Approval',
                        data: {!! json_encode([$departmentData['forApproval']]) !!},
                        backgroundColor: '#0dcaf0',
                        borderColor: '#0dcaf0',
                        borderWidth: 1
                    },
                    {
                        label: 'Approved',
                        data: {!! json_encode([$departmentData['approved']]) !!},
                        backgroundColor: '#198754',
                        borderColor: '#198754',
                        borderWidth: 1
                    },
                    {
                        label: 'Rejected',
                        data: {!! json_encode([$departmentData['rejected']]) !!},
                        backgroundColor: '#dc3545',
                        borderColor: 'rgba(255, 206, 86, 1)',
                        borderWidth: 1
                    }]
                },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
          
</script>
<script>
    var ctx = document.getElementById('adminChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
                    labels: {!! json_encode($departmentlabels) !!},
                    datasets: [{
                        label: 'Pending',
                        data: {!! json_encode([$asAdmindata['pending']]) !!},
                        backgroundColor: '#0d6efd',
                        borderColor: '#0d6efd',
                        borderWidth: 1
                    },
                    {
                        label: 'For Approval',
                        data: {!! json_encode([$asAdmindata['forApproval']]) !!},
                        backgroundColor: '#0dcaf0',
                        borderColor: '#0dcaf0',
                        borderWidth: 1
                    },
                    {
                        label: 'Approved',
                        data: {!! json_encode([$asAdmindata['approved']]) !!},
                        backgroundColor: '#198754',
                        borderColor: '#198754',
                        borderWidth: 1
                    },
                    {
                        label: 'Rejected',
                        data: {!! json_encode([$asAdmindata['rejected']]) !!},
                        backgroundColor: '#dc3545',
                        borderColor: '#dc3545',
                        borderWidth: 1
                    }]
                },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
          
</script> --}}
<script>
    $(document).ready(function() {
        // Listen for the change event on the select element
        $('#sbu').on('change', function() {
            var sbu = $(this).val(); // Get the selected value
    
            // Send an AJAX request to your server-side endpoint
            $.ajax({
                url: '{{route('dashboard')}}',
                type: 'GET',
                data: {
                    _token: '{{ csrf_token() }}',
                    sbu: sbu
                },
                success: function(response) {
                    console.log(sbu);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });
    });
</script>
<script>
    $(document).ready(function() {
     $('#sbu').select2({
       
    });
    $('#department').select2({
     
    });
    
    
    });
</script>
@include('inc.footer-inc')
@include('inc.modal.modalloader')