@extends('layouts.app')

@section('title','My Profile')

@section('content')
    <div class="card shadow-sm mb-4">
        <div class="row g-0">
            <div class="col-md-4 position-relative" style="min-height:200px;">
                <div class="h-100 w-100" style="background-image:url('{{ $profile->cover_image ?? 'https://via.placeholder.com/900x300' }}');background-size:cover;background-position:center;"></div>
            </div>
            <div class="col-md-8">
                <div class="card-body d-flex flex-wrap align-items-center">
                    <img src="{{ $profile->profile_image ?? 'https://via.placeholder.com/150' }}" alt="Profile" class="img-thumbnail me-3 mb-3" style="width:120px;height:120px;">
                    <div>
                        <h3>{{ $user->name }}</h3>
                        <p class="text-muted mb-1">Registered on {{ $profile->registration_date?->format('M d, Y') ?? $user->created_at->format('M d, Y') }}</p>
                        <p class="mb-0">Birthday: {{ $profile->birthday?->format('M d, Y') ?? 'Not recorded' }} | Hobby: {{ $profile->hobby ?? 'Not shared' }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="card p-3 text-center">
                <h6>Last Donation</h6>
                <p class="display-6 mb-0">৳{{ number_format($stats['lastDonation'] ?? 0, 2) }}</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card p-3 text-center">
                <h6>Total Donations</h6>
                <p class="display-6 mb-0">৳{{ number_format($stats['totalAmount'],2) }}</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card p-3 text-center">
                <h6>Total Donations</h6>
                <p class="display-6 mb-0">{{ $stats['count'] }}</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card p-3 text-center">
                <h6>Min / Max</h6>
                <p class="mb-0">৳{{ number_format($stats['minimum'] ?? 0,2) }} / ৳{{ number_format($stats['maximum'] ?? 0,2) }}</p>
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="profileTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="info-tab" data-bs-toggle="tab" data-bs-target="#info" type="button" role="tab">Profile Info</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history" type="button" role="tab">History</button>
                </li>
            </ul>
        </div>
        <div class="card-body tab-content">
            <div class="tab-pane fade show active" id="info" role="tabpanel">
                <form action="{{ route('profile.update') }}" method="POST">
                    @csrf
                    @method('PATCH')
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label>Name *</label>
                            <input class="form-control" name="name" value="{{ $user->name }}" required>
                        </div>
                        <div class="col-md-6">
                            <label>Email (locked)</label>
                            <input class="form-control" value="{{ $user->email }}" disabled>
                        </div>
                        <div class="col-md-6">
                            <label>Phone *</label>
                            <input class="form-control" name="phone" value="{{ $user->phone }}" required>
                        </div>
                        <div class="col-md-6">
                            <label>Emergency Phone</label>
                            <input class="form-control" name="emergency_phone" value="{{ $user->emergency_phone }}">
                        </div>
                        <div class="col-md-6">
                            <label>Probashi</label>
                            <input class="form-control" name="probashi" value="{{ $user->probashi }}">
                        </div>
                        <div class="col-md-6">
                            <label>Facebook Link</label>
                            <input class="form-control" name="facebook_link" value="{{ $user->facebook_link }}">
                        </div>
                        <div class="col-md-6">
                            <label>Birthday</label>
                            <input class="form-control" type="date" name="birthday" value="{{ $profile->birthday?->toDateString() }}">
                        </div>
                        <div class="col-md-6">
                            <label>Hobby</label>
                            <input class="form-control" name="hobby" value="{{ $profile->hobby }}">
                        </div>
                        <div class="col-md-6">
                            <label>Education</label>
                            <input class="form-control" name="education" value="{{ $profile->education }}">
                        </div>
                        <div class="col-md-6">
                            <label>Occupation</label>
                            <input class="form-control" name="occupation" value="{{ $profile->occupation }}">
                        </div>
                        <div class="col-md-6">
                            <label>Volunteer For</label>
                            <input class="form-control" name="volunteer_for" value="{{ $profile->volunteer_for }}">
                        </div>
                        <div class="col-md-6">
                            <label>Special Skill</label>
                            <input class="form-control" name="special_skill" value="{{ $profile->special_skill }}">
                        </div>
                        <div class="col-md-12">
                            <label>Present Address</label>
                            <textarea class="form-control" name="present_address">{{ $profile->present_address }}</textarea>
                        </div>
                        <div class="col-md-6">
                            <label>Present District / Thana</label>
                            <input class="form-control" name="present_district" value="{{ $profile->present_district }}">
                        </div>
                        <div class="col-md-6">
                            <label>Permanent Address (locked)</label>
                            <textarea class="form-control" disabled>{{ $profile->permanent_address ?? 'Locked' }}</textarea>
                        </div>
                        <div class="col-md-6">
                            <label>NID Number (locked)</label>
                            <input class="form-control" value="{{ $user->nid_number ?? 'Locked' }}" disabled>
                        </div>
                        <div class="col-md-12">
                            <button class="btn btn-primary">Save Profile</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="tab-pane fade" id="history" role="tabpanel">
                <h5>Donation History</h5>
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Amount</th>
                                <th>Method</th>
                                <th>Project</th>
                                <th>Status</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($donationHistory as $entry)
                                <tr>
                                    <td>৳{{ number_format($entry->amount, 2) }}</td>
                                    <td>{{ $entry->method }}</td>
                                    <td>{{ $entry->project?->title ?? 'General' }}</td>
                                    <td>{{ ucfirst($entry->status) }}</td>
                                    <td>{{ $entry->donated_at?->format('M d, Y') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted">No donations yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <h5 class="mt-4">Regular Donations</h5>
                <div class="list-group">
                    @forelse($activeRegulars as $regular)
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <strong>{{ $regular->project?->title ?? 'General Fund' }}</strong>
                                <div class="small text-muted">Amount: ৳{{ number_format($regular->amount, 2) }} | Frequency: {{ ucfirst($regular->frequency) }}</div>
                            </div>
                            <form action="{{ route('regular-donations.stop', $regular) }}" method="POST">
                                @csrf
                                @method('PATCH')
                                <button class="btn btn-sm btn-outline-danger">Stop</button>
                            </form>
                        </div>
                    @empty
                        <div class="list-group-item text-muted">No active regular donations.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            $(function () {
                $.getJSON("{{ route('profile.history') }}", function (history) {
                    const container = $('#history-content');
                    if (!history.length) {
                        container.html('<p>No donations recorded yet.</p>');
                        return;
                    }
                    const list = $('<ul class="list-group"></ul>');
                    history.forEach(item => {
                        list.append(`<li class="list-group-item d-flex justify-content-between">
                            <span>${item.gateway} - ৳${Number(item.amount).toFixed(2)}</span>
                            <span>${new Date(item.donated_at).toLocaleDateString()}</span>
                        </li>`);
                    });
                    container.html(list);
                }).always(() => $('#history-loader').hide());
            });
        </script>
    @endpush
@endsection