<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
</head>
<body>

  <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('admin.dashboard') }}">Dashboard</a>
                </li>
                 <li class="nav-item">
                    <a class="nav-link" href="{{ route('admin.all.voters') }}">All Voters Data</a>
                </li>
                 <li class="nav-item">
                    <a class="nav-link" href="{{ route('userManagement') }}">Mobile Users</a>
                </li>
                
                <li class="nav-item">
                 
                    <a class="nav-link" href="{{ route('admin.manageUsers') }}">Manage Users</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="{{ route('admin.cnicWithSpaces') }}">CNICs with Spaces</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="{{ route('admin.duplicateCnic') }}">Duplicate CNIC Records</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="{{ route('admin.createUser') }}">Create User</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('admin.polling_stations.index') }}">Manage Polling Stations</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('admin.block_code.index') }}">Manage Block Codes</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('admin.ward.index') }}">Manage Ward Number</a>
                </li>
                
                <li class="nav-item">
                <form action="{{ route('admin.logout') }}" method="POST" style="display: inline;">
                    @csrf
                    <button type="submit" class="nav-link btn btn-link" style="color: white;">Logout</button>
                </form>
            </li>
            </ul>
        </div>
    </nav>

<div class="container mt-5">
    <h3>Manage Ward Number </h3>

    <!-- Add Ward Number Form -->
    <form action="{{ route('admin.ward.store') }}" method="POST">
        @csrf
        <div class="form-group">
            <label for="ward">Ward Number</label>
            <input type="text" name="ward_number" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-primary">Add Ward Number</button>
    </form>
<br>
    <!-- Ward Numbers List -->
    <table class="table table-bordered mt-4" id="wardsTable">
        <thead>
            <tr>
                <th>#</th>
                <th>Ward Number Name</th>
                <th>Male Count</th>
                <th>Female Count</th>
                <th>Voter Count</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($ward as $ward)
                <tr>
                     <td>{{ $loop->iteration }}</td>
                    <td>{{ $ward->ward_number }}</td>
                    <td>{{ $ward->males_count }}</td>
                    <td>{{ $ward->females_count }}</td>    
                    <td>{{ $ward->voters_count }}</td> <!-- Display the voter count -->
                   
                    <td>
                        <form action="{{ route('admin.ward.destroy', $ward->id) }}" method="POST" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script>
    $(document).ready(function() {
        $('#wardsTable').DataTable({
            "paging": true,
            "ordering": true,
            "info": true,
            "searching": true
        });
    });
</script>