@extends('backend.layouts.app')

@section('content')
<style>
    .profile-container {
        max-width: 1000px;
        margin: 50px auto;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        padding: 40px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .profile-header {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        border-bottom: 2px solid #eee;
        padding-bottom: 30px;
        margin-bottom: 30px;
        align-items: center;
    }

    .profile-photo {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #267bbd;
        box-shadow: 0 8px 25px rgba(38, 123, 189, 0.4);
    }

    .profile-info h1 {
        font-size: 2rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 8px;
    }

    .profile-info p {
        margin: 0;
        font-size: 1rem;
        color: #666;
    }

    .info-table {
        width: 100%;
        border-collapse: collapse;
    }

    .info-table tr {
        border-bottom: 1px solid #eee;
    }

    .info-table th,
    .info-table td {
        padding: 12px 20px;
        vertical-align: top;
    }

    .info-table th {
        width: 30%;
        background: #f6fafd;
        color: #267bbd;
        font-weight: 600;
    }

    .info-table td {
        background: #fff;
        color: #444;
    }

    .btn-actions {
        margin-top: 30px;
        text-align: center;
    }

    .btn-profile {
        background: #267bbd;
        border: none;
        padding: 12px 30px;
        border-radius: 30px;
        color: #fff;
        font-weight: 600;
        box-shadow: 0 6px 20px rgba(38, 123, 189, 0.4);
        margin: 0 10px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-profile:hover {
        background: #1f5e88;
        color: #fff;
    }

    @media (max-width: 768px) {
        .profile-header {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .info-table th,
        .info-table td {
            display: block;
            width: 100%;
        }

        .btn-profile {
            width: 100%;
            margin: 10px 0;
        }
    }
</style>

<div class="profile-container">
    <div class="profile-header">
        <img src="{{ asset('storage/' . $member->photo) }}" alt="Profile Photo" class="profile-photo">
        <div class="profile-info">
            <h1>{{ $member->full_name }}</h1>
            <p>{{ $member->occupation }}</p>
        </div>
    </div>

    <table class="info-table">
        <tr>
            <th>CPR Number</th>
            <td>{{ $member->cpr_number }}</td>
        </tr>
        <tr>
            <th>Passport Number</th>
            <td>{{ $member->passport_number ?? '-' }}</td>
        </tr>
        <tr>
            <th>Date of Birth</th>
            <td>{{ \Carbon\Carbon::parse($member->dob)->format('d M, Y') }}</td>
        </tr>
        <tr>
            <th>Gender</th>
            <td>{{ $member->gender }}</td>
        </tr>
        <tr>
            <th>Blood Group</th>
            <td>{{ $member->blood_group ?? '-' }}</td>
        </tr>
        <tr>
            <th>Mobile (WhatsApp)</th>
            <td>{{ $member->mobile }}</td>
        </tr>
        <tr>
            <th>Email</th>
            <td>{{ $member->email ?? '-' }}</td>
        </tr>
        <tr>
            <th>Address in Bahrain</th>
            <td>{{ $member->address }}</td>
        </tr>
        <tr>
            <th>Occupation</th>
            <td>{{ $member->occupation }}</td>
        </tr>
        <tr>
            <th>Volunteer Time</th>
            <td>{{ $member->volunteer_time ?? '-' }}</td>
        </tr>
        <tr>
            <th>Expertise</th>
            <td>
                @php $skills = json_decode($member->expertise, true); @endphp
                @if (is_array($skills) && count($skills))
                    <ul style="padding-left: 20px; margin: 0;">
                        @foreach ($skills as $skill)
                            <li>{{ $skill }}</li>
                        @endforeach
                    </ul>
                @else
                    -
                @endif
            </td>
        </tr>
        <tr>
            <th>Bangladesh Contact</th>
            <td>{{ $member->bd_contact ?? '-' }}</td>
        </tr>
        <tr>
            <th>Reference Person</th>
            <td>{{ $member->ref_person ?? '-' }} ({{ $member->ref_phone ?? '-' }})</td>
        </tr>
        <tr>
            <th>CPR Front</th>
            <td>
                <img src="{{ asset('storage/' . $member->cpr_front) }}" alt="CPR Front" style="max-width: 300px; border-radius: 10px;">
            </td>
        </tr>
        <tr>
            <th>CPR Back</th>
            <td>
                <img src="{{ asset('storage/' . $member->cpr_back) }}" alt="CPR Back" style="max-width: 300px; border-radius: 10px;">
            </td>
        </tr>
        <tr>
            <th>Registered On</th>
            <td>{{ $member->created_at->format('d M, Y H:i') }}</td>
        </tr>
    </table>

    <div class="btn-actions">
        <a href="{{ route('member_list') }}" class="btn-profile">← Back to List</a>
        {{-- <a href="{{ route('members.edit', $member->id) }}" class="btn-profile">Edit Profile</a> --}}
    </div>
</div>
@endsection