@extends('layouts.app')

@section('title', 'Raise Job Order')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-8">
            <h2><i class="fas fa-clipboard-check"></i> Raise Job Order</h2>
            <p class="text-muted mb-0">Field work against a connection. Leave it unassigned and whoever reaches it first can take it.</p>
        </div>
        <div class="col-md-4 text-end">
            <a href="{{ route('work-orders.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> Back to list
            </a>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('work-orders.store') }}" id="raiseJobForm">
        @csrf
        <div class="row">
            <div class="col-lg-7">
                <div class="card mb-3">
                    <div class="card-header"><strong>Connection</strong></div>
                    <div class="card-body">
                        <label class="form-label">Client <span class="text-danger">*</span></label>
                        <div class="position-relative">
                            <input type="text" id="clientSearch" class="form-control"
                                   placeholder="Search by name, account number or meter number"
                                   value="{{ $client?->name }}" autocomplete="off">
                            <div id="clientResults" class="list-group position-absolute w-100 shadow"
                                 style="z-index: 1000; display: none; max-height: 260px; overflow-y: auto;"></div>
                        </div>
                        <input type="hidden" name="client_id" id="clientId" value="{{ old('client_id', $client?->id) }}">
                        <div class="form-text">Type at least 2 characters.</div>

                        <div id="clientPanel" class="mt-3" style="display: none;">
                            <div class="border rounded p-3 bg-light">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <strong id="panelName"></strong>
                                        <span id="panelStatus"></span><br>
                                        <small class="text-muted">
                                            Account <span id="panelAccount"></span> ·
                                            Meter <span id="panelMeter"></span>
                                        </small><br>
                                        <small class="text-muted" id="panelAddress"></small>
                                    </div>
                                    <div class="text-end">
                                        <div class="small text-muted text-uppercase">Outstanding</div>
                                        <div class="h4 mb-0" id="panelBalance">—</div>
                                    </div>
                                </div>
                            </div>

                            {{-- The §5.1 payment gate, shown before the admin fills
                                 the rest of the form in. The server re-checks it. --}}
                            <div class="alert alert-danger mt-3 mb-0" id="gateWarning" style="display: none;">
                                <i class="fas fa-ban"></i> <span id="gateMessage"></span>
                            </div>
                            <div class="alert alert-warning mt-3 mb-0" id="conflictWarning" style="display: none;">
                                <i class="fas fa-exclamation-triangle"></i>
                                <span id="conflictMessage"></span>
                                <a href="#" id="conflictLink" class="alert-link">Open it</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-header"><strong>The job</strong></div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Type <span class="text-danger">*</span></label>
                                <select name="type" id="jobType" class="form-select" required>
                                    <option value="">Choose a type…</option>
                                    @foreach($types as $slug => $label)
                                        <option value="{{ $slug }}" {{ old('type') === $slug ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                                <div class="form-text" id="typeHint"></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Priority</label>
                                <select name="priority" class="form-select">
                                    @foreach($priorities as $priority)
                                        <option value="{{ $priority }}" {{ old('priority', 'normal') === $priority ? 'selected' : '' }}>
                                            {{ ucfirst($priority) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Scheduled date</label>
                                <input type="date" name="scheduled_date" class="form-control" value="{{ old('scheduled_date') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Assign to</label>
                                <select name="assigned_to_id" class="form-select">
                                    <option value="">Leave unassigned (anyone can take it)</option>
                                    @foreach($workers as $worker)
                                        <option value="{{ $worker->id }}" {{ (string) old('assigned_to_id') === (string) $worker->id ? 'selected' : '' }}>
                                            {{ $worker->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="form-text">An assigned job still has to be accepted by that person.</div>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Notes for the field worker</label>
                                <textarea name="notes" class="form-control" rows="3"
                                          placeholder="e.g. Two months unpaid, notice served 2026-09-01.">{{ old('notes') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" id="submitBtn">
                    <i class="fas fa-plus"></i> Raise Job Order
                </button>
                <a href="{{ route('work-orders.index') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>

            <div class="col-lg-5">
                <div class="card">
                    <div class="card-header"><strong>What happens next</strong></div>
                    <div class="card-body small">
                        <ol class="ps-3 mb-3">
                            <li class="mb-2">A field worker <strong>accepts</strong> the job — from the app or from here.</li>
                            <li class="mb-2">They <strong>start</strong> it, do the work, and mark it <strong>completed</strong>.</li>
                            <li class="mb-2"><strong>Completed is not closed.</strong> It lands in your queue for checking.</li>
                            <li>You <strong>verify</strong> it, which closes it and applies its effect.</li>
                        </ol>
                        <hr>
                        <p class="mb-2"><strong>Two rules the system enforces</strong></p>
                        <p class="mb-2">
                            A <strong>reconnection</strong> or <strong>installation</strong> is refused while the
                            account owes anything. Restoring service to an account that still owes is how arrears
                            become uncollectible.
                        </p>
                        <p class="mb-0">
                            A <strong>disconnection</strong> cannot be completed without a final meter reading. The
                            meter is read before the water goes off, because that reading is the last consumption
                            you can bill — once the water is off the number is gone. Verifying the job approves
                            that reading and raises the closing bill.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
    // Careful with Blade directive names in these comments: Blade compiles them
    // even inside a script block.
    (function () {
        var searchUrl = @json(route('api.search-clients'));
        var checkUrlBase = @json(url('/work-orders/client-check'));
        var gatedTypes = @json(array_values($gatedTypes));
        var finalReadingTypes = @json(array_values($finalReadingTypes));

        var searchInput = document.getElementById('clientSearch');
        var results = document.getElementById('clientResults');
        var clientId = document.getElementById('clientId');
        var typeSelect = document.getElementById('jobType');
        var panel = document.getElementById('clientPanel');
        var submitBtn = document.getElementById('submitBtn');
        var timer = null;

        function hideResults() {
            results.style.display = 'none';
            results.innerHTML = '';
        }

        searchInput.addEventListener('input', function () {
            var q = this.value.trim();
            clientId.value = '';
            panel.style.display = 'none';
            refreshGate();

            clearTimeout(timer);
            if (q.length < 2) { hideResults(); return; }

            timer = setTimeout(function () {
                fetch(searchUrl + '?q=' + encodeURIComponent(q), { headers: { 'Accept': 'application/json' } })
                    .then(function (r) { return r.json(); })
                    .then(function (rows) {
                        results.innerHTML = '';
                        if (!rows.length) {
                            results.innerHTML = '<div class="list-group-item text-muted">No clients found.</div>';
                        }
                        rows.forEach(function (c) {
                            var item = document.createElement('button');
                            item.type = 'button';
                            item.className = 'list-group-item list-group-item-action';
                            item.innerHTML = '<strong>' + c.name + '</strong><br><small class="text-muted">'
                                + (c.account_number || '') + ' · Meter ' + (c.meter_number || '—') + '</small>';
                            item.addEventListener('click', function () {
                                clientId.value = c.id;
                                searchInput.value = c.name;
                                hideResults();
                                refreshGate();
                            });
                            results.appendChild(item);
                        });
                        results.style.display = 'block';
                    })
                    .catch(hideResults);
            }, 250);
        });

        document.addEventListener('click', function (e) {
            if (!results.contains(e.target) && e.target !== searchInput) { hideResults(); }
        });

        typeSelect.addEventListener('change', function () {
            var hint = document.getElementById('typeHint');
            if (gatedTypes.indexOf(this.value) !== -1) {
                hint.textContent = 'Refused while the account owes anything.';
            } else if (finalReadingTypes.indexOf(this.value) !== -1) {
                hint.textContent = 'The field worker must record a final meter reading to complete this.';
            } else {
                hint.textContent = '';
            }
            refreshGate();
        });

        // Asks the server what this client owes and whether the chosen type
        // would be refused, so the admin is not left to find out on submit.
        function refreshGate() {
            if (!clientId.value) {
                submitBtn.disabled = false;
                return;
            }

            var url = checkUrlBase + '/' + clientId.value;
            if (typeSelect.value) { url += '?type=' + encodeURIComponent(typeSelect.value); }

            fetch(url, { headers: { 'Accept': 'application/json' } })
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    panel.style.display = 'block';
                    document.getElementById('panelName').textContent = d.name;
                    document.getElementById('panelAccount').textContent = d.account_number || '—';
                    document.getElementById('panelMeter').textContent = d.meter_number || '—';
                    document.getElementById('panelAddress').textContent = d.full_address || '';
                    document.getElementById('panelBalance').textContent = '₱' + d.outstanding_formatted;
                    document.getElementById('panelBalance').className =
                        'h4 mb-0 ' + (d.outstanding_balance > 0 ? 'text-danger' : 'text-success');

                    var status = document.getElementById('panelStatus');
                    status.textContent = '';
                    status.className = '';
                    if (d.status === 'disconnected') {
                        status.textContent = 'Disconnected';
                        status.className = 'badge bg-danger ms-1';
                    }

                    var gate = document.getElementById('gateWarning');
                    if (d.blocked_reason) {
                        document.getElementById('gateMessage').textContent = d.blocked_reason;
                        gate.style.display = 'block';
                    } else {
                        gate.style.display = 'none';
                    }

                    var conflict = document.getElementById('conflictWarning');
                    if (d.conflict) {
                        document.getElementById('conflictMessage').textContent =
                            'A ' + d.conflict.type_label.toLowerCase() + ' (' + d.conflict.order_number
                            + ') is still open for this client. Cancel or finish it first.';
                        document.getElementById('conflictLink').href = d.conflict.url;
                        conflict.style.display = 'block';
                    } else {
                        conflict.style.display = 'none';
                    }

                    // Blocking the button is a courtesy; store() refuses anyway.
                    submitBtn.disabled = !!(d.blocked_reason || d.conflict);
                })
                .catch(function () { submitBtn.disabled = false; });
        }

        if (clientId.value) { refreshGate(); }
    })();
</script>
@endsection