@extends('layouts.app')

@section('title', $owner->name . ' — Owner Profile')

@section('content')

{{-- Header --}}
<div class="d-flex align-items-start justify-content-between mb-4">
    <div class="d-flex align-items-center gap-3">
        <a href="{{ route('admin.owner.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left"></i>
        </a>
        <div>
            <h4 class="fw-bold mb-0">{{ $owner->name }}</h4>
            <div class="text-muted small">
                {{ $owner->mobile }}
                @if($owner->email) &bull; {{ $owner->email }} @endif
                @if($owner->city) &bull; {{ $owner->city }} @endif
            </div>
        </div>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.owner.edit', $owner) }}" class="btn btn-outline-primary btn-sm">
            <i class="bi bi-pencil me-1"></i>Edit
        </a>
        @if(Auth::user()->isAdmin())
        <form action="{{ route('admin.owner.destroy', $owner) }}" method="POST"
              data-confirm="Delete {{ addslashes($owner->name) }}? This cannot be undone.">
            @csrf
            @method('DELETE')
            <button class="btn btn-outline-danger btn-sm">
                <i class="bi bi-trash me-1"></i>Delete
            </button>
        </form>
        @endif
    </div>
</div>

{{-- Stats row --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center py-3">
            <div class="fs-3 fw-bold text-success">{{ $owner->for_sale_count }}</div>
            <div class="small text-muted">For Sale</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center py-3">
            <div class="fs-3 fw-bold text-info">{{ $owner->for_rent_count }}</div>
            <div class="small text-muted">For Rent</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center py-3">
            <div class="fs-3 fw-bold">{{ $kycDocuments->count() }}</div>
            <div class="small text-muted">KYC Documents</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm text-center py-3">
            <div class="small text-muted mb-1">Added On</div>
            <div class="fw-medium small">{{ $owner->created_at->format('d M Y') }}</div>
        </div>
    </div>
</div>

<div class="row g-4">

    {{-- KYC Documents --}}
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0 pt-3 pb-0 d-flex align-items-center justify-content-between">
                <h6 class="fw-semibold mb-0"><i class="bi bi-shield-check me-2 text-primary"></i>KYC Documents</h6>
            </div>
            <div class="card-body pb-2">

                {{-- Upload row --}}
                <div class="border rounded p-3 bg-light mb-3" id="kyc-upload-area">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-5">
                            <label class="form-label small fw-medium mb-1">Document Type</label>
                            <select id="kyc-type" class="form-select form-select-sm">
                                <option value="">Select type…</option>
                                @foreach($kycDocumentTypes as $dt)
                                    <option value="{{ $dt->id }}">{{ $dt->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-5">
                            <label class="form-label small fw-medium mb-1">File (PDF / Image)</label>
                            <input type="file" id="kyc-file" class="form-control form-control-sm"
                                   accept=".pdf,.jpg,.jpeg,.png">
                        </div>
                        <div class="col-md-2">
                            <button id="kyc-upload-btn" class="btn btn-primary btn-sm w-100">
                                <i class="bi bi-upload"></i>
                            </button>
                        </div>
                    </div>
                    <div id="kyc-upload-error" class="text-danger small mt-1 d-none"></div>
                    <div id="kyc-upload-progress" class="mt-2 d-none">
                        <div class="progress" style="height:4px">
                            <div class="progress-bar progress-bar-striped progress-bar-animated w-100"></div>
                        </div>
                    </div>
                </div>

                {{-- Document list --}}
                <div id="kyc-list">
                    @forelse($kycDocuments as $doc)
                    <div class="d-flex align-items-center gap-2 py-2 border-bottom" id="kyc-doc-{{ $doc->id }}">
                        <i class="bi bi-file-earmark-text fs-5 text-muted flex-shrink-0"></i>
                        <div class="flex-grow-1 overflow-hidden">
                            <div class="text-truncate fw-medium small">{{ $doc->original_name }}</div>
                            <div class="text-muted" style="font-size:0.72rem">
                                {{ optional($doc->documentType)->name ?? '—' }}
                                &bull; {{ \App\Services\OwnerKycService::formatBytesStatic((int)$doc->size) }}
                                &bull; {{ $doc->created_at->format('d M Y') }}
                            </div>
                        </div>
                        <a href="{{ route('admin.owner.kyc.download', [$owner, $doc]) }}"
                           class="btn btn-sm btn-outline-secondary flex-shrink-0" title="Download">
                            <i class="bi bi-download"></i>
                        </a>
                        @if(Auth::user()->isAdmin())
                        <button class="btn btn-sm btn-outline-danger flex-shrink-0 kyc-delete-btn"
                                data-url="{{ route('admin.owner.kyc.destroy', [$owner, $doc]) }}"
                                data-id="{{ $doc->id }}"
                                title="Delete">
                            <i class="bi bi-trash"></i>
                        </button>
                        @endif
                    </div>
                    @empty
                    <div id="kyc-empty" class="text-center text-muted small py-3">
                        No KYC documents uploaded yet.
                    </div>
                    @endforelse
                </div>

            </div>
        </div>
    </div>

    {{-- Linked Properties --}}
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0 pt-3 pb-0">
                <h6 class="fw-semibold mb-0"><i class="bi bi-building me-2 text-primary"></i>Properties</h6>
            </div>
            <div class="card-body pb-2">
                @forelse($properties as $prop)
                <div class="d-flex align-items-start gap-2 py-2 border-bottom">
                    <div class="flex-grow-1 overflow-hidden">
                        <a href="{{ route('admin.property.show', $prop) }}"
                           class="fw-medium text-dark text-decoration-none small text-truncate d-block">
                            {{ $prop->title }}
                        </a>
                        <div class="text-muted" style="font-size:0.72rem">
                            {{ (\App\Models\Property::typeLabels())[$prop->type] ?? $prop->type }}
                            @if($prop->city) &bull; {{ $prop->city }} @endif
                            &bull; {{ $prop->formattedPrice() }}
                        </div>
                    </div>
                    <span class="badge rounded-pill
                        {{ $prop->listing_purpose === 'for_sale' ? 'bg-success-subtle text-success' : 'bg-info-subtle text-info' }}
                        flex-shrink-0" style="font-size:0.7rem">
                        {{ \App\Models\Property::LISTING_PURPOSES[$prop->listing_purpose] ?? $prop->listing_purpose }}
                    </span>
                    <span class="badge rounded-pill
                        {{ $prop->status === 'published' ? 'bg-primary-subtle text-primary' : ($prop->status === 'under_review' ? 'bg-warning-subtle text-warning' : 'bg-secondary-subtle text-secondary') }}
                        flex-shrink-0" style="font-size:0.7rem">
                        {{ ucfirst(str_replace('_', ' ', $prop->status)) }}
                    </span>
                </div>
                @empty
                <div class="text-center text-muted small py-3">No properties linked to this owner.</div>
                @endforelse
            </div>
        </div>
    </div>

</div>

{{-- Address card (if set) --}}
@if($owner->address)
<div class="row mt-4">
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm">
            <div class="card-body py-3">
                <div class="text-muted small fw-medium mb-1">Address</div>
                <div class="small">{{ $owner->address }}</div>
            </div>
        </div>
    </div>
</div>
@endif

@endsection

@push('scripts')
<script>
(function () {
    var uploadBtn      = document.getElementById('kyc-upload-btn');
    var typeSelect     = document.getElementById('kyc-type');
    var fileInput      = document.getElementById('kyc-file');
    var errorBox       = document.getElementById('kyc-upload-error');
    var progressBar    = document.getElementById('kyc-upload-progress');
    var kycList        = document.getElementById('kyc-list');
    var emptyMsg       = document.getElementById('kyc-empty');
    var uploadUrl      = "{{ route('admin.owner.kyc.store', $owner) }}";
    var csrfToken      = document.querySelector('meta[name="csrf-token"]').content;
    var isAdmin        = {{ Auth::user()->isAdmin() ? 'true' : 'false' }};

    if (uploadBtn) {
        uploadBtn.addEventListener('click', function () {
            errorBox.classList.add('d-none');

            if (!typeSelect.value) {
                errorBox.textContent = 'Please select a document type.';
                errorBox.classList.remove('d-none');
                return;
            }
            if (!fileInput.files.length) {
                errorBox.textContent = 'Please choose a file.';
                errorBox.classList.remove('d-none');
                return;
            }

            var formData = new FormData();
            formData.append('document_type_id', typeSelect.value);
            formData.append('file', fileInput.files[0]);
            formData.append('_token', csrfToken);

            uploadBtn.disabled = true;
            progressBar.classList.remove('d-none');

            fetch(uploadUrl, { method: 'POST', body: formData, headers: { 'Accept': 'application/json' } })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function (r) {
                if (!r.ok) {
                    var msg = r.data.errors
                        ? Object.values(r.data.errors).flat().join(' ')
                        : (r.data.message || 'Upload failed.');
                    errorBox.textContent = msg;
                    errorBox.classList.remove('d-none');
                    return;
                }

                var d = r.data;
                if (emptyMsg) { emptyMsg.remove(); emptyMsg = null; }

                var deleteHtml = isAdmin
                    ? '<button class="btn btn-sm btn-outline-danger flex-shrink-0 kyc-delete-btn"'
                      + ' data-url="' + d.destroy_url + '" data-id="' + d.id + '" title="Delete">'
                      + '<i class="bi bi-trash"></i></button>'
                    : '';

                var row = document.createElement('div');
                row.id = 'kyc-doc-' + d.id;
                row.className = 'd-flex align-items-center gap-2 py-2 border-bottom';
                row.innerHTML = '<i class="bi bi-file-earmark-text fs-5 text-muted flex-shrink-0"></i>'
                    + '<div class="flex-grow-1 overflow-hidden">'
                    + '<div class="text-truncate fw-medium small">' + escapeHtml(d.original_name) + '</div>'
                    + '<div class="text-muted" style="font-size:0.72rem">' + escapeHtml(d.type_label) + ' &bull; ' + escapeHtml(d.size) + '</div>'
                    + '</div>'
                    + '<a href="' + d.download_url + '" class="btn btn-sm btn-outline-secondary flex-shrink-0" title="Download">'
                    + '<i class="bi bi-download"></i></a>'
                    + deleteHtml;

                kycList.appendChild(row);
                bindDeleteBtn(row.querySelector('.kyc-delete-btn'));

                typeSelect.value = '';
                fileInput.value = '';
            })
            .catch(function () {
                errorBox.textContent = 'Network error. Please try again.';
                errorBox.classList.remove('d-none');
            })
            .finally(function () {
                uploadBtn.disabled = false;
                progressBar.classList.add('d-none');
            });
        });
    }

    function bindDeleteBtn(btn) {
        if (!btn) return;
        btn.addEventListener('click', function () {
            var url = btn.dataset.url;
            var id  = btn.dataset.id;
            Swal.fire({
                title: 'Delete document?',
                text: 'This cannot be undone.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Delete',
                cancelButtonText: 'Cancel',
                reverseButtons: true,
            }).then(function (result) {
                if (!result.isConfirmed) return;
                fetch(url, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
                })
                .then(function (r) { return r.json(); })
                .then(function () {
                    var row = document.getElementById('kyc-doc-' + id);
                    if (row) row.remove();
                })
                .catch(function () {
                    Swal.fire({ icon: 'error', title: 'Error', text: 'Delete failed. Please try again.' });
                });
            });
        });
    }

    document.querySelectorAll('.kyc-delete-btn').forEach(function (btn) { bindDeleteBtn(btn); });

    function escapeHtml(str) {
        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }
}());
</script>
@endpush