@extends('layouts.app')

@section('title', 'Add Client')

@section('content')
<div class="d-flex align-items-center mb-4">
    <a href="{{ route('admin.client.index') }}" class="btn btn-sm btn-outline-secondary me-3">
        <i class="bi bi-arrow-left"></i>
    </a>
    <div>
        <h4 class="fw-bold mb-0">Add Client</h4>
        <div class="text-muted small">Create a new client profile</div>
    </div>
</div>

<div class="row g-4">

    {{-- Form --}}
    <div class="col-lg-7">
        <form action="{{ route('admin.client.store') }}" method="POST" id="client-form">
            @csrf

            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-0 pt-3 pb-0">
                    <h6 class="fw-semibold mb-0">Personal Details</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">First Name <span class="text-danger">*</span></label>
                            <input type="text" name="first_name" id="client-first-name"
                                   class="form-control @error('first_name') is-invalid @enderror"
                                   value="{{ old('first_name') }}" autocomplete="off">
                            @error('first_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Last Name <span class="text-danger">*</span></label>
                            <input type="text" name="last_name" id="client-last-name"
                                   class="form-control @error('last_name') is-invalid @enderror"
                                   value="{{ old('last_name') }}" autocomplete="off">
                            @error('last_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Mobile <span class="text-danger">*</span></label>
                            <input type="text" name="mobile" id="client-mobile"
                                   class="form-control @error('mobile') is-invalid @enderror"
                                   value="{{ old('mobile') }}" maxlength="10" autocomplete="off">
                            @error('mobile') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Email</label>
                            <input type="email" name="email" id="client-email"
                                   class="form-control @error('email') is-invalid @enderror"
                                   value="{{ old('email') }}" placeholder="Optional">
                            @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">City</label>
                            <input type="text" name="city"
                                   class="form-control @error('city') is-invalid @enderror"
                                   value="{{ old('city') }}" placeholder="Optional">
                            @error('city') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-medium">Address</label>
                            <textarea name="address" rows="2"
                                      class="form-control @error('address') is-invalid @enderror"
                                      placeholder="Optional">{{ old('address') }}</textarea>
                            @error('address') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-0 pt-3 pb-0">
                    <h6 class="fw-semibold mb-0">Preferences & Assignment</h6>
                </div>
                <div class="card-body">
                    <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 @error('interest_type') is-invalid @enderror">
                                <option value="">Select…</option>
                                @foreach(\App\Models\Client::INTEREST_TYPES as $value => $label)
                                    <option value="{{ $value }}" {{ old('interest_type') === $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('interest_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Sourcing Channel <span class="text-danger">*</span></label>
                            <select name="sourcing_channel_id"
                                    class="form-select @error('sourcing_channel_id') is-invalid @enderror">
                                <option value="">Select…</option>
                                @foreach($sourcingChannels as $ch)
                                    <option value="{{ $ch->id }}"
                                        {{ old('sourcing_channel_id') == $ch->id ? 'selected' : '' }}>
                                        {{ $ch->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('sourcing_channel_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        @if(Auth::user()->isAdmin())
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Assign To Staff</label>
                            <select name="assigned_to"
                                    class="form-select @error('assigned_to') is-invalid @enderror">
                                <option value="">Unassigned</option>
                                @foreach($staffMembers as $staff)
                                    <option value="{{ $staff->id }}"
                                        {{ old('assigned_to') == $staff->id ? 'selected' : '' }}>
                                        {{ $staff->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('assigned_to') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary px-4">Save Client</button>
                <a href="{{ route('admin.client.index') }}" class="btn btn-light">Cancel</a>
            </div>
        </form>
    </div>

    {{-- Duplicate detection panel --}}
    <div class="col-lg-5">

        {{-- Loading indicator --}}
        <div class="card border-0 shadow-sm mb-3 d-none" id="dup-loading">
            <div class="card-body text-center py-3">
                <div class="spinner-border spinner-border-sm text-warning me-2" role="status"></div>
                <span class="small text-muted">Checking for duplicates…</span>
            </div>
        </div>

        {{-- Match results --}}
        <div class="card border-warning shadow-sm d-none" id="dup-panel">
            <div class="card-header bg-warning bg-opacity-10 border-bottom border-warning border-opacity-25 pt-3 pb-2 d-flex align-items-center justify-content-between">
                <span class="fw-semibold small text-warning-emphasis">
                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                    Similar Clients Found
                    <span class="badge bg-warning text-dark ms-1" id="dup-count-badge">0</span>
                </span>
                <button type="button" class="btn btn-sm btn-link text-muted p-0" id="dup-close-btn"
                        title="Hide panel">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <div id="dup-results"></div>
            <div class="card-footer bg-white border-top py-2 px-3">
                <button type="button" class="btn btn-sm btn-primary w-100" id="dup-continue-btn">
                    <i class="bi bi-pencil-square me-1"></i>Continue Creating New
                </button>
            </div>
        </div>

        {{-- No duplicates --}}
        <div class="card border-0 shadow-sm d-none" id="dup-empty">
            <div class="card-body text-muted small text-center py-3">
                <i class="bi bi-check-circle text-success d-block fs-4 mb-1"></i>
                No similar clients found.
            </div>
        </div>

    </div>

</div>
@endsection

@push('scripts')
<script>
(function () {
    var firstInput    = document.getElementById('client-first-name');
    var lastInput     = document.getElementById('client-last-name');
    var mobileInput   = document.getElementById('client-mobile');
    var emailInput    = document.getElementById('client-email');
    var dupPanel      = document.getElementById('dup-panel');
    var dupEmpty      = document.getElementById('dup-empty');
    var dupLoading    = document.getElementById('dup-loading');
    var dupResults    = document.getElementById('dup-results');
    var dupCountBadge = document.getElementById('dup-count-badge');
    var dupCloseBtn   = document.getElementById('dup-close-btn');
    var dupContinueBtn = document.getElementById('dup-continue-btn');
    var checkUrl      = "{{ route('admin.ajax.clients.duplicate-check') }}";
    var logUrl        = "{{ route('admin.ajax.clients.duplicate-log') }}";
    var csrfToken     = document.querySelector('meta[name="csrf-token"]').content;

    var searchTimer   = null;
    var currentMatches = [];

    function scheduleCheck() {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(runCheck, 500);
    }

    function runCheck() {
        var mobile = mobileInput ? mobileInput.value.trim() : '';
        var email  = emailInput  ? emailInput.value.trim()  : '';
        var name   = [
            firstInput ? firstInput.value.trim() : '',
            lastInput  ? lastInput.value.trim()  : '',
        ].filter(Boolean).join(' ');

        // Need at least one signal
        if (mobile.length < 5 && email.length < 5 && name.length < 2) {
            hideAll();
            return;
        }

        var params = new URLSearchParams();
        if (mobile.length >= 5) params.set('mobile', mobile);
        if (email.length >= 5)  params.set('email', email);
        if (name.length >= 2)   params.set('name', name);

        showLoading();

        fetch(checkUrl + '?' + params.toString(), {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken }
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            currentMatches = data.matches || [];
            render(currentMatches);
        })
        .catch(function () { hideAll(); });
    }

    function showLoading() {
        dupLoading.classList.remove('d-none');
        dupPanel.classList.add('d-none');
        dupEmpty.classList.add('d-none');
    }

    function hideAll() {
        dupLoading.classList.add('d-none');
        dupPanel.classList.add('d-none');
        dupEmpty.classList.add('d-none');
        dupResults.innerHTML = '';
        currentMatches = [];
    }

    function render(matches) {
        dupLoading.classList.add('d-none');

        if (! matches.length) {
            dupPanel.classList.add('d-none');
            dupEmpty.classList.remove('d-none');
            return;
        }

        dupEmpty.classList.add('d-none');
        dupCountBadge.textContent = matches.length;
        dupResults.innerHTML      = '';

        matches.forEach(function (c) {
            var matchBadge = c.match_type === 'exact_mobile'
                ? '<span class="badge bg-danger" style="font-size:0.6rem">Mobile Match</span>'
                : c.match_type === 'exact_email'
                    ? '<span class="badge bg-danger" style="font-size:0.6rem">Email Match</span>'
                    : '<span class="badge bg-warning text-dark" style="font-size:0.6rem">Similar Name</span>';

            var reqBadge = c.active_requirements_count > 0
                ? '<span class="badge bg-primary bg-opacity-75 ms-1" style="font-size:0.6rem">'
                    + c.active_requirements_count + ' active req.</span>'
                : '';

            var metaItems = [];
            if (c.mobile)          metaItems.push('<i class="bi bi-phone me-1"></i>' + esc(c.mobile));
            if (c.email)           metaItems.push('<i class="bi bi-envelope me-1"></i>' + esc(c.email));
            if (c.city)            metaItems.push('<i class="bi bi-geo-alt me-1"></i>' + esc(c.city));
            if (c.sourcing_channel) metaItems.push('<i class="bi bi-funnel me-1"></i>' + esc(c.sourcing_channel));
            if (c.assigned_staff)  metaItems.push('<i class="bi bi-person-check me-1"></i>' + esc(c.assigned_staff));

            var card = document.createElement('div');
            card.className = 'border-bottom p-3';
            card.dataset.clientId = c.id;
            card.innerHTML =
                '<div class="d-flex align-items-start justify-content-between mb-1">' +
                    '<span class="fw-medium small">' + esc(c.name) + reqBadge + '</span>' +
                    matchBadge +
                '</div>' +
                '<div class="small text-muted mb-2">' +
                    metaItems.join('<span class="mx-1 text-secondary opacity-50">·</span>') +
                '</div>' +
                '<a href="' + esc(c.profile_url) + '" class="btn btn-sm btn-outline-primary py-0 px-2"' +
                   ' data-action="view_existing" data-client-id="' + c.id + '">' +
                    '<i class="bi bi-box-arrow-up-right me-1"></i>Open Existing Profile' +
                '</a>';

            dupResults.appendChild(card);
        });

        dupPanel.classList.remove('d-none');
    }

    function esc(str) {
        if (! str) return '';
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    function logDecision(action, clientIds) {
        if (! clientIds.length) return;
        fetch(logUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept':       'application/json',
                'X-CSRF-TOKEN': csrfToken,
            },
            body: JSON.stringify({ action: action, matched_client_ids: clientIds }),
        }).catch(function () { /* silent — logging failure must not block the user */ });
    }

    // "Open Existing Profile" — log then navigate (delegated on results container)
    dupResults.addEventListener('click', function (e) {
        var btn = e.target.closest('[data-action="view_existing"]');
        if (! btn) return;
        e.preventDefault();
        var clientId = parseInt(btn.dataset.clientId, 10);
        logDecision('view_existing', [clientId]);
        window.location.href = btn.getAttribute('href');
    });

    // "Continue Creating New" — log all shown matches then hide panel
    dupContinueBtn.addEventListener('click', function () {
        var ids = currentMatches.map(function (m) { return m.id; });
        logDecision('continue_new', ids);
        hideAll();
    });

    // Hide panel (X button)
    dupCloseBtn.addEventListener('click', function () {
        hideAll();
    });

    // Trigger points
    [firstInput, lastInput].forEach(function (el) {
        if (el) el.addEventListener('input', scheduleCheck);
    });
    if (mobileInput) {
        mobileInput.addEventListener('input', scheduleCheck);
    }
    if (emailInput) {
        emailInput.addEventListener('input', scheduleCheck);
        emailInput.addEventListener('blur',  scheduleCheck);
    }
}());
</script>
@endpush