@extends('layouts.app')

@section('title', 'Home - MiMSMS Voter System')

@section('content')
<div style="text-align: center; margin: 2rem 0;">
    <h1 style="color: var(--primary-orange); margin-bottom: 1rem;">Select Your Area & View Voter Data</h1>
    <p style="color: var(--text-light); font-size: 1.1rem;">Choose your district, thana, and electoral area to see voter counts by mobile operator</p>
</div>

<div class="card" style="max-width: 600px; margin: 2rem auto;">
    <form id="areaForm">
        <div class="form-group">
            <label for="district">District *</label>
            <select id="district" name="district" required>
                <option value="">-- Select District --</option>
                @foreach($districts as $district)
                    <option value="{{ $district->id }}">{{ $district->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="form-group">
            <label for="thana">Thana *</label>
            <select id="thana" name="thana" required disabled>
                <option value="">-- Select Thana --</option>
            </select>
        </div>

        <div class="form-group">
            <label for="area">Electoral Area *</label>
            <select id="area" name="area" required disabled>
                <option value="">-- Select Electoral Area --</option>
            </select>
        </div>

        <button type="button" class="btn" onclick="loadVoterData()" style="width: 100%;">View Voter Data</button>
    </form>
</div>

<div id="voterDataContainer" style="display: none; max-width: 600px; margin: 2rem auto;">
    <div class="card">
        <h2 style="color: var(--primary-orange); margin-bottom: 1.5rem;">Voter Data by Operator</h2>
        
        <div class="grid" style="grid-template-columns: 1fr;">
            <div class="stat-card">
                <p>Grameenphone</p>
                <h3 id="grameenponeCount">0</h3>
            </div>
            <div class="stat-card">
                <p>Robi / Airtel</p>
                <h3 id="robiCount">0</h3>
            </div>
            <div class="stat-card">
                <p>Banglalink</p>
                <h3 id="banglalinkCount">0</h3>
            </div>
            <div class="stat-card" style="background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-red) 100%); color: white;">
                <p>Total Voters</p>
                <h3 id="totalCount">0</h3>
            </div>
        </div>

        @auth
            <a href="{{ route('order.create') }}" class="btn" style="width: 100%; text-align: center; display: block;">Place Order</a>
        @else
            <p style="text-align: center; color: var(--text-light); margin-top: 1rem;">
                <a href="{{ route('login') }}" style="color: var(--primary-orange); text-decoration: none;">Login</a> to place an order
            </p>
        @endauth
    </div>
</div>

<script>
document.getElementById('district').addEventListener('change', function() {
    const districtId = this.value;
    const thanaSelect = document.getElementById('thana');
    const areaSelect = document.getElementById('area');
    
    thanaSelect.disabled = true;
    areaSelect.disabled = true;
    thanaSelect.innerHTML = '<option value="">-- Select Thana --</option>';
    areaSelect.innerHTML = '<option value="">-- Select Electoral Area --</option>';
    
    if (!districtId) return;
    
    fetch(`/api/thanas/${districtId}`)
        .then(response => response.json())
        .then(data => {
            data.forEach(thana => {
                const option = document.createElement('option');
                option.value = thana.id;
                option.textContent = thana.name;
                thanaSelect.appendChild(option);
            });
            thanaSelect.disabled = false;
        })
        .catch(error => console.error('Error:', error));
});

document.getElementById('thana').addEventListener('change', function() {
    const thanaId = this.value;
    const areaSelect = document.getElementById('area');
    
    areaSelect.disabled = true;
    areaSelect.innerHTML = '<option value="">-- Select Electoral Area --</option>';
    
    if (!thanaId) return;
    
    fetch(`/api/electoral-areas/${thanaId}`)
        .then(response => response.json())
        .then(data => {
            data.forEach(area => {
                const option = document.createElement('option');
                option.value = area.id;
                option.textContent = area.name;
                areaSelect.appendChild(option);
            });
            areaSelect.disabled = false;
        })
        .catch(error => console.error('Error:', error));
});

function loadVoterData() {
    const areaId = document.getElementById('area').value;
    
    if (!areaId) {
        alert('Please select an electoral area');
        return;
    }
    
    fetch(`/api/voter-data/${areaId}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('grameenponeCount').textContent = data.grameenphone.toLocaleString();
            document.getElementById('robiCount').textContent = data.robi.toLocaleString();
            document.getElementById('banglalinkCount').textContent = data.banglalink.toLocaleString();
            document.getElementById('totalCount').textContent = data.total.toLocaleString();
            document.getElementById('voterDataContainer').style.display = 'block';
        })
        .catch(error => {
            alert('Error loading voter data: ' + error);
            console.error('Error:', error);
        });
}
</script>
@endsection