@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-6">
                <h5>Result Details</h5>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-6 mb-3">
                <div class="card">
                    <div class="card-header">
                        <strong>Candidate Info</strong>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table align-middle">
                                <tr>
                                    <th>Candidate Name</th>
                                    <td>{{ $candidate->name }}</td>
                                </tr>
                                <tr>
                                    <th>Candidate Photo</th>
                                    <td><img class="img-fluid" style="width: 100px" src="{{ asset($candidate->candidate_photo ?? 'assets/img/aaa-logo.png') }}" alt="{{ $candidate->name }}"></td>
                                </tr>
                                <tr>
                                    <th>Vote Sign</th>
                                    <td><img class="img-fluid" style="width: 100px" src="{{ asset('assets/img/aaa-logo.png') }}" alt="Vote Sign"></td>
                                </tr>
                                <tr>
                                    <th>Details</th>
                                    <td>{{ $candidate->details }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="card">
                    <div class="card-header">
                        <strong>Total Vote</strong>
                    </div>
                    <div class="card-body">
                        <div class="rounded-circle mx-auto my-4" style="width: 255px; height: 255px; display: flex; align-items: center; justify-content: center; border: 30px solid rgb(130, 237, 245)">
                            <span style="font-size: 60px; color: #000;">
                                <strong>{{ $results->count() }}</strong>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col">
               <div class="card">
                <div class="card-header">
                    <strong>Voter List</strong>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Votar Name</th>
                                    <th>Votar Phone</th>
                                    <th>Votar Email</th>
                                    <th>Date and Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($results as $index => $result)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $result->user->name ?? 'N/A' }}</td>
                                    <td>{{ $result->user->phone ?? 'N/A' }}</td>
                                    <td>{{ $result->user->email ?? 'N/A' }}</td>
                                    <td>{{ $result->user->created_at ?? 'N/A' }}</td>

                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
               </div>
            </div>
        </div>
    </div>
@endsection