@extends('site.layouts.app')
@section('title', 'Dashboard')
@section('subtitle', 'Control Panel')
@section('stylesheets')
    <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">
@endsection
@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 Villa Owner</h4>

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

            </div>
        </div>
    </div>
    <div class="container-fluid">

        <div class="row">
            <div class="col">

                <div class="h-100">
                    {{-- <div class="row mb-3 pb-1">
                        <div class="col-12">
                            <div class="d-flex align-items-lg-center flex-lg-row flex-column">
                                <div class="flex-grow-1">
                                    <h4 class="fs-16 mb-1">Good Morning, Anna!</h4>
                                    <p class="text-muted mb-0">Here's what's happening with your store today.</p>
                                </div>
                                <div class="mt-3 mt-lg-0">
                                    <form action="javascript:void(0);">
                                        <div class="row g-3 mb-0 align-items-center">
                                            <div class="col-sm-auto">
                                                <div class="input-group">
                                                    <input type="text"
                                                        class="form-control border-0 dash-filter-picker shadow"
                                                        data-provider="flatpickr" data-range-date="true"
                                                        data-date-format="d M, Y"
                                                        data-deafult-date="01 Jan 2022 to 31 Jan 2022">
                                                    <div class="input-group-text bg-primary border-primary text-white">
                                                        <i class="ri-calendar-2-line"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-auto">
                                                <button type="button" class="btn btn-soft-secondary"><i
                                                        class="ri-add-circle-line align-middle me-1"></i> Add
                                                    Product</button>
                                            </div>
                                            <!--end col-->
                                            <div class="col-auto">
                                                <button type="button"
                                                    class="btn btn-soft-info btn-icon waves-effect waves-light layout-rightside-btn"><i
                                                        class="ri-pulse-line"></i></button>
                                            </div>
                                            <!--end col-->
                                        </div>
                                        <!--end row-->
                                    </form>
                                </div>
                            </div><!-- end card header -->
                        </div>
                        <!--end col-->
                    </div> --}}
                    <!--end row-->

                    <div class="row">
                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <div class="card card-animate bg-primary">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Total Revenue</p>
                                        </div>
                                        {{-- <div class="flex-shrink-0">
                                            <h5 class="text-white fs-14 mb-0">
                                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> 0
                                            </h5>
                                        </div> --}}
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-bold ff-secondary text-white mb-4">
                                                <span class="counter-value" data-target="0"></span>
                                            </h4>
                                            <a href="" class="text-decoration-underline text-white-50">View all revenue</a>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                                                <i class="bx bx-dollar-circle text-white"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <div class="card card-animate bg-secondary">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Total Expense</p>
                                        </div>
                                        {{-- <div class="flex-shrink-0">
                                            <h5 class="text-white fs-14 mb-0">
                                                <i class="ri-arrow-right-down-line fs-13 align-middle"></i> 0
                                            </h5>
                                        </div> --}}
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-bold ff-secondary text-white mb-4">
                                                <span class="counter-value" data-target="0">0</span>
                                            </h4>
                                            <a href="" class="text-decoration-underline text-white-50">View all expense</a>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                                                <i class="bx bx-shopping-bag text-white"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <div class="card card-animate bg-success">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">My Balance</p>
                                        </div>
                                        {{-- <div class="flex-shrink-0">
                                            <h5 class="text-white fs-14 mb-0">
                                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +29.08 %
                                            </h5>
                                        </div> --}}
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-bold ff-secondary text-white mb-4">
                                                <span class="counter-value" data-target="0"></span>
                                            </h4>
                                            <a href="" class="text-decoration-underline text-white-50">See details</a>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                                                <i class="bx bx-user-circle text-white"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->

                        <div class="col-xl-3 col-md-6">
                            <!-- card -->
                            <div class="card card-animate bg-info">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Days Allowance
                                            </p>
                                        </div>
                                        {{-- <div class="flex-shrink-0">
                                            <h5 class="text-white fs-14 mb-0">
                                                +0.00 %
                                            </h5>
                                        </div> --}}
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <h4 class="fs-22 fw-bold ff-secondary text-white mb-4">
                                                <span class="counter-value" data-target="0"></span>
                                            </h4>
                                            <a href="" class="text-decoration-underline text-white-50">See details</a>
                                        </div>
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                                                <i class="bx bx-wallet text-white"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->
                    </div> <!-- end row-->

                    <div class="row">
                        <div class="col-lg-7">
                            <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>
                                    </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-lg-5">
                            <div class="card">
                                <div class="card-header align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Ticket Status</h4>
                                    <div class="flex-shrink-0">
                                        <select name="year_line" class="select2" id="year_line_ticket">
                                            @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-body">
                                    <table class="table table-bordered table-striped align-middle no-footer dtr-inline" id="ticketTable" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th width="10">Item No</th>
                                                <th width="10">Villa</th>
                                                <th width="20">Item</th>
                                                <th width="5">Status</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- end col -->
                    </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 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() {
            dataTableVilla = $('#ticketTable').DataTable( {
                stateSave: true,
                processing: true,
                serverSide: true,
                filter: false,
                info: false,
                lengthChange: true,
                lengthMenu: [5, 10, 15, 20],
                responsive: false,
                scrollX: true,
                order: [[ 0, "asc" ]],
                ajax: {
                    url: "{{route('site.home.readticketowner',['site'=>$site->slug])}}",
                    type: "GET",
                    data:function(data){
                        data.year_line = $('#year_line_ticket').val();
                    }
                },
                columnDefs:[
                    {
                        className: "text-center",
                        targets: [3]
                    },
                    {
                        render: function(data, type, row) {
                            return `${data}<br><p class="text-muted">${row.date_format}</p>`
                        },
                        targets: [0]
                    },
                    {
                        render: function(data, type, row) {
                            var text = '';
                            if (data == 'draft') {
                                text = `<span class="badge bg-light text-body">Draft</span>`;
                            } else if (data == 'new') {
                                text = `<span class="badge bg-primary">New</span>`;
                            } else if (data == 'in progress') {
                                text = `<span class="badge bg-warning">In Progress</span>`
                            } else if (data == 'reopened') {
                                text = `<span class="badge bg-orange">Reopened</span>`
                            } else {
                                text = `<span class="badge bg-success text-capitalize">${data}</span>`
                            }
                            return text;
                        },
                        targets: [3]
                    }
                ],
                columns: [
                    { data: "ticket_item_no" },
                    { data: "villa_name" },
                    { data: "item" },
                    { data: "status" },
                ]
            });

            $('.select2').select2();

            $('#year_donut').on('change', function() {
                chartWO();
            });

            $('#year_line').on('change', function() {
                chartWO();
            });

            $('#year_line_ticket').on('change', function() {
                dataTableVilla.draw();
            });

            chartWO();
        });

        function chartWO() {
            var yearLine    = $('#year_line').val();

            $.ajax({
                url: "{{ route('site.home.chartwoowner', ['site' => $site->slug]) }}",
                type: "GET",
                dataType: 'json',
                data: {
                    year_line: yearLine,
                },
                success: function(data) {

                    $('#open').html(accounting.formatMoney(data.countopen, '', ',', '.'));
                    $('#pending').html(accounting.formatMoney(data.countpending, '', ',', '.'));
                    $('#done').html(accounting.formatMoney(data.countdone, '', ',', '.'));
                    $('#total').html(accounting.formatMoney(data.counttotal, '', ',', '.'));

                    // Initialize or update chart configurations
                    renderBarChart("status_wo", data.month, [
                        { name: 'Open', data: data.valueopen },
                        { name: 'Pending', data: data.valuepending },
                        { name: 'Done', data: data.valuedone },
                    ], getChartColorsArray("status_wo"));
                }
            });
        }

        // Function to render or update a bar chart
        function renderBarChart(elementId, categories, seriesData, colors) {
            var chartOptions = {
                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: seriesData,
                colors: colors,
                xaxis: { categories: categories },
                yaxis: { title: { text: 'Value' } },
                grid: { borderColor: '#f1f1f1' },
                fill: { opacity: 1 },
                tooltip: {
                    y: { formatter: function(val) { return val; } }
                }
            };

            var chart = new ApexCharts(document.querySelector("#" + elementId), chartOptions);
            chart.render();

            // Update chart data if the chart already exists
            if (chart) {
                chart.updateSeries(seriesData);
            }
        }

    </script>
@endpush