@extends('layouts.app')

@section('title', 'Profile')

@section('content')
    <main id="main">
        <section class="breadcrumbs">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                    <h2>My Profile</h2>
                    <ol>
                        <li><a href="{{ route('home.index') }}">Home</a></li>
                        <li>My Profile</li>
                    </ol>
                </div>
            </div>
        </section>
        <section class="service-details">
            <div class="container">
                <div class="row mb-2">
                    <div class="col-12">
                        <a href="{{ route('profile.edit') }}" class="btn btn-outline-primary rounded-0">
                            <i class="bi bi-pencil-square"></i> Edit Profile
                        </a>
                        <a href="{{ route('profile.password') }}" class="btn btn-outline-primary rounded-0">
                            <i class="bi bi-pencil-square"></i> Edit Password
                        </a>
                    </div>
                </div>
                <div class="row mb-5">
                    <div class="col-8">
                        <table class="table table-bordered table-striped">
                            <tr>
                                <th>Membership ID</th>
                                <td>{{ $user->membership_id ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th>First Name</th>
                                <td>{{ $user->first_name ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th>Last Name</th>
                                <td>{{ $user->last_name ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th>Email Address</th>
                                <td>{{ $user->email ?? 'N/A' }}</td>
                            </tr>
                            <th>Phone Number</th>
                                <td>{{ $user->phone ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th>Address</th>
                                <td>
                                    {{ $user->address_1 ?? 'N/A' }}
                                    @if($user->address_2)
                                        <br />{{ $user->address_2 }}
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>City</th>
                                <td>{{ $user->city ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th>State</th>
                                <td>{{ $user->userState->name ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th>ZIP</th>
                                <td>{{ $user->zip ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                                <th>County</th>
                                <td>{{ $user->county->name ?? 'N/A' }}</td>
                            </tr>
                            {{-- <tr>
                                <th>Township</th>
                                <td>
                                    [{{ $user->township->zip ?? 'N/A' }}] <small><em class="text-sm text-muted">Updated townships coming soon.</em></small>
                                </td>
                            </tr>
                            <tr>
                                <th>Is Verified (to Vote)?</th>
                                <td>
                                    {{ $user->is_verified ? 'Yes' : 'No' }} (<small><em class="text-sm text-muted">A staff member needs to manually verify you to vote.</em></small>)
                                </td>
                            </tr> --}}
                        </table>
                    </div>
                    <div class="col-4">
                        <img src="{{ $user->getProfilePhotoUrl() }}" class="img-fluid" loading="lazy" alt="Profile Photo" />
                    </div>
                </div>

                {{-- <div class="row mb-5">
                    <div class="col-5">
                        <form action="{{ route('profile.updatePhotoIdFront') }}" method="post" enctype="multipart/form-data">
                            @method('put')
                            @csrf
                            <div class="row mb-2">
                                <div class="col-12 form-group">
                                    <label for="photo_id_front" class="form-label">Photo ID Front</label><br />
                                    <img src="{{ $user->getPhotoIdFrontUrl() }}" class="img-fluid mb-1" width="100%" alt="Photo ID" />
                                    <input class="form-control rounded-0"
                                        name="photo_id_front"
                                        id="photo_id_front"
                                        type="file"
                                    />
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary rounded-0">
                                <i class="bi bi-floppy"></i>&nbsp;&nbsp;Save Photo ID Front
                            </button>
                        </form>
                    </div>
                    <div class="col-5 offset-2">
                        <form action="{{ route('profile.updatePhotoIdBack') }}" method="post" enctype="multipart/form-data">
                            @method('put')
                            @csrf
                            <div class="row mb-2">
                                <div class="col-12 form-group">
                                    <label for="photo_id_back" class="form-label">Photo ID Back</label><br />
                                    <img src="{{ $user->getPhotoIdBackUrl() }}" class="img-fluid mb-1" width="100%" alt="Photo ID Back" />
                                    <input class="form-control rounded-0"
                                        name="photo_id_back"
                                        id="photo_id_back"
                                        type="file"
                                    />
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary rounded-0">
                                <i class="bi bi-floppy"></i>&nbsp;&nbsp;Save Photo ID Back
                            </button>
                        </form>
                    </div>
                </div> --}}

                {{-- <div class="row mb-5">
                    <div class="col-5">
                        <form action="{{ route('profile.proofOfResidence') }}" method="post" enctype="multipart/form-data">
                            @method('put')
                            @csrf
                            <div class="row mb-2">
                                <div class="col-12 form-group">
                                    <label for="proof_of_residence" class="form-label">Proof of Residence</label><br />
                                    <img src="{{ $user->getProofOfResidenceUrl() }}" class="img-fluid mb-1" width="100%" alt="Proof of Residence" />
                                    <input class="form-control rounded-0"
                                        name="proof_of_residence"
                                        id="proof_of_residence"
                                        type="file"
                                    />
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary rounded-0">
                                <i class="bi bi-floppy"></i>&nbsp;&nbsp;Save Proof of Residence
                            </button>
                        </form>
                    </div>
                    <div class="col-5 offset-2">
                        <form action="{{ route('profile.proofOfCitizenship') }}" method="post" enctype="multipart/form-data">
                            @method('put')
                            @csrf
                            <div class="row mb-2">
                                <div class="col-12 form-group">
                                    <label for="proof_of_citizenship" class="form-label">Proof Of Citizenship</label><br />
                                    <img src="{{ $user->getProofOfCitizenshipUrl() }}" class="img-fluid mb-1" width="100%" alt="Proof of Citizenship" />
                                    <input class="form-control rounded-0"
                                        name="proof_of_citizenship"
                                        id="proof_of_citizenship"
                                        type="file"
                                    />
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary rounded-0">
                                <i class="bi bi-floppy"></i>&nbsp;&nbsp;Save Proof of Citizenship
                            </button>
                        </form>
                    </div>
                </div> --}}
            </div>
        </section>
    </main>
@endsection