@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Report Per Wilayah</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item">Report</li>
                <li class="breadcrumb-item active">Per Wilayah</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        <!-- Filter Card -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="bi bi-funnel"></i> Filter Report
                        </h5>
                        
                        <form action="{{ route('reports.by-region') }}" method="GET" class="row g-3">
                            <!-- Report Type -->
                            <div class="col-md-3">
                                <label class="form-label"><strong>Jenis Laporan</strong></label>
                                <select name="report_type" id="reportType" class="form-select">
                                    <option value="all" {{ $reportType == 'all' ? 'selected' : '' }}>Semua</option>
                                    <option value="umum" {{ $reportType == 'umum' ? 'selected' : '' }}>Tiket Umum</option>
                                    <option value="psb" {{ $reportType == 'psb' ? 'selected' : '' }}>PSB</option>
                                </select>
                            </div>
                            
                            <!-- Sub Category (only for umum) -->
                            <div class="col-md-3" id="subCategoryFilter" style="{{ $reportType == 'umum' ? '' : 'display:none' }}">
                                <label class="form-label"><strong>Sub Kategori</strong></label>
                                <select name="sub_category" class="form-select">
                                    <option value="all" {{ $subCategory == 'all' ? 'selected' : '' }}>Semua</option>
                                    <option value="dismantle" {{ $subCategory == 'dismantle' ? 'selected' : '' }}>Dismantle</option>
                                    <option value="gangguan" {{ $subCategory == 'gangguan' ? 'selected' : '' }}>Gangguan</option>
                                    <option value="relokasi" {{ $subCategory == 'relokasi' ? 'selected' : '' }}>Relokasi</option>
                                </select>
                            </div>
                            
                            <!-- Period -->
                            <div class="col-md-3">
                                <label class="form-label"><strong>Periode</strong></label>
                                <select name="period" class="form-select">
                                    <option value="daily" {{ $period == 'daily' ? 'selected' : '' }}>Harian</option>
                                    <option value="weekly" {{ $period == 'weekly' ? 'selected' : '' }}>Mingguan</option>
                                    <option value="monthly" {{ $period == 'monthly' ? 'selected' : '' }}>Bulanan</option>
                                    <option value="yearly" {{ $period == 'yearly' ? 'selected' : '' }}>Tahunan</option>
                                </select>
                            </div>
                            
                            <!-- Date -->
                            <div class="col-md-3">
                                <label class="form-label"><strong>Tanggal</strong></label>
                                <input type="date" name="date" class="form-control" value="{{ $date }}" max="{{ now()->format('Y-m-d') }}">
                            </div>
                            
                            <!-- Province Filter -->
                            <div class="col-md-3">
                                <label class="form-label"><strong>Provinsi</strong></label>
                                <select name="province_code" id="provinceSelect" class="form-select">
                                    <option value="">Semua Provinsi</option>
                                    @foreach(\App\Models\User::select('province_code', 'province_name')->whereNotNull('province_code')->whereNotNull('province_name')->distinct()->orderBy('province_name')->get() as $prov)
                                        <option value="{{ $prov->province_code }}" {{ $provinceCode == $prov->province_code ? 'selected' : '' }}>
                                            {{ $prov->province_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            
                            <!-- Regency Filter -->
                            <div class="col-md-3">
                                <label class="form-label"><strong>Kabupaten/Kota</strong></label>
                                <select name="regency_code" id="regencySelect" class="form-select" {{ !$provinceCode ? 'disabled' : '' }}>
                                    <option value="">Semua Kabupaten/Kota</option>
                                    @if($provinceCode)
                                        @foreach(\App\Models\User::where('province_code', $provinceCode)->select('regency_code', 'regency_name')->whereNotNull('regency_code')->whereNotNull('regency_name')->distinct()->orderBy('regency_name')->get() as $reg)
                                            <option value="{{ $reg->regency_code }}" {{ $regencyCode == $reg->regency_code ? 'selected' : '' }}>
                                                {{ $reg->regency_name }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            
                            <!-- District Filter -->
                            <div class="col-md-3">
                                <label class="form-label"><strong>Kecamatan</strong></label>
                                <select name="district_code" id="districtSelect" class="form-select" {{ !$regencyCode ? 'disabled' : '' }}>
                                    <option value="">Semua Kecamatan</option>
                                    @if($regencyCode)
                                        @foreach(\App\Models\User::where('regency_code', $regencyCode)->select('district_code', 'district_name')->whereNotNull('district_code')->whereNotNull('district_name')->distinct()->orderBy('district_name')->get() as $dist)
                                            <option value="{{ $dist->district_code }}" {{ $districtCode == $dist->district_code ? 'selected' : '' }}>
                                                {{ $dist->district_name }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            
                            <!-- Village Filter -->
                            <div class="col-md-3">
                                <label class="form-label"><strong>Kelurahan/Desa</strong></label>
                                <select name="village_code" class="form-select" {{ !$districtCode ? 'disabled' : '' }}>
                                    <option value="">Semua Kelurahan/Desa</option>
                                    @if($districtCode)
                                        @foreach(\App\Models\User::where('district_code', $districtCode)->select('village_code', 'village_name')->whereNotNull('village_code')->whereNotNull('village_name')->distinct()->orderBy('village_name')->get() as $vill)
                                            <option value="{{ $vill->village_code }}" {{ $villageCode == $vill->village_code ? 'selected' : '' }}>
                                                {{ $vill->village_name }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            
                            <!-- Action Buttons -->
                            <div class="col-md-6">
                                <label class="form-label d-block">&nbsp;</label>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-search"></i> Tampilkan
                                </button>
                                <a href="{{ route('reports.by-region') }}" class="btn btn-secondary">
                                    <i class="bi bi-arrow-clockwise"></i> Reset
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Period Info -->
        <div class="row">
            <div class="col-lg-12">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    <strong>Periode:</strong> {{ $periodLabel }} | 
                    <strong>Jenis:</strong> 
                    @if($reportType == 'all')
                        Semua
                    @elseif($reportType == 'umum')
                        Tiket Umum
                        @if($subCategory != 'all')
                            ({{ ucfirst($subCategory) }})
                        @endif
                    @else
                        PSB
                    @endif
                    @if(!empty($regionInfo))
                        | <strong>Wilayah:</strong>
                        @if(isset($regionInfo['province']))
                            {{ $regionInfo['province'] }}
                        @endif
                        @if(isset($regionInfo['regency']))
                            > {{ $regionInfo['regency'] }}
                        @endif
                        @if(isset($regionInfo['district']))
                            > {{ $regionInfo['district'] }}
                        @endif
                        @if(isset($regionInfo['village']))
                            > {{ $regionInfo['village'] }}
                        @endif
                    @else
                        | <strong>Wilayah:</strong> Semua Indonesia
                    @endif
                </div>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="card info-card customers-card">
                    <div class="card-body">
                        <h5 class="card-title">Total Laporan</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                <i class="bi bi-geo-alt"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $totalOrders }}</h6>
                                <span class="text-muted small pt-1">Total</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card info-card sales-card">
                    <div class="card-body">
                        <h5 class="card-title">Selesai</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center" style="background: #2eca6a;">
                                <i class="bi bi-check-circle text-white"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $ordersSelesai }}</h6>
                                <span class="text-success small pt-1">
                                    {{ $totalOrders > 0 ? round(($ordersSelesai / $totalOrders) * 100, 1) : 0 }}%
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card info-card revenue-card">
                    <div class="card-body">
                        <h5 class="card-title">Dalam Proses</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center" style="background: #f6c23e;">
                                <i class="bi bi-hourglass-split text-white"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $ordersProses }}</h6>
                                <span class="text-warning small pt-1">On Process</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card info-card customers-card">
                    <div class="card-body">
                        <h5 class="card-title">Ditolak</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center" style="background: #e74a3b;">
                                <i class="bi bi-x-circle text-white"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ $ordersDitolak }}</h6>
                                <span class="text-danger small pt-1">Rejected</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts -->
        <div class="row">
            @if(!empty($regionData))
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Distribusi per 
                            @if(!$villageCode && !$districtCode && !$regencyCode && !$provinceCode)
                                Provinsi
                            @elseif($provinceCode && !$regencyCode)
                                Kabupaten/Kota
                            @elseif($regencyCode && !$districtCode)
                                Kecamatan
                            @elseif($districtCode && !$villageCode)
                                Kelurahan/Desa
                            @endif
                        </h5>
                        <canvas id="regionChart" style="max-height: 300px;"></canvas>
                    </div>
                </div>
            </div>
            @endif
            
            @if(count($typeData) > 1 || ($reportType === 'umum' && count($subCategoryData) > 0))
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">
                            @if($reportType === 'all')
                                Jenis Laporan
                            @else
                                Sub Kategori
                            @endif
                        </h5>
                        <canvas id="typeChart" style="max-height: 300px;"></canvas>
                    </div>
                </div>
            </div>
            @endif
        </div>

        <!-- Detail Table -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="card-title mb-0">Detail Laporan</h5>
                            <button onclick="window.print()" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-printer"></i> Print
                            </button>
                        </div>

                        @if($ordersList->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-hover table-sm datatable">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Order ID</th>
                                            <th>Jenis</th>
                                            <th>Tanggal</th>
                                            <th>Customer</th>
                                            <th>Wilayah</th>
                                            <th>Teknisi</th>
                                            <th>Status</th>
                                            <th>Selesai</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($ordersList as $index => $order)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                <strong>#{{ $order->order_number }}</strong><br>
                                                <small class="text-muted">{{ $order->title }}</small>
                                            </td>
                                            <td>
                                                @if($order->type == 'umum')
                                                    <span class="badge bg-{{ $order->sub_category == 'dismantle' ? 'danger' : ($order->sub_category == 'gangguan' ? 'warning' : 'info') }}">
                                                        {{ ucfirst($order->sub_category) }}
                                                    </span>
                                                @else
                                                    <span class="badge bg-success">PSB</span>
                                                @endif
                                            </td>
                                            <td>
                                                <small>{{ $order->created_at->format('d M Y') }}</small><br>
                                                <small class="text-muted">{{ $order->created_at->format('H:i') }}</small>
                                            </td>
                                            <td>
                                                <strong>{{ $order->client_name }}</strong><br>
                                                <small class="text-muted">{{ $order->client_phone }}</small>
                                            </td>
                                            <td>
                                                <small>
                                                    @if($order->village_name)
                                                        {{ $order->village_name }},
                                                    @endif
                                                    @if($order->district_name)
                                                        {{ $order->district_name }}
                                                    @endif
                                                </small>
                                            </td>
                                            <td>
                                                @if($order->assignedTeknisi)
                                                    <small>{{ $order->assignedTeknisi->name }}</small>
                                                @else
                                                    <span class="badge bg-secondary">Belum Ditugaskan</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($order->status == 'completed')
                                                    <span class="badge bg-success">Selesai</span>
                                                @elseif($order->status == 'in_progress')
                                                    <span class="badge bg-primary">Dalam Proses</span>
                                                @elseif($order->status == 'assigned')
                                                    <span class="badge bg-info">Ditugaskan</span>
                                                @elseif($order->status == 'pending')
                                                    <span class="badge bg-warning">Pending</span>
                                                @else
                                                    <span class="badge bg-danger">{{ ucfirst($order->status) }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($order->completed_at)
                                                    <small>{{ $order->completed_at->format('d M Y') }}</small><br>
                                                    <small class="text-muted">{{ $order->completed_at->format('H:i') }}</small>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td>
                                                <a href="{{ route('orders.show', $order->id) }}" 
                                                   class="btn btn-sm btn-info" target="_blank">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="bi bi-inbox text-muted" style="font-size: 64px;"></i>
                                <h5 class="text-muted mt-3">Tidak Ada Data</h5>
                                <p class="text-muted">Tidak ada laporan pada periode dan wilayah ini</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle sub category filter based on report type
    const reportTypeSelect = document.getElementById('reportType');
    const subCategoryFilter = document.getElementById('subCategoryFilter');
    
    reportTypeSelect.addEventListener('change', function() {
        if (this.value === 'umum') {
            subCategoryFilter.style.display = 'block';
        } else {
            subCategoryFilter.style.display = 'none';
        }
    });
    
    // Region Chart (Bar)
    const regionCtx = document.getElementById('regionChart');
    if (regionCtx) {
        const regionData = @json($regionData);
        
        new Chart(regionCtx, {
            type: 'bar',
            data: {
                labels: Object.keys(regionData),
                datasets: [{
                    label: 'Jumlah Laporan',
                    data: Object.values(regionData),
                    backgroundColor: '#4e73df',
                    borderColor: '#4e73df',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });
    }
    
    // Type/Sub Category Chart (Doughnut)
    const typeCtx = document.getElementById('typeChart');
    if (typeCtx) {
        const reportType = '{{ $reportType }}';
        let chartData, chartLabels, chartColors;
        
        if (reportType === 'all') {
            // Show type breakdown
            const typeData = @json($typeData);
            chartLabels = Object.keys(typeData).map(key => key === 'umum' ? 'Tiket Umum' : 'PSB');
            chartData = Object.values(typeData);
            chartColors = Object.keys(typeData).map(key => key === 'umum' ? '#f6c23e' : '#2eca6a');
        } else if (reportType === 'umum') {
            // Show sub category breakdown
            const subCategoryData = @json($subCategoryData);
            const subCategoryLabels = {
                'dismantle': 'Dismantle',
                'gangguan': 'Gangguan',
                'relokasi': 'Relokasi'
            };
            const subCategoryColors = {
                'dismantle': '#e74a3b',
                'gangguan': '#f6c23e',
                'relokasi': '#36b9cc'
            };
            chartLabels = Object.keys(subCategoryData).map(key => subCategoryLabels[key] || key);
            chartData = Object.values(subCategoryData);
            chartColors = Object.keys(subCategoryData).map(key => subCategoryColors[key] || '#cccccc');
        }
        
        new Chart(typeCtx, {
            type: 'doughnut',
            data: {
                labels: chartLabels,
                datasets: [{
                    data: chartData,
                    backgroundColor: chartColors,
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }
});
</script>
@endpush