@extends('mainlayout.layout')
@section('title', config('app.name') . ' | New Support Case')
@section('topbar-search', 'enabled')

@section('content')
<main class="portal-workspace portal-form-width">
    <header class="portal-page-header">
        <div>
            <a class="portal-back-link" href="{{ route('support.cases.index') }}"><i class="bx bx-left-arrow-alt"></i> Cases</a>
            <h1>New support case</h1>
            <p>Find the customer's order to load its customer, project, plot, and payment details.</p>
        </div>
    </header>

    <form class="portal-card portal-form" method="POST" action="{{ route('support.cases.store') }}">
        @csrf
        @if($errors->any())
            <div class="alert alert-danger" role="alert">
                <strong>Please review the form.</strong>
                <ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
            </div>
        @endif

        <fieldset>
            <legend>Context</legend>
            <div class="portal-form-grid">
                <label class="portal-order-search-label">
                    <span>Order ID <small>Recommended</small></span>
                    <span class="portal-order-search">
                        <i class="bx bx-search" aria-hidden="true"></i>
                        <input id="order-search" type="search" placeholder="Search by order ID or customer" autocomplete="off"
                            role="combobox" aria-autocomplete="list" aria-controls="order-search-results" aria-expanded="false">
                        <button id="clear-order" class="portal-order-clear" type="button" hidden aria-label="Clear selected order"><i class="bx bx-x"></i></button>
                        <span id="order-search-results" class="portal-order-results" role="listbox" hidden></span>
                    </span>
                    <input id="order-id" type="hidden" name="order_id" value="{{ old('order_id') }}">
                    <small class="portal-field-help">Search all customer orders; the latest 10 appear by default.</small>
                </label>

                <label>
                    <span>Project <small>If no order</small></span>
                    <select id="property-id" name="property_id">
                        <option value="">Not selected</option>
                        @foreach($properties as $property)
                            <option value="{{ $property->id }}" @selected(old('property_id') == $property->id)>{{ $property->name }}</option>
                        @endforeach
                    </select>
                </label>

                <label>
                    <span>Source</span>
                    <select name="source">
                        @foreach(['phone' => 'Phone', 'whatsapp' => 'WhatsApp', 'email' => 'Email', 'portal' => 'Portal', 'mini_app' => 'Mini app'] as $value => $label)
                            <option value="{{ $value }}" @selected(old('source', 'phone') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                </label>

                <label>
                    <span>Type</span>
                    <select id="case-type" name="type">
                        @foreach(\App\Models\SupportCase::TYPES as $type)
                            <option value="{{ $type }}" @selected(old('type', 'general') === $type)>{{ ucfirst($type) }}</option>
                        @endforeach
                    </select>
                </label>

                <label>
                    <span>Priority</span>
                    <select name="priority">
                        @foreach(\App\Models\SupportCase::PRIORITIES as $priority)
                            <option value="{{ $priority }}" @selected(old('priority', 'normal') === $priority)>{{ ucfirst($priority) }}</option>
                        @endforeach
                    </select>
                </label>
            </div>

            <section id="order-context" class="portal-order-context" aria-live="polite" hidden>
                <header><div><small>Selected order</small><strong id="order-context-reference"></strong></div><span id="order-context-status" class="portal-status"></span></header>
                <dl>
                    <div><dt>Customer</dt><dd id="order-context-customer"></dd></div>
                    <div><dt>Phone</dt><dd id="order-context-phone"></dd></div>
                    <div><dt>Project</dt><dd id="order-context-project"></dd></div>
                    <div><dt>Plot</dt><dd id="order-context-plot"></dd></div>
                    <div><dt>Payment plan</dt><dd id="order-context-plan"></dd></div>
                    <div><dt>Order amount</dt><dd id="order-context-amount"></dd></div>
                    <div><dt>Amount paid</dt><dd id="order-context-paid"></dd></div>
                    <div><dt>Balance</dt><dd id="order-context-balance"></dd></div>
                </dl>
            </section>
        </fieldset>

        <fieldset>
            <legend>Issue</legend>
            <label>
                <span>Subject</span>
                <select id="case-subject" name="subject" required></select>
            </label>
            <label id="custom-subject-wrap" hidden>
                <span>Other subject</span>
                <input id="custom-subject" name="custom_subject" value="{{ old('custom_subject') }}" maxlength="255" placeholder="Describe the issue briefly">
            </label>
            <label>
                <span>Description</span>
                <textarea id="case-description" name="description" rows="7" required maxlength="4000" placeholder="Order context and issue details will appear here automatically.">{{ old('description') }}</textarea>
                <small class="portal-field-help">The suggested description can be edited before the case is created.</small>
            </label>
        </fieldset>

        <div class="portal-form-actions">
            <a class="btn btn-mlk-outline" href="{{ route('support.cases.index') }}">Cancel</a>
            <button class="btn btn-mlk-primary" type="submit">Create case</button>
        </div>
    </form>
</main>
@endsection

@push('scripts')
<script>
(function () {
    var subjects = @json(\App\Models\SupportCase::SUBJECTS);
    var selectedOrder = @json($selectedOrder);
    var oldSubject = @json(old('subject'));
    var initialProperty = @json((string) old('property_id', ''));
    var searchUrl = @json(route('support.orders.search'));
    var typeSelect = document.getElementById('case-type');
    var subjectSelect = document.getElementById('case-subject');
    var customSubjectWrap = document.getElementById('custom-subject-wrap');
    var customSubject = document.getElementById('custom-subject');
    var description = document.getElementById('case-description');
    var search = document.getElementById('order-search');
    var results = document.getElementById('order-search-results');
    var orderId = document.getElementById('order-id');
    var propertyId = document.getElementById('property-id');
    var clearOrder = document.getElementById('clear-order');
    var context = document.getElementById('order-context');
    var timer;
    var searchSequence = 0;
    var descriptionIsSuggested = !description.value.trim();

    function escapeHtml(value) {
        var node = document.createElement('div');
        node.textContent = value == null ? '' : String(value);
        return node.innerHTML;
    }

    function money(value) {
        return 'TZS ' + new Intl.NumberFormat('en-TZ').format(Number(value || 0));
    }

    function effectiveSubject() {
        return subjectSelect.value === 'Other' ? customSubject.value.trim() : subjectSelect.value;
    }

    function suggestedDescription() {
        var issue = effectiveSubject();
        var lines = [];
        if (selectedOrder) {
            lines.push('Customer ' + selectedOrder.customer.name + ' contacted support regarding order ' + selectedOrder.reference + '.');
            lines.push('Project: ' + selectedOrder.project.name + '; plot: ' + selectedOrder.plot.number + '; order status: ' + selectedOrder.status + '.');
            lines.push('Payment plan: ' + selectedOrder.payment_plan + '; order amount: ' + money(selectedOrder.amount) + '; amount paid: ' + money(selectedOrder.amount_paid) + '; balance: ' + money(selectedOrder.balance) + '.');
        } else {
            lines.push('Customer contacted support' + (issue ? ' regarding ' + issue.toLowerCase() : '') + '.');
        }
        if (issue) lines.push('Issue: ' + issue + '.');
        lines.push('Please review the customer\'s request and provide the appropriate assistance.');
        return lines.join('\n');
    }

    function updateDescription(force) {
        if (force || descriptionIsSuggested || !description.value.trim()) {
            description.value = suggestedDescription();
            descriptionIsSuggested = true;
        }
    }

    function populateSubjects() {
        var options = subjects[typeSelect.value] || subjects.general;
        subjectSelect.innerHTML = '<option value="">Select a subject</option>' + options.map(function (item) {
            return '<option value="' + escapeHtml(item) + '">' + escapeHtml(item) + '</option>';
        }).join('');
        if (oldSubject && options.indexOf(oldSubject) !== -1) {
            subjectSelect.value = oldSubject;
            oldSubject = null;
        }
        toggleCustomSubject();
    }

    function toggleCustomSubject() {
        var isOther = subjectSelect.value === 'Other';
        customSubjectWrap.hidden = !isOther;
        customSubject.required = isOther;
        if (!isOther) customSubject.value = '';
    }

    function renderOrder(order) {
        selectedOrder = order;
        orderId.value = order.id;
        search.value = order.reference + ' · ' + order.customer.name;
        search.setAttribute('aria-expanded', 'false');
        results.hidden = true;
        clearOrder.hidden = false;
        propertyId.value = String(order.project.id || '');
        propertyId.disabled = true;
        document.getElementById('order-context-reference').textContent = 'Order ' + order.reference;
        document.getElementById('order-context-status').textContent = order.status;
        document.getElementById('order-context-customer').textContent = order.customer.name;
        document.getElementById('order-context-phone').textContent = order.customer.phone || 'Not available';
        document.getElementById('order-context-project').textContent = order.project.name;
        document.getElementById('order-context-plot').textContent = order.plot.number;
        document.getElementById('order-context-plan').textContent = order.payment_plan;
        document.getElementById('order-context-amount').textContent = money(order.amount);
        document.getElementById('order-context-paid').textContent = money(order.amount_paid);
        document.getElementById('order-context-balance').textContent = money(order.balance);
        context.hidden = false;
        updateDescription(false);
    }

    function showResults(orders) {
        if (!orders.length) {
            results.innerHTML = '<span class="portal-order-result-empty">No customer orders found.</span>';
        } else {
            results.innerHTML = orders.map(function (order, index) {
                return '<button type="button" class="portal-order-result" role="option" data-index="' + index + '">' +
                    '<strong>' + escapeHtml(order.reference) + '</strong><span>' + escapeHtml(order.customer.name) + '</span>' +
                    '<small>' + escapeHtml(order.project.name) + ' · Plot ' + escapeHtml(order.plot.number) + ' · ' + escapeHtml(order.status) + '</small></button>';
            }).join('');
            Array.prototype.forEach.call(results.querySelectorAll('.portal-order-result'), function (button) {
                button.addEventListener('click', function () { renderOrder(orders[Number(button.dataset.index)]); });
            });
        }
        results.hidden = false;
        search.setAttribute('aria-expanded', 'true');
    }

    function findOrders() {
        var query = search.value.trim();
        var sequence = ++searchSequence;
        results.innerHTML = '<span class="portal-order-result-empty">Searching...</span>';
        results.hidden = false;
        search.setAttribute('aria-expanded', 'true');
        fetch(searchUrl + '?q=' + encodeURIComponent(query), { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (response) { if (!response.ok) throw new Error('Search failed'); return response.json(); })
            .then(function (data) { if (sequence === searchSequence) showResults(data.orders || []); })
            .catch(function () { if (sequence === searchSequence) results.innerHTML = '<span class="portal-order-result-empty">Order search is temporarily unavailable.</span>'; });
    }

    typeSelect.addEventListener('change', function () {
        oldSubject = null;
        populateSubjects();
        updateDescription(false);
    });
    subjectSelect.addEventListener('change', function () {
        toggleCustomSubject();
        updateDescription(false);
        if (subjectSelect.value === 'Other') customSubject.focus();
    });
    customSubject.addEventListener('input', function () { updateDescription(false); });
    description.addEventListener('input', function () { descriptionIsSuggested = false; });
    search.addEventListener('input', function () {
        if (selectedOrder) {
            selectedOrder = null;
            orderId.value = '';
            context.hidden = true;
            clearOrder.hidden = true;
            propertyId.disabled = false;
            updateDescription(true);
        }
        window.clearTimeout(timer);
        timer = window.setTimeout(findOrders, 250);
    });
    search.addEventListener('focus', function () { if (!selectedOrder) findOrders(); });
    clearOrder.addEventListener('click', function () {
        selectedOrder = null;
        orderId.value = '';
        search.value = '';
        propertyId.value = initialProperty;
        propertyId.disabled = false;
        context.hidden = true;
        clearOrder.hidden = true;
        updateDescription(true);
        search.focus();
    });
    document.addEventListener('click', function (event) {
        if (!event.target.closest('.portal-order-search')) {
            results.hidden = true;
            search.setAttribute('aria-expanded', 'false');
        }
    });

    populateSubjects();
    if (selectedOrder) renderOrder(selectedOrder);
    else updateDescription(false);
})();
</script>
@endpush