@extends('site.layouts.app')
@section('title', 'Dashboard IT')
@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;
        }
    </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 IT</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('site.home', ['site' => $site->slug]) }}">Dashboard
                                IT</a></li>
                    </ol>
                </div>

            </div>
        </div>
    </div>
    <div class="container-fluid">
        <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.account.create',['site'=>$site->slug])}}" class="btn btn-info add-btn" ><i class="ri-add-fill me-1 align-bottom"></i> Add Account</a>
                    </div>
                    <div class="flex-shrink-0">
                        <div class="hstack text-nowrap gap-2">
                        <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">

                <div class="h-100">
                    <div class="row">
                        <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">Overview Status Work Order</h4>
                                    <div>
                                        <select name="year_line" class="select2" id="year_line">
                                            @php
                                                $year_now = date('Y');
                                            @endphp
                                            @for ($i = $year_now; $i >= 1991; $i--)
                                                <option @if ($i == date('Y')) selected @endif
                                                    value="{{ $i }}">{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div><!-- end card header -->

                                <div class="card-header p-0 border-0 bg-light-subtle">
                                    <div class="row g-0 text-center">
                                        <div class="col-6 col-sm-3">
                                            <div class="p-3 border border-dashed border-start-0">
                                                <h5 class="mb-1"><span class="counter-value" id="total">0</span></h5>
                                                <p class="text-muted mb-0">Total WO</p>
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-6 col-sm-3">
                                            <div class="p-3 border border-dashed border-start-0">
                                                <h5 class="mb-1"><span class="counter-value" id="open">0</span></h5>
                                                <p class="text-muted mb-0">Open</p>
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-6 col-sm-3">
                                            <div class="p-3 border border-dashed border-start-0">
                                                <h5 class="mb-1"><span class="counter-value" id="pending">0</span></h5>
                                                <p class="text-muted mb-0">Pending</p>
                                            </div>
                                        </div>
                                        <div class="col-6 col-sm-3">
                                            <div class="p-3 border border-dashed border-start-0">
                                                <h5 class="mb-1"><span class="counter-value" id="done">0</span></h5>
                                                <p class="text-muted mb-0">Done</p>
                                            </div>
                                        </div>
                                        <!--end col-->
                                        {{-- <div class="col-6 col-sm-3">
                                        <div
                                            class="p-3 border border-dashed border-start-0 border-end-0">
                                            <h5 class="mb-1 text-success"><span class="counter-value" data-target="75">0</span>%</h5>
                                            <p class="text-muted mb-0">Conversation Ratio</p>
                                        </div>
                                    </div> --}}
                                        <!--end col-->
                                    </div>
                                </div><!-- end card header -->

                                <div class="card-body p-0 pb-2">
                                    <div class="w-100">
                                        <div id="status_wo" data-colors='["--vz-primary","--vz-warning", "--vz-success"]'
                                            class="apex-charts" dir="ltr"></div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->

                        {{-- <div class="col-xl-4">
                        <div class="card card-height-100">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Work Order by Department</h4>
                                <div class="flex-shrink-0">
                                    <div>
                                        <select name="year_donut" class="select2" id="year_donut">
                                            @php
                                                $year_now = date('Y');
                                            @endphp
                                            @for ($i = $year_now; $i >= 1991; $i--)
                                                <option @if ($i == date('Y')) selected @endif
                                                    value="{{ $i }}">{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                            </div><!-- end card header -->

                            <div class="card-body">
                                <div id="dept_wo" data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]' class="apex-charts" dir="ltr"></div>
                            </div>
                        </div> <!-- .card-->
                    </div> --}}
                        <!-- end col -->
                    </div>

                    <div class="row">
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-header align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Work Order Category</h4>
                                    <div class="flex-shrink-0">
                                        <select class="form-control-plaintext select2" name="month_category"
                                            id="month_category" data-placeholder="Month">
                                            @php
                                                $month_now = date('m');
                                            @endphp
                                            <option @if ($month_now == '01') selected @endif value="01">January
                                            </option>
                                            <option @if ($month_now == '02') selected @endif value="02">
                                                February
                                            </option>
                                            <option @if ($month_now == '03') selected @endif value="03">March
                                            </option>
                                            <option @if ($month_now == '04') selected @endif value="04">April
                                            </option>
                                            <option @if ($month_now == '05') selected @endif value="05">May
                                            </option>
                                            <option @if ($month_now == '06') selected @endif value="06">June
                                            </option>
                                            <option @if ($month_now == '07') selected @endif value="07">July
                                            </option>
                                            <option @if ($month_now == '08') selected @endif value="08">August
                                            </option>
                                            <option @if ($month_now == '09') selected @endif value="09">
                                                September
                                            </option>
                                            <option @if ($month_now == '10') selected @endif value="10">
                                                October
                                            </option>
                                            <option @if ($month_now == '11') selected @endif value="11">
                                                November
                                            </option>
                                            <option @if ($month_now == '12') selected @endif value="12">
                                                December
                                            </option>
                                        </select>
                                    </div>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <table
                                        class="table table-bordered nowrap table-striped align-middle no-footer dtr-inline datatable-category"
                                        style="width:100%">
                                        <thead>
                                            <tr>
                                                <th width="10">#</th>
                                                <th width="20">Category Work Order</th>
                                                {{-- <th width="30">Department</th> --}}
                                                <th width="20">Total</th>
                                                <th width="20">Open (%)</th>
                                                <th width="20">Pending (%)</th>
                                                <th width="20">Closed (%)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- @foreach ($categories as $i => $cat)
                                        <tr>
                                            <td>{{ $i+1}}</td>
                                            <td><b>{{ $cat->name }}</b> <br> {{ $cat->description }}</td> </td>
                                            <td>{{ $cat->dep_name }}</td>
                                            <td>{{ $cat->category }}</td>


                                        </tr>
                                        @endforeach --}}
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>

                        <div class="col-xl-6">
                            <div class="card card-height-100">
                                <div class="card-header align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Villa Work Order</h4>
                                    <div class="flex-shrink-0">
                                        <select class="form-control-plaintext select2" name="month_villa" id="month_villa"
                                            data-placeholder="Month">
                                            @php
                                                $month_now = date('m');
                                            @endphp
                                            <option @if ($month_now == '01') selected @endif value="01">
                                                January
                                            </option>
                                            <option @if ($month_now == '02') selected @endif value="02">
                                                February
                                            </option>
                                            <option @if ($month_now == '03') selected @endif value="03">
                                                March</option>
                                            <option @if ($month_now == '04') selected @endif value="04">
                                                April</option>
                                            <option @if ($month_now == '05') selected @endif value="05">May
                                            </option>
                                            <option @if ($month_now == '06') selected @endif value="06">June
                                            </option>
                                            <option @if ($month_now == '07') selected @endif value="07">July
                                            </option>
                                            <option @if ($month_now == '08') selected @endif value="08">
                                                August</option>
                                            <option @if ($month_now == '09') selected @endif value="09">
                                                September
                                            </option>
                                            <option @if ($month_now == '10') selected @endif value="10">
                                                October
                                            </option>
                                            <option @if ($month_now == '11') selected @endif value="11">
                                                November
                                            </option>
                                            <option @if ($month_now == '12') selected @endif value="12">
                                                December
                                            </option>
                                        </select>
                                    </div>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <table
                                        class="table table-bordered display nowrap table-striped align-middle no-footer dtr-inline"
                                        id="villa-table" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th width="5">#</th>
                                                {{-- <th width="15%">Photo</th> --}}
                                                <th width="10">Villa Name</th>
                                                <th width="20">Total</th>
                                                <th width="20">Open (%)</th>
                                                <th width="20">Pending (%)</th>
                                                <th width="20">Closed (%)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- @foreach ($villas as $i => $v)
                                        @php
                                                $image = $v->main_image_path ? asset('storage/images')."/".$v->main_image_path : asset('assets/img/no-image.png');
                                        @endphp
                                        <tr>
                                            <td>{{ $i+1 }}</td>
                                            <td>
                                                    <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0 me-3">
                                                        <div class="avatar-sm bg-light border boord  p-1">
                                                        <img src="{{ $image }}" alt="" class="img-fluid d-block" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                {{ $v->name }} <br>
                                                Area: {{ $v->area_name }}
                                            </td>
                                            <td>
                                                {{ $v->company_name }}
                                            </td>
                                            <td>
                                                {{ $v->location }}
                                            </td>
                                        </tr>
                                        @endforeach --}}
                                        </tbody>
                                    </table>

                                </div>
                            </div> <!-- .card-->
                        </div> <!-- .col-->
                    </div> <!-- end row-->

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

            </div> <!-- end col -->
        </div>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="searchCanvas" aria-labelledby="searchCanvasLabel">
        <div class="offcanvas-header bg-light">
            <h5 class="offcanvas-title" id="searchCanvasLabel">Filter</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <!--end offcanvas-header-->
        <div class="offcanvas-body">
            <form id="form-search" autocomplete="off">
                <div class="mb-3">
                    <label class="control-label" for="code">Code</label>
                    <input type="text" name="code" class="form-control" placeholder="Code">
                </div>
                <div class="mb-3">
                    <label class="control-label" for="name">Name</label>
                    <input type="text" name="name" class="form-control" placeholder="Name">
                </div>
            </form>
        </div>
        <!--end offcanvas-body-->
        <div class="offcanvas-footer border-top p-3 d-grid">
            <button form="form-search" type="submit" class="btn btn-primary" title="Apply"><i
                    class="ri-search-line"></i> Filter</button>
        </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 getChartColorsArray(chartId) {
            if (document.getElementById(chartId) !== null) {
                var colors = document.getElementById(chartId).getAttribute("data-colors");
                if (colors) {
                    colors = JSON.parse(colors);
                    return colors.map(function(value) {
                        var newValue = value.replace(" ", "");
                        if (newValue.indexOf(",") === -1) {
                            var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
                            if (color) return color;
                            else return newValue;;
                        } else {
                            var val = value.split(',');
                            if (val.length == 2) {
                                var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
                                rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
                                return rgbaColor;
                            } else {
                                return newValue;
                            }
                        }
                    });
                }
            }
        }

        $(function() {
            $('.select2').select2();
            // dataTableCategory = $('.datatable-category').DataTable( {
            //     stateSave:true,
            //     processing: true,
            //     serverSide: true,
            //     filter:false,
            //     info:false,
            //     lengthChange:false,
            //     responsive: false,
            //     scrollX: true,
            //     order: [[ 2, "desc" ]],
            //     ajax: {
            //         url: "{{ route('site.home.readwocategory', ['site' => $site->slug]) }}",
            //         type: "GET",
            //         data:function(data){
            //             // var name = $('#form-search').find('input[name=name]').val();
            //             data.month_category = $('#month_category').val();
            //             data.department = 'IT';
            //         }
            //     },
            //     columnDefs:[
            //         {
            //             orderable: false,targets:[0]
            //         },
            //         { className: "text-end", targets: [2,3,4,5] },
            //         { className: "text-center", targets: [0,2] },
            //         // { render: function ( data, type, row ) {
            //         //     return `<b>${row.name}</b><br><small>${row.description}</small>`;
            //         //     },targets: [1]
            //         // },
            //         {
            //             render: function(data, type, row) {
            //                 if(data>0){
            //                     return accounting.formatMoney(data, '', ',', '.');
            //                 }else{
            //                     return '-';
            //                 }
            //             },
            //             targets: [2]
            //         },
            //         {
            //             render: function(data, type, row) {
            //                 var percen = (data / row.category) * 100;
            //                 return `${data} (${percen.toFixed(2)}%)`;
            //             },
            //             targets: [3,4,5]
            //         },
            //     ],
            //     columns: [
            //         { data: "no" },
            //         { data: "name" },
            //         // { data: "dep_name" },
            //         { data: "category" },
            //         { data: "open" },
            //         { data: "pending" },
            //         { data: "closed" },
            //     ]
            // });

            dataTableVilla = $('#villa-table').DataTable({
                stateSave: true,
                processing: true,
                serverSide: true,
                filter: false,
                info: false,
                lengthChange: false,
                responsive: false,
                scrollX: true,
                order: [
                    [1, "asc"]
                ],
                ajax: {
                    url: "{{ route('site.home.readwovilla', ['site' => $site->slug]) }}",
                    type: "GET",
                    data: function(data) {
                        // var name = $('#form-search').find('input[name=name]').val();
                        data.month_villa = $('#month_villa').val();
                        data.department = 'IT';
                    }
                },
                columnDefs: [{
                        orderable: false,
                        targets: [0]
                    },
                    {
                        className: "text-end",
                        targets: [2, 3, 4, 5]
                    },
                    {
                        className: "text-center",
                        targets: [0]
                    },
                    {
                        render: (data, type, row) => {
                            let image = row.main_image_path ?
                                `{{ asset('storage/images') }}/${row.main_image_path}` :
                                `{{ asset('assets/img/no-image.png') }}`;
                            return (`
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0 me-3">
                                <div class="avatar-sm bg-light border boord  p-1">
                                  <img src="${image}" alt="" class="img-fluid d-block" />
                                </div>
                              </div>
                              <div class="flex-grow-1">
                                <h5 class="fs-14 mb-1">
                                    <strong>${row.name}</strong>
                                </h5>
                                <p class="mb-0">${row.area_name}</p>
                              </div>
                            </div>`);
                        },
                        targets: [1]
                    },
                    {
                        render: function(data, type, row) {
                            if (data > 0) {
                                return accounting.formatMoney(data, '', ',', '.');
                            } else {
                                return '-';
                            }
                        },
                        targets: [2]
                    },
                    {
                        render: function(data, type, row) {
                            var percen = (data / row.location) * 100;
                            return `${data} (${percen.toFixed(2)}%)`;
                        },
                        targets: [3, 4, 5]
                    },

                ],
                columns: [{
                        data: "no"
                    },
                    {
                        data: "name"
                    },
                    // { data: "company_name" },
                    {
                        data: "location"
                    },
                    {
                        data: "open"
                    },
                    {
                        data: "pending"
                    },
                    {
                        data: "closed"
                    },
                ]
            });
            $('#year_line').on('change', function() {
                chartdonut();
            });

            $('#month_category').on('change', function() {
                dataTableCategory.draw();
            });
            $('#month_villa').on('change', function() {
                dataTableVilla.draw();
            });

            chartdonut();
        });

        function chartdonut() {
            var year_line = $('#year_line').val();
            var year_donut = $('#year_donut').val();
            $.ajax({
                url: "{{ route('site.home.chartdept', ['site' => $site->slug]) }}",
                type: "GET",
                dataType: 'json',
                data: {
                    year_line: year_line,
                    year_donut: year_donut,
                    department: 'IT',
                },
                success: function(data) {
                    // console.log(data.valuedone);
                    $('#open').html(accounting.formatMoney(data.countopen, '', ',', '.'));
                    $('#pending').html(accounting.formatMoney(data.countpending, '', ',', '.'));
                    $('#done').html(accounting.formatMoney(data.countdone, '', ',', '.'));
                    $('#total').html(accounting.formatMoney(data.counttotal, '', ',', '.'));
                    var chartColumnColors = getChartColorsArray("status_wo");
                    if (chartColumnColors) {
                        var chartwo = {
                            chart: {
                                height: 350,
                                type: 'bar',
                                toolbar: {
                                    show: false,
                                }
                            },
                            plotOptions: {
                                bar: {
                                    horizontal: false,
                                    columnWidth: '45%',
                                    endingShape: 'rounded'
                                },
                            },
                            dataLabels: {
                                enabled: false
                            },
                            stroke: {
                                show: true,
                                width: 2,
                                colors: ['transparent']
                            },
                            series: [{
                                name: 'Open',
                                data: data.valueopen
                            }, {
                                name: 'Pending',
                                data: data.valuepending
                            }, {
                                name: 'Done',
                                data: data.valuedone
                            }],
                            colors: chartColumnColors,
                            xaxis: {
                                categories: data.month,
                            },
                            yaxis: {
                                title: {
                                    text: 'Value'
                                }
                            },
                            grid: {
                                borderColor: '#f1f1f1',
                            },
                            fill: {
                                opacity: 1

                            },
                            tooltip: {
                                y: {
                                    formatter: function(val) {
                                        return val
                                    }
                                }
                            }
                        }

                        var chartwo = new ApexCharts(
                            document.querySelector("#status_wo"),
                            chartwo
                        );

                        chartwo.render();
                    }

                    // var chartPieBasicColors = getChartColorsArray("dept_wo");
                    // if(chartPieBasicColors){
                    // var chartdept = {
                    //     series: data.value_donut,
                    //     chart: {
                    //         height: 350,
                    //         type: 'pie',
                    //     },
                    //     labels: data.label_donut,
                    //     legend: {
                    //         position: 'bottom'
                    //     },
                    //     dataLabels: {
                    //         dropShadow: {
                    //             enabled: false,
                    //         }
                    //     },
                    //     colors: chartPieBasicColors
                    // };

                    // var chartdept = new ApexCharts(document.querySelector("#dept_wo"), chartdept);
                    // chartdept.render();
                    // }

                    chartwo.updateSeries([{
                        name: 'Open',
                        data: data.valueopen
                    }, {
                        name: 'Pending',
                        data: data.valuepending
                    }, {
                        name: 'Done',
                        data: data.valuedone
                    }]);

                    // chartdept.updateSeries(data.value_donut);
                    // chartdept.updateOptions({
                    //     labels: data.label_donut
                    // });
                }
            })




        }
    </script>
@endpush