@extends('layouts.pengawas')

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.3.0/apexcharts.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.3.0/apexcharts.min.css" />
<script>
    // Line Chart Configurations
    var lineChartOptions = {
        series: {!! json_encode($chartData) !!},
        chart: {
            height: 400,
            type: 'line',
            toolbar: { show: true },
            zoom: { enabled: false },
            animations: { enabled: true, easing: 'easeinout', speed: 1200 },
        },
        stroke: { curve: 'smooth', width: 3 },
        colors: ['#1E90FF', '#FF6347', '#32CD32', '#FF1493', '#FFD700'],
        xaxis: {
            categories: {!! json_encode($labels) !!},
            labels: {
                formatter: value => moment(value, 'YYYY-MM-DD').format('DD-MM-YYYY'),
                style: { fontSize: '13px', colors: '#555' },
            },
        },
        yaxis: {
            title: { text: 'Selisih Setoran', style: { fontSize: '16px', fontWeight: 'bold' } },
        },
        tooltip: {
            theme: 'dark',
            y: { formatter: value => 'Rp ' + value.toLocaleString() },
        },
    };
    new ApexCharts(document.querySelector("#chart"), lineChartOptions).render();

    // Pie Chart Configurations
    var pieChartOptions = {
        series: {!! json_encode($chartuhuyData) !!},
        chart: { type: 'pie', height: 350 },
        labels: {!! json_encode($chartuhuyLabels) !!},
        colors: ['#1E90FF', '#FF6347', '#32CD32', '#FF1493', '#FFD700'],
        tooltip: {
            theme: 'dark',
            y: { formatter: value => 'Rp ' + value.toLocaleString() },
        },
    };
    new ApexCharts(document.querySelector("#chartuhuy"), pieChartOptions).render();
</script>
@endsection

@section('content')
<div class="content-body">
    <div class="container-fluid">
        <!-- Page Title and Breadcrumb -->
        <div class="row align-items-center mb-4">
            <div class="col-md-6">
                <h3 class="text-primary font-weight-bold">Dashboard</h3>
                <p class="text-muted">Welcome back! Here's your business overview.</p>
            </div>
            <div class="col-md-6 text-md-right">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-end bg-light p-2">
                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Overview</li>
                    </ol>
                </nav>
            </div>
        </div>

        <!-- Filter Form -->
        <form action="{{ route('pengawas.dashboard') }}" method="GET" class="row mb-4 bg-light p-3 rounded">
            <div class="col-md-3">
                <label for="start_date">Start Date</label>
                <input type="date" name="start_date" id="start_date" class="form-control" value="{{ request('start_date') }}">
            </div>
            <div class="col-md-3">
                <label for="end_date">End Date</label>
                <input type="date" name="end_date" id="end_date" class="form-control" value="{{ request('end_date') }}">
            </div>
            <div class="col-md-3">
                <label for="user_id">User</label>
                <select name="user_id" id="user_id" class="form-control">
                    <option value="">Select User</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id_user }}" {{ request('user_id') == $user->id_user ? 'selected' : '' }}>
                            {{ $user->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label for="location">Location</label>
                <select name="location" id="location" class="form-control">
                    <option value="">Select Location</option>
                    @foreach($locations as $location)
                        <option value="{{ $location->id_lokasi }}" {{ request('location') == $location->id_lokasi ? 'selected' : '' }}>
                            {{ $location->nama_lokasi }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-12 mt-3 text-right">
                <button type="submit" class="btn btn-primary">Apply Filters</button>
            </div>
        </form>

        <!-- Statistics -->
        <div class="row">
            <div class="col-md-3">
                <div class="card shadow-sm border-0 bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-wallet fa-3x mr-3"></i>
                            <div>
                                <h5 class="card-title">Pendapatan</h5>
                                <h3>Rp {{ number_format($totalPendapatan, 0, ',', '.') }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card shadow-sm border-0 bg-warning text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-balance-scale fa-3x mr-3"></i>
                            <div>
                                <h5 class="card-title">Selisih Setoran</h5>
                                <h3>Rp {{ number_format($totalSelisihPendapatan, 0, ',', '.') }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card shadow-sm border-0 bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-users fa-3x mr-3"></i>
                            <div>
                                <h5 class="card-title">Pengguna</h5>
                                <h3>{{ $totalUsers }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card shadow-sm border-0 bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-chart-line fa-3x mr-3"></i>
                            <div>
                                <h5 class="card-title">Kegiatan</h5>
                                <h3>{{ $totalKegiatan }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts -->
        <div class="row mt-4">
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h5>Selisih Pendapatan per User</h5>
                    </div>
                    <div class="card-body">
                        <div id="chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card shadow-sm">
                    <div class="card-header bg-secondary text-white">
                        <h5>Total Selisih Setoran Per User</h5>
                    </div>
                    <div class="card-body">
                        <div id="chartuhuy"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        <h5>Detail Transaksi</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-striped">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Tanggal Transaksi</th>
                                    <th>Pengguna</th>
                                    <th>Lokasi</th>
                                    <th>Selisih Setoran</th>
                                    <th>Pendapatan Akhir</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($data as $item)
                                    <tr>
                                        <td>{{ $item->tanggal_transaksi }}</td>
                                        <td>{{ $item->user->name }}</td>
                                        <td>{{ $item->lokasi->nama_lokasi }}</td>
                                        <td>Rp {{ number_format($item->total_selisih_setoran, 0, ',', '.') }}</td>
                                        <td>Rp {{ number_format($item->total_pendapatan_akhir, 0, ',', '.') }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection