@extends('layouts.backoffice.index', ['title' => 'dashboard'])

@section('main')
    <section class="section">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-12">
                <div class="card card-statistic-2">
                    <div class="card-icon shadow-primary bg-primary">
                        <i class="fas fa-archive"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="card-header">
                            <h4>Pesan Masuk</h4>
                        </div>
                        <div class="card-body">
                            {{ $messages }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-12">
                <div class="card card-statistic-2">
                    <div class="card-icon shadow-primary bg-primary">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="card-header">
                            <h4>Produk</h4>
                        </div>
                        <div class="card-body">
                            {{ $catalogs }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-12">
                <div class="card card-statistic-2">
                    <div class="card-icon shadow-primary bg-primary">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="card-header">
                            <h4>Jumlah Kunjungan (Total)</h4>
                        </div>
                        <div class="card-body">
                            {{ $totalVisitors }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-12">
                <div class="card card-statistic-2">
                    <div class="card-icon shadow-primary bg-primary">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="card-header">
                            <h4>Jumlah Kunjungan (Bulan Ini)</h4>
                        </div>
                        <div class="card-body">
                            {{ $totalVisitorsThisMonth }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4>Statistik Pengunjung Bulanan</h4>

                        <div class="card-header-action" style="border-radius: 0px !important;">
                            <select id="visitorYearFilter" class="form-control" style="border-radius: 0px !important;">
                                @foreach ($availableYears as $year)
                                    <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>
                                        Tahun {{ $year }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="visitorChart" style="height: 350px; width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="card card-body">
            <h5>Pesan Masuk Baru</h5>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">No</th>
                            <th scope="col">Nama</th>
                            <th scope="col">Subjek</th>
                            <th scope="col">Isi Pesan</th>
                            <th scope="col">Email</th>
                            <th scope="col">Status</th>
                            <th scope="col">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($inboxes as $inbox)
                            <tr>
                                <th scope="row">{{ $loop->iteration }}</th>
                                <td>{{ $inbox->name }}</td>
                                <td>{{ $inbox->subject }}</td>
                                <td>{{ $inbox->message }}</td>
                                <td>{{ $inbox->email }}</td>
                                @if ($inbox->is_read == 1)
                                    <td>
                                        <div class="badge bg-success">Sudah Dibaca</div>
                                    </td>
                                    <td>
                                        -
                                    </td>
                                @else
                                    <td>
                                        <div class="badge bg-danger text-white">Belum Dibaca</div>
                                    </td>
                                    <td>
                                        <form action="{{ route('contact.readMessage', ['id' => $inbox->id]) }}"
                                            method="POST">
                                            @csrf
                                            <button type="submit" class="btn btn-success"><i class="fa fa-check"></i>
                                                Tandai Sudah
                                                Dibaca</button>
                                        </form>
                                    </td>
                                @endif
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </section>
@endsection
@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.bootstrap4.min.css">
@endpush

@push('scripts')
    <!-- DATATABLES JS -->
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/responsive.bootstrap4.min.js"></script>

    <script>
        ClassicEditor
        $(function() {
            $(".table").DataTable({
                responsive: true,
                autoWidth: false,
                pageLength: 10
            });
        });
    </script>
    <script>
        $(function() {
            $(".table").DataTable({
                responsive: true,
                autoWidth: false,
                pageLength: 10
            });
        });

        document.addEventListener("DOMContentLoaded", function() {
            var ctx = document.getElementById('visitorChart').getContext('2d');

            var initialData = {!! $chartData !!};

            var visitorChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Ags', 'Sep', 'Okt', 'Nov',
                        'Des'
                    ],
                    datasets: [{
                        label: 'Jumlah Pengunjung',
                        data: initialData,
                        backgroundColor: 'rgba(67, 94, 190, 0.2)',
                        borderColor: 'rgba(67, 94, 190, 1)',
                        borderWidth: 2,
                        pointBackgroundColor: '#ffffff',
                        pointRadius: 4,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                borderDash: [2, 2]
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top'
                        }
                    }
                }
            });

            $('#visitorYearFilter').on('change', function() {
                var selectedYear = $(this).val();
                var url = "{{ route('backoffice.dashboard') }}";
                $('#visitorChart').css('opacity', '0.5');

                $.ajax({
                    url: url,
                    type: "GET",
                    data: {
                        year: selectedYear
                    },
                    success: function(response) {
                        visitorChart.data.datasets[0].data = response.data;
                        visitorChart.update();

                        $('#visitorChart').css('opacity', '1');
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                        alert('Gagal memuat data grafik.');
                        $('#visitorChart').css('opacity', '1');
                    }
                });
            });
        });
    </script>
@endpush