@extends('layouts.app-mobile')
@section('title', 'Profile — Befikreyy App')
@section('apptitle', 'Profile')

@section('content')

{{-- Profile hero --}}
<div class="profile-hero">
    <div class="ph-av">{{ strtoupper(substr($user->name, 0, 1)) }}</div>
    <h2 class="ph-name">{{ $user->name }}</h2>
    <p class="ph-meta">{{ $user->phone }}{{ $user->email ? ' · ' . $user->email : '' }}</p>
    <span class="ph-role">{{ ucfirst($user->role) }} account</span>
</div>

<div class="app-section app-pad">

    {{-- Edit profile --}}
    <div class="app-collapsible" id="editProf">
        <button class="collap-h" onclick="toggleCollap('editProf')">
            <span class="ic">👤</span>
            <strong>Edit profile</strong>
            <span class="caret">›</span>
        </button>
        <div class="collap-body">
            <form method="POST" action="{{ route('app.profile.update') }}" class="app-form">
                @csrf
                <div class="field-app">
                    <label>Name</label>
                    <input type="text" name="name" value="{{ old('name', $user->name) }}" required>
                </div>
                <div class="field-app">
                    <label>Phone</label>
                    <input type="tel" name="phone" value="{{ old('phone', $user->phone) }}" required minlength="10" maxlength="15">
                </div>
                <div class="field-app">
                    <label>Email <span class="optional">(optional)</span></label>
                    <input type="email" name="email" value="{{ old('email', $user->email) }}">
                </div>
                <button type="submit" class="btn-app btn-app-primary btn-app-full">Save</button>
            </form>
        </div>
    </div>

    {{-- Saved addresses --}}
    <div class="app-collapsible" id="addrSection">
        <button class="collap-h" onclick="toggleCollap('addrSection')">
            <span class="ic">🏠</span>
            <strong>Saved addresses</strong>
            <span class="caret">›</span>
        </button>
        <div class="collap-body">
            @if($addresses->count())
                @foreach($addresses as $a)
                <div class="addr-card">
                    <div class="addr-tx">
                        <strong>{{ $a->label }}</strong>
                        <p>{{ $a->address }}</p>
                        @if($a->pincode)<small class="muted">{{ $a->pincode }}</small>@endif
                    </div>
                    <div class="addr-act">
                        @if($a->is_default)<span class="badge-default">Default</span>@endif
                        <form method="POST" action="{{ route('app.address.destroy', $a->id) }}" style="display:inline">
                            @csrf @method('DELETE')
                            <button type="submit" class="addr-del" onclick="return confirm('Remove this address?')">Remove</button>
                        </form>
                    </div>
                </div>
                @endforeach
            @else
                <p class="muted">No saved addresses yet.</p>
            @endif

            <details class="addr-add">
                <summary>+ Add new address</summary>
                <form method="POST" action="{{ route('app.address.save') }}" class="app-form" style="margin-top: 12px;">
                    @csrf
                    <div class="field-app">
                        <label>Label</label>
                        <input type="text" name="label" placeholder="Home / Office / Parents" required>
                    </div>
                    <div class="field-app">
                        <label>Address</label>
                        <textarea name="address" rows="2" required placeholder="Tower / flat, street, area, city"></textarea>
                    </div>
                    <div class="field-app-grid">
                        <div class="field-app">
                            <label>Area</label>
                            <select name="area_id">
                                <option value="">Select area</option>
                                @foreach(\App\Models\Area::active()->ordered()->get() as $ar)
                                    <option value="{{ $ar->id }}">{{ $ar->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="field-app">
                            <label>Pincode</label>
                            <input type="text" name="pincode" placeholder="201305" maxlength="10">
                        </div>
                    </div>
                    <label class="checkbox-app">
                        <input type="checkbox" name="is_default" value="1">
                        <span>Set as default</span>
                    </label>
                    <button type="submit" class="btn-app btn-app-primary btn-app-full">Save address</button>
                </form>
            </details>
        </div>
    </div>

    {{-- Quick links --}}
    <a href="{{ route('app.bookings') }}" class="menu-link"><span class="ic">📋</span><strong>My bookings</strong><span class="caret">›</span></a>
    <a href="{{ route('app.help') }}" class="menu-link"><span class="ic">💡</span><strong>Help &amp; FAQ</strong><span class="caret">›</span></a>
    <a href="{{ route('app.contact') }}" class="menu-link"><span class="ic">📞</span><strong>Contact support</strong><span class="caret">›</span></a>
    <a href="{{ route('app.about') }}" class="menu-link"><span class="ic">ℹ</span><strong>About this app</strong><span class="caret">›</span></a>
    <a href="{{ route('terms') }}" class="menu-link"><span class="ic">📄</span><strong>Terms &amp; Conditions</strong><span class="caret">›</span></a>
    <a href="{{ route('privacy') }}" class="menu-link"><span class="ic">🔒</span><strong>Privacy Policy</strong><span class="caret">›</span></a>

    {{-- Logout --}}
    <form method="POST" action="{{ route('app.logout') }}" class="logout-form">
        @csrf
        <button type="submit" class="btn-app btn-app-danger-outline btn-app-full">Log out</button>
    </form>

    <p class="profile-version">Befikreyy App · v1.0</p>
</div>

@push('scripts')
<script>
function toggleCollap(id) {
    var el = document.getElementById(id);
    el.classList.toggle('open');
}
</script>
@endpush

@endsection