@extends('layouts.app')

@section('content')
@php
    $canEditPartner = auth()->check() && auth()->user()->hasPermission('partners', 'edit');
    $canDeletePartner = auth()->check() && auth()->user()->hasPermission('partners', 'delete');
    $profileImage = $user->getFirstMediaUrl('profile', 'thumb') ?: $user->getFirstMediaUrl('profile');
    $coverImage = $user->getFirstMediaUrl('cover');
    $galleryMedia = $user->getMedia('album');
@endphp

<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Partner Management</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.partners.index') }}"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.partners.index') }}">Partners</a></li>
                        <li class="breadcrumb-item active" aria-current="page">View Partner</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto d-flex gap-2">
                @if($canEditPartner)
                    <a href="{{ route('admin.partners.edit', $user->id) }}" class="btn btn-primary">Edit Partner</a>
                @endif
                <a href="{{ route('admin.partners.index') }}" class="btn btn-light">Back</a>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-body p-4">
                <div class="row align-items-center g-4">
                    <div class="col-md-2 text-center">
                        @if($profileImage)
                            <img src="{{ $profileImage }}" alt="Profile Image" class="rounded-circle border" style="width: 110px; height: 110px; object-fit: cover;">
                        @else
                            <div class="rounded-circle border d-inline-flex align-items-center justify-content-center bg-light" style="width: 110px; height: 110px;">
                                <i class="bx bx-user fs-1 text-secondary"></i>
                            </div>
                        @endif
                    </div>
                    <div class="col-md-7">
                        <h4 class="mb-1">{{ $user->name }}</h4>
                        <p class="mb-1 text-muted">#{{ $user->id }} | {{ $user->email }}</p>
                        <p class="mb-0 text-muted">
                            {{ trim(($user->phone_country_code ?? '') . ' ' . ($user->phone_no ?? '')) }}
                        </p>
                    </div>
                    <div class="col-md-3">
                        <div class="text-md-end">
                            <span class="badge {{ $user->status === 'active' ? 'bg-success' : 'bg-danger' }} fs-6 mb-2">
                                {{ ucfirst($user->status) }}
                            </span>
                            <div class="small text-muted">Account Type: {{ ucfirst(str_replace('_', ' ', $user->account_type)) }}</div>
                            <div class="small text-muted">Created: {{ optional($user->created_at)->format('d M Y, h:i A') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Partner Quick Management Section -->
        <div class="card mb-4">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h6 class="mb-0 text-uppercase fw-bold"><i class="bx bx-slider-alt me-1 text-primary"></i> Partner Quick Management</h6>
                    <span class="badge bg-light-primary text-primary border">ID #{{ $user->id }}</span>
                </div>
                
                <!-- 4 Action Buttons -->
                <div class="row g-2 mb-3">
                    <div class="col-6 col-sm-6 col-md-3">
                        <a href="{{ route('users.bank-accounts.index', $user->id) }}" class="btn btn-outline-primary w-100 py-2 d-flex align-items-center justify-content-center gap-2" style="height: auto;">
                            <i class="bx bxs-bank fs-5"></i>
                            <span class="fw-semibold">Bank Accounts</span>
                        </a>
                    </div>
                    <div class="col-6 col-sm-6 col-md-3">
                        <a href="{{ route('users.upi-accounts.index', $user->id) }}" class="btn btn-outline-info w-100 py-2 d-flex align-items-center justify-content-center gap-2" style="height: auto;">
                            <i class="bx bx-mobile-alt fs-5"></i>
                            <span class="fw-semibold">UPI Accounts</span>
                        </a>
                    </div>
                    <div class="col-6 col-sm-6 col-md-3">
                        <a href="{{ route('userKycDocs.index', ['user_id' => $user->id]) }}" class="btn btn-outline-warning w-100 py-2 d-flex align-items-center justify-content-center gap-2" style="height: auto;">
                            <i class="bx bx-id-card fs-5"></i>
                            <span class="fw-semibold">KYC Docs</span>
                        </a>
                    </div>
                    <div class="col-6 col-sm-6 col-md-3">
                        <a href="{{ route('walletTransactions.show', $user->id) }}" class="btn btn-outline-secondary w-100 py-2 d-flex align-items-center justify-content-center gap-2" style="height: auto;">
                            <i class="bx bx-wallet fs-5"></i>
                            <span class="fw-semibold">Wallet Txns</span>
                        </a>
                    </div>
                </div>

                <hr class="my-3 text-muted opacity-25">

                <!-- 2 Verification Toggles below buttons -->
                <div class="d-flex flex-wrap align-items-center justify-content-around gap-3 pt-1">
                    <div class="d-flex align-items-center">
                        <label class="square-yesno-toggle me-3">
                            <input type="checkbox" id="email_verified_toggle" {{ $user->email_verified_at ? 'checked' : '' }} onchange="toggleVerification('email')" {{ !$canEditPartner ? 'disabled' : '' }}>
                            <div class="square-yesno-slider"></div>
                        </label>
                        <div>
                            <strong class="d-block mb-0 font-14">Email Verified</strong>
                            <span id="email_verified_status" class="small text-muted">
                                {{ $user->email_verified_at ? 'Yes (' . \Carbon\Carbon::parse($user->email_verified_at)->format('d M Y, h:i A') . ')' : 'No' }}
                            </span>
                        </div>
                    </div>

                    <div class="d-flex align-items-center">
                        <label class="square-yesno-toggle me-3">
                            <input type="checkbox" id="phone_verified_toggle" {{ $user->phone_no_verified_at ? 'checked' : '' }} onchange="toggleVerification('phone')" {{ !$canEditPartner ? 'disabled' : '' }}>
                            <div class="square-yesno-slider"></div>
                        </label>
                        <div>
                            <strong class="d-block mb-0 font-14">Phone Verified</strong>
                            <span id="phone_verified_status" class="small text-muted">
                                {{ $user->phone_no_verified_at ? 'Yes (' . \Carbon\Carbon::parse($user->phone_no_verified_at)->format('d M Y, h:i A') . ')' : 'No' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body p-4">
                <ul class="nav nav-tabs nav-primary" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-overview" type="button" role="tab">
                            <i class="bx bx-grid-alt me-1"></i>Overview
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-profile" type="button" role="tab">
                            <i class="bx bx-user-circle me-1"></i>Profile
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-address" type="button" role="tab">
                            <i class="bx bx-map me-1"></i>Address
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-gallery" type="button" role="tab">
                            <i class="bx bx-images me-1"></i>Gallery
                        </button>
                    </li>
                </ul>

                <div class="tab-content pt-4">
                    <div class="tab-pane fade show active" id="tab-overview" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <h6 class="mb-3">Basic Info</h6>
                                    <div class="mb-2"><strong>Name:</strong> {{ $user->name }}</div>
                                    <div class="mb-2"><strong>Email:</strong> {{ $user->email ?: '-' }}</div>
                                    <div class="mb-2"><strong>Phone:</strong> {{ trim(($user->phone_country_code ?? '') . ' ' . ($user->phone_no ?? '')) ?: '-' }}</div>
                                    <div class="mb-2"><strong>Status:</strong> {{ ucfirst($user->status) }}</div>
                                    <div class="mb-2"><strong>Created At:</strong> {{ optional($user->created_at)->format('d M Y, h:i A') ?: '-' }}</div>
                                    <div class="mb-2"><strong>Updated At:</strong> {{ optional($user->updated_at)->format('d M Y, h:i A') ?: '-' }}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <h6 class="mb-3">Verification & Status</h6>
                                    <div class="mb-2"><strong>KYC Status:</strong> <span class="badge bg-light-primary text-primary border">{{ ucfirst(str_replace('_', ' ', $user->kyc_status ?? 'not_submitted')) }}</span></div>
                                    <div class="mb-2"><strong>Partner Status:</strong> <span class="badge bg-light-info text-info border">{{ ucfirst(str_replace('_', ' ', $user->partner_status ?? 'not_applied')) }}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tab-profile" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <h6 class="mb-3">Personal</h6>
                                    <div class="mb-2"><strong>Gender:</strong> {{ ucfirst(optional($user->profile)->gender ?? '-') }}</div>
                                    <div class="mb-2"><strong>Date of Birth:</strong> {{ optional(optional($user->profile)->date_of_birth)->format('d M Y') ?: (optional($user->profile)->date_of_birth ?? '-') }}</div>
                                    <div class="mb-2"><strong>Availability Status:</strong> {{ ucfirst(optional($user->profile)->availability_status ?? '-') }}</div>
                                    <div class="mb-2">
                                        <strong>Cover Photo:</strong>
                                        @if($coverImage)
                                            <div class="mt-2">
                                                <img src="{{ $coverImage }}" alt="Cover Photo" class="rounded border" style="max-width: 100%; height: auto; max-height: 150px; object-fit: cover;">
                                            </div>
                                        @else
                                            <span>-</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <h6 class="mb-3">Languages</h6>
                                    @if($user->languages->count())
                                        <div class="d-flex flex-wrap gap-2">
                                            @foreach($user->languages as $language)
                                                <span class="badge bg-light text-dark border">{{ $language->name }}</span>
                                            @endforeach
                                        </div>
                                    @else
                                        <span class="text-muted">No languages added.</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="border rounded p-3">
                                    <h6 class="mb-3">Bio</h6>
                                    <p class="mb-0 text-muted">{{ optional($user->profile)->bio ?: 'No bio available.' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tab-address" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <h6 class="mb-3">Location</h6>
                                    <div class="mb-2"><strong>Country:</strong> {{ optional(optional($user->address)->country)->name ?: '-' }}</div>
                                    <div class="mb-2"><strong>State:</strong> {{ optional(optional($user->address)->state)->name ?: '-' }}</div>
                                    <div class="mb-2"><strong>City:</strong> {{ optional(optional($user->address)->city)->name ?: '-' }}</div>
                                    <div class="mb-2"><strong>Address:</strong> {{ optional($user->address)->address ?: '-' }}</div>
                                    <div class="mb-2"><strong>Pin Code:</strong> {{ optional($user->address)->pin_code ?: '-' }}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <h6 class="mb-3">Coordinates</h6>
                                    <div class="mb-2"><strong>Latitude:</strong> {{ optional($user->address)->current_latitude ?: '-' }}</div>
                                    <div class="mb-2"><strong>Longitude:</strong> {{ optional($user->address)->current_longitude ?: '-' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tab-gallery" role="tabpanel">
                        @if($galleryMedia->count())
                            <div class="row g-3">
                                @foreach($galleryMedia as $media)
                                    <div class="col-sm-6 col-md-4 col-xl-3">
                                        <a href="{{ $media->getUrl() }}" target="_blank" class="d-block">
                                            <img src="{{ $media->getUrl('album_thumb') ?: $media->getUrl() }}" class="img-fluid rounded border" alt="Gallery Image" style="height: 180px; width: 100%; object-fit: cover;">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-muted mb-0">No gallery images available.</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if($canEditPartner)
<script>
function toggleVerification(type) {
    const isChecked = document.getElementById(type + '_verified_toggle').checked;
    
    $.ajax({
        url: "{{ route('admin.partners.verify.toggle') }}",
        type: 'POST',
        data: {
            _token: "{{ csrf_token() }}",
            user_id: "{{ $user->id }}",
            type: type,
            verified: isChecked ? 1 : 0
        },
        success: function(response) {
            if (response.status) {
                const statusSpan = document.getElementById(type + '_verified_status');
                if (response.verified_at) {
                    statusSpan.innerHTML = 'Yes (' + response.formatted_date + ')';
                } else {
                    statusSpan.innerHTML = 'No';
                }
            } else {
                document.getElementById(type + '_verified_toggle').checked = !isChecked;
                alert(response.message || 'Something went wrong.');
            }
        },
        error: function(xhr) {
            document.getElementById(type + '_verified_toggle').checked = !isChecked;
            alert(xhr.responseJSON?.message || 'Something went wrong.');
        }
    });
}
</script>
@endif
@endsection