@extends('layouts.app')

@section('title', $client->full_name . ' — Client 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.client.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left"></i>
        </a>
        <div>
            <h4 class="fw-bold mb-0">{{ $client->full_name }}</h4>
            <div class="text-muted small">
                {{ $client->mobile }}
                @if($client->email) &bull; {{ $client->email }} @endif
                @if($client->city) &bull; {{ $client->city }} @endif
            </div>
        </div>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.client.edit', $client) }}" 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.client.destroy', $client) }}" method="POST"
              data-confirm="Delete {{ addslashes($client->full_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="small text-muted mb-1">Interest</div>
            <div class="fw-semibold">{{ \App\Models\Client::INTEREST_TYPES[$client->interest_type] }}</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">Source</div>
            <div class="fw-semibold small">{{ optional($client->sourcingChannel)->name ?? '—' }}</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-primary">{{ $activeRequirements->count() }}</div>
            <div class="small text-muted">Active Requirements</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>

{{-- KYC + Profile row --}}
<div class="row g-4 mb-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">
                <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">
                <div class="border rounded p-3 bg-light mb-3">
                    <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</label>
                            <input type="file" id="kyc-file" class="form-control form-control-sm"
                                   accept=".pdf,.jpg,.jpeg,.png,.docx">
                        </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>
                <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\ClientKycService::formatBytesStatic((int)$doc->size) }}
                                &bull; {{ $doc->created_at->format('d M Y') }}
                            </div>
                        </div>
                        <a href="{{ route('admin.client.kyc.download', [$client, $doc]) }}"
                           class="btn btn-sm btn-outline-secondary flex-shrink-0"><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.client.kyc.destroy', [$client, $doc]) }}"
                                data-id="{{ $doc->id }}"><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>

    {{-- Profile details + Staff assignment --}}
    <div class="col-lg-6 d-flex flex-column gap-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 pt-3 pb-0">
                <h6 class="fw-semibold mb-0"><i class="bi bi-person me-2 text-primary"></i>Profile Details</h6>
            </div>
            <div class="card-body">
                <dl class="row mb-0 small">
                    <dt class="col-5 text-muted fw-normal">Full Name</dt>
                    <dd class="col-7 fw-medium">{{ $client->full_name }}</dd>
                    <dt class="col-5 text-muted fw-normal">Mobile</dt>
                    <dd class="col-7">{{ $client->mobile }}</dd>
                    <dt class="col-5 text-muted fw-normal">Email</dt>
                    <dd class="col-7">{{ $client->email ?? '—' }}</dd>
                    <dt class="col-5 text-muted fw-normal">City</dt>
                    <dd class="col-7">{{ $client->city ?? '—' }}</dd>
                    @if($client->address)
                    <dt class="col-5 text-muted fw-normal">Address</dt>
                    <dd class="col-7">{{ $client->address }}</dd>
                    @endif
                    <dt class="col-5 text-muted fw-normal">Assigned To</dt>
                    <dd class="col-7">{{ optional($client->assignedTo)->name ?? '—' }}</dd>
                    <dt class="col-5 text-muted fw-normal">Added by</dt>
                    <dd class="col-7">{{ optional($client->createdBy)->name ?? '—' }}</dd>
                    <dt class="col-5 text-muted fw-normal">Added on</dt>
                    <dd class="col-7">{{ $client->created_at->format('d M Y, h:i A') }}</dd>
                </dl>
            </div>
        </div>

        @if(Auth::user()->isAdmin())
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 pt-3 pb-0">
                <h6 class="fw-semibold mb-0"><i class="bi bi-person-badge me-2 text-primary"></i>Assigned Staff</h6>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.client.assign', $client) }}" method="POST" class="d-flex gap-2 align-items-end">
                    @csrf
                    @method('PATCH')
                    <div class="flex-grow-1">
                        <label class="form-label small fw-medium mb-1">Staff Member</label>
                        <select name="assigned_to" class="form-select form-select-sm">
                            <option value="">Unassigned</option>
                            @foreach($staffMembers as $staff)
                                <option value="{{ $staff->id }}" {{ $client->assigned_to === $staff->id ? 'selected' : '' }}>
                                    {{ $staff->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm px-3">Assign</button>
                </form>
            </div>
        </div>
        @endif
    </div>
</div>

{{-- ═══════════════════ REQUIREMENTS SECTION ═══════════════════ --}}
<div class="d-flex align-items-center justify-content-between mb-3">
    <h5 class="fw-bold mb-0"><i class="bi bi-list-check me-2 text-primary"></i>Search Requirements</h5>
    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addRequirementModal">
        <i class="bi bi-plus-lg me-1"></i>Add Requirement
    </button>
</div>

{{-- Active Requirements --}}
@if($activeRequirements->isNotEmpty())
<div class="mb-4">
    <div class="text-muted small fw-medium mb-2 text-uppercase" style="letter-spacing:.05em">
        Active — {{ $activeRequirements->count() }}
    </div>
    <div class="row g-3">
        @foreach($activeRequirements as $req)
        @include('client.requirement._card', ['req' => $req, 'client' => $client])
        @endforeach
    </div>
</div>
@endif

{{-- Past Requirements --}}
@if($closedRequirements->isNotEmpty())
<div class="mb-4">
    <div class="text-muted small fw-medium mb-2 text-uppercase" style="letter-spacing:.05em">
        Past Requirements — {{ $closedRequirements->count() }}
    </div>
    <div class="row g-3">
        @foreach($closedRequirements as $req)
        @include('client.requirement._card', ['req' => $req, 'client' => $client])
        @endforeach
    </div>
</div>
@endif

@if($activeRequirements->isEmpty() && $closedRequirements->isEmpty())
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body text-center text-muted py-5">
        <i class="bi bi-search d-block fs-2 mb-2 text-secondary"></i>
        No requirements yet.
        <div class="mt-2">
            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addRequirementModal">
                <i class="bi bi-plus-lg me-1"></i>Add First Requirement
            </button>
        </div>
    </div>
</div>
@endif

<!-- Add Requirement Modal -->
<div class="modal fade" id="addRequirementModal" tabindex="-1" aria-labelledby="addReqModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold" id="addReqModalLabel">Add Search Requirement</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.client.requirement.store', $client) }}" method="POST" id="req-form">
                @csrf
                <div class="modal-body pt-2">
                    <div id="req-modal-error" class="alert alert-danger d-none small py-2"></div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Interest Type <span class="text-danger">*</span></label>
                            <select name="interest_type" class="form-select" required>
                                <option value="">Select…</option>
                                @foreach(\App\Models\ClientRequirement::INTEREST_TYPES as $v => $l)
                                    <option value="{{ $v }}">{{ $l }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Property Type Preference</label>
                            <select name="property_type" id="req-property-type" class="form-select">
                                @foreach(\App\Models\ClientRequirement::PROPERTY_TYPES as $v => $l)
                                    <option value="{{ $v }}" {{ $v === 'any' ? 'selected' : '' }}>{{ $l }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Minimum Budget (₹)</label>
                            <input type="number" name="min_budget" id="req-min-budget" class="form-control" min="0" step="1000"
                                   placeholder="e.g. 5000000">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Maximum Budget (₹)</label>
                            <input type="number" name="max_budget" id="req-max-budget" class="form-control" min="0" step="1000"
                                   placeholder="e.g. 10000000">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium" id="size-min-label">Minimum Size (sq ft)</label>
                            <input type="number" name="min_size" id="req-min-size" class="form-control" min="0" step="10">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium" id="size-max-label">Maximum Size (sq ft)</label>
                            <input type="number" name="max_size" id="req-max-size" class="form-control" min="0" step="10">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-medium">Preferred Location / Area</label>
                            <input type="text" name="preferred_location" class="form-control"
                                   placeholder="e.g. Vijay Nagar, AB Road corridor">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-medium">Additional Notes</label>
                            <textarea name="notes" rows="2" class="form-control"
                                      placeholder="Any specific requirements the client mentioned…"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Requirement</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Close Requirement Modal -->
<div class="modal fade" id="closeReqModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">Close Requirement</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" id="close-req-form">
                @csrf
                @method('PATCH')
                <div class="modal-body pt-2">
                    <p class="text-muted small mb-3" id="close-req-title"></p>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Outcome <span class="text-danger">*</span></label>
                        <div class="d-flex gap-3">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="close_reason"
                                       id="close-won" value="won" required>
                                <label class="form-check-label" for="close-won">
                                    <span class="text-success fw-medium">Won</span>
                                    <div class="text-muted" style="font-size:0.75rem">Client found a property</div>
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="close_reason"
                                       id="close-lost" value="lost">
                                <label class="form-check-label" for="close-lost">
                                    <span class="text-danger fw-medium">Lost</span>
                                    <div class="text-muted" style="font-size:0.75rem">Client dropped / no longer interested</div>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div>
                        <label class="form-label fw-medium">Notes (optional)</label>
                        <textarea name="notes" rows="2" class="form-control"
                                  placeholder="Any context about the closure…"></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Close Requirement</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
(function () {
    // Close requirement modal setup
    var closeModal     = document.getElementById('closeReqModal');
    var closeForm      = document.getElementById('close-req-form');
    var closeTitle     = document.getElementById('close-req-title');

    if (closeModal) {
        closeModal.addEventListener('show.bs.modal', function (e) {
            var btn  = e.relatedTarget;
            var url  = btn.dataset.closeUrl;
            var title = btn.dataset.reqTitle;
            closeForm.action = url;
            closeTitle.textContent = 'Closing: "' + title + '"';
            closeModal.querySelectorAll('input[name=close_reason]').forEach(function (r) { r.checked = false; });
            closeModal.querySelector('textarea[name=notes]').value = '';
        });
    }

    // KYC upload
    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.client.kyc.store', $client) }}";
    var csrfToken   = document.querySelector('meta[name="csrf-token"]').content;
    var isAdmin     = "{{ Auth::user()->isAdmin() ? '1' : '0' }}" === '1';

    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 fd = new FormData();
            fd.append('document_type_id', typeSelect.value);
            fd.append('file', fileInput.files[0]);
            fd.append('_token', csrfToken);
            uploadBtn.disabled = true;
            progressBar.classList.remove('d-none');
            fetch(uploadUrl, { method: 'POST', body: fd, 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 delBtn = isAdmin ? '<button class="btn btn-sm btn-outline-danger flex-shrink-0 kyc-delete-btn" data-url="' + d.destroy_url + '" data-id="' + d.id + '"><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">' + esc(d.original_name) + '</div>'
                    + '<div class="text-muted" style="font-size:0.72rem">' + esc(d.type_label) + ' &bull; ' + esc(d.size) + '</div></div>'
                    + '<a href="' + d.download_url + '" class="btn btn-sm btn-outline-secondary flex-shrink-0"><i class="bi bi-download"></i></a>' + delBtn;
                kycList.appendChild(row);
                bindDel(row.querySelector('.kyc-delete-btn'));
                typeSelect.value = ''; fileInput.value = '';
            })
            .catch(function () { errorBox.textContent = 'Network error.'; errorBox.classList.remove('d-none'); })
            .finally(function () { uploadBtn.disabled = false; progressBar.classList.add('d-none'); });
        });
    }

    function bindDel(btn) {
        if (!btn) return;
        btn.addEventListener('click', function () {
            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(btn.dataset.url, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' } })
                .then(function () { var r = document.getElementById('kyc-doc-' + btn.dataset.id); if (r) r.remove(); })
                .catch(function () { Swal.fire({ icon: 'error', title: 'Error', text: 'Delete failed. Please try again.' }); });
            });
        });
    }

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

    function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

    // ── Add Requirement form ──────────────────────────────────────────
    var reqForm      = document.getElementById('req-form');
    var reqError     = document.getElementById('req-modal-error');
    var addReqModal  = document.getElementById('addRequirementModal');
    var propTypeReq  = document.getElementById('req-property-type');
    var minBudgetInp = document.getElementById('req-min-budget');
    var maxBudgetInp = document.getElementById('req-max-budget');
    var minSizeInp   = document.getElementById('req-min-size');
    var maxSizeInp   = document.getElementById('req-max-size');
    var sizeMinLbl   = document.getElementById('size-min-label');
    var sizeMaxLbl   = document.getElementById('size-max-label');

    // Reset labels and clear errors each time the modal opens
    if (addReqModal) {
        addReqModal.addEventListener('show.bs.modal', function () {
            reqError.classList.add('d-none');
            reqError.innerHTML = '';
            sizeMinLbl.textContent = 'Minimum Size (sq ft)';
            sizeMaxLbl.textContent = 'Maximum Size (sq ft)';
            propTypeReq.value = 'any';
        });
    }

    // Toggle size unit label when property type changes
    if (propTypeReq) {
        propTypeReq.addEventListener('change', function () {
            var unit = this.value === 'agricultural_land' ? 'acres' : 'sq ft';
            sizeMinLbl.textContent = 'Minimum Size (' + unit + ')';
            sizeMaxLbl.textContent = 'Maximum Size (' + unit + ')';
        });
    }

    // AJAX submission with client-side cross-field validation
    if (reqForm) {
        reqForm.addEventListener('submit', function (e) {
            e.preventDefault();
            reqError.classList.add('d-none');
            reqError.innerHTML = '';

            var errors = [];
            var minB = minBudgetInp.value.trim();
            var maxB = maxBudgetInp.value.trim();
            if (minB !== '' && maxB !== '' && parseFloat(maxB) < parseFloat(minB)) {
                errors.push('Maximum Budget must be greater than or equal to Minimum Budget.');
            }
            var minS = minSizeInp.value.trim();
            var maxS = maxSizeInp.value.trim();
            if (minS !== '' && maxS !== '' && parseFloat(maxS) < parseFloat(minS)) {
                errors.push('Maximum Size must be greater than or equal to Minimum Size.');
            }
            if (errors.length) {
                reqError.innerHTML = errors.join('<br>');
                reqError.classList.remove('d-none');
                return;
            }

            var submitBtn = reqForm.querySelector('[type=submit]');
            submitBtn.disabled = true;

            fetch(reqForm.action, {
                method: 'POST',
                body: new FormData(reqForm),
                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) {
                    window.location.href = r.data.redirect || window.location.href;
                    return;
                }
                var msg = r.data.errors
                    ? Object.values(r.data.errors).flat().join('<br>')
                    : (r.data.message || 'An error occurred. Please try again.');
                reqError.innerHTML = msg;
                reqError.classList.remove('d-none');
            })
            .catch(function () {
                reqError.textContent = 'Network error. Please try again.';
                reqError.classList.remove('d-none');
            })
            .finally(function () { submitBtn.disabled = false; });
        });
    }
}());
</script>
@endpush