@extends('layouts.app')

@section('title', 'Import Voter Data - MiMSMS Voter System')

@section('content')
<div style="max-width: 700px; margin: 0 auto;">
    <h1 style="color: var(--primary-orange); margin-bottom: 2rem;">Import Voter Data</h1>

    <div class="card">
        <h2 style="color: var(--primary-orange); margin-bottom: 1.5rem;">Upload Excel File</h2>

        <form action="{{ route('admin.import.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="form-group">
                <label for="file">Select Excel File (.xlsx, .xls, .csv) *</label>
                <input type="file" id="file" name="file" accept=".xlsx,.xls,.csv" required>
                @error('file')
                    <span style="color: var(--danger);">{{ $message }}</span>
                @enderror
            </div>

            <div style="background: #f0f8ff; padding: 1rem; border-radius: 4px; margin: 1.5rem 0;">
                <p style="margin: 0; color: #0c5460;">
                    <strong>📋 Expected File Format:</strong>
                </p>
                <p style="margin: 0.5rem 0; color: #0c5460;">
                    Your Excel file should have the following columns:
                </p>
                <ul style="margin: 0.5rem 0; color: #0c5460; margin-left: 1.5rem;">
                    <li><strong>district</strong> - District name (e.g., "Dhaka")</li>
                    <li><strong>thana</strong> - Thana name (e.g., "Gulshan")</li>
                    <li><strong>electoral_area</strong> - Electoral area name (e.g., "Area 1")</li>
                    <li><strong>grameenphone</strong> - Number of Grameenphone users</li>
                    <li><strong>robi</strong> - Number of Robi/Airtel users</li>
                    <li><strong>banglalink</strong> - Number of Banglalink users</li>
                </ul>
            </div>

            <div style="background: #fff3cd; padding: 1rem; border-radius: 4px; margin: 1.5rem 0;">
                <p style="margin: 0; color: #856404;">
                    <strong>⚠️ Note:</strong> The system will automatically create districts, thanas, and electoral areas if they don't exist. Duplicate entries will be updated.
                </p>
            </div>

            <button type="submit" class="btn" style="width: 100%;">Upload & Import</button>
        </form>
    </div>

    <div class="card" style="margin-top: 2rem;">
        <h2 style="color: var(--primary-orange); margin-bottom: 1.5rem;">Sample File Format</h2>
        <p style="color: var(--text-light); margin-bottom: 1rem;">Here's an example of how your Excel file should be formatted:</p>
        
        <table>
            <thead>
                <tr>
                    <th>district</th>
                    <th>thana</th>
                    <th>electoral_area</th>
                    <th>grameenphone</th>
                    <th>robi</th>
                    <th>banglalink</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Dhaka</td>
                    <td>Gulshan</td>
                    <td>Area 1</td>
                    <td>5000</td>
                    <td>3000</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>Dhaka</td>
                    <td>Gulshan</td>
                    <td>Area 2</td>
                    <td>4500</td>
                    <td>2800</td>
                    <td>1700</td>
                </tr>
                <tr>
                    <td>Dhaka</td>
                    <td>Banani</td>
                    <td>Area 1</td>
                    <td>6000</td>
                    <td>4000</td>
                    <td>3000</td>
                </tr>
            </tbody>
        </table>

        <p style="color: var(--text-light); margin-top: 1rem;">
            <a href="{{ route('admin.import-logs') }}" style="color: var(--primary-orange); text-decoration: none;">View import history →</a>
        </p>
    </div>
</div>
@endsection