@extends('layouts.app')

@section('title', $order->order_number)

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-8">
            <h2>
                <i class="fas fa-clipboard-list"></i> {{ $order->order_number }}
                @include('work-orders.partials.status-badge', ['order' => $order])
                @if($order->priority !== 'normal')
                    <span class="badge bg-{{ $order->priority === 'urgent' ? 'danger' : ($order->priority === 'high' ? 'warning text-dark' : 'secondary') }}">
                        {{ ucfirst($order->priority) }}
                    </span>
                @endif
            </h2>
            <p class="text-muted mb-0">{{ $order->typeLabel() }}</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(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
            </ul>
        </div>
    @endif

    {{-- The state banner. `completed` is called out explicitly because it is
         the one status that looks finished and is not. --}}
    @if($order->status === 'completed')
        <div class="alert alert-warning">
            <strong><i class="fas fa-hourglass-half"></i> Waiting on the office.</strong>
            {{ $order->completedBy?->name ?? 'The field worker' }} marked this done
            {{ $order->completed_at?->diffForHumans() }}. It is not closed until someone verifies it.
            @if($order->requiresFinalReading() && $order->meterReading)
                Verifying will approve the final reading of
                <strong>{{ rtrim(rtrim(number_format($order->meterReading->reading_value, 2), '0'), '.') }}</strong>
                and raise the closing bill.
            @endif
        </div>
    @elseif($order->status === 'rejected')
        <div class="alert alert-danger">
            <strong><i class="fas fa-undo"></i> Sent back.</strong>
            {{ $order->rejection_reason }}
        </div>
    @elseif($order->status === 'cancelled')
        <div class="alert alert-secondary">
            <strong>Cancelled</strong> by {{ $order->cancelledBy?->name ?? 'the office' }}
            on {{ $order->cancelled_at?->format('M d, Y g:i A') }}.
            @if($order->cancellation_reason) — {{ $order->cancellation_reason }} @endif
        </div>
    @elseif($order->status === 'verified')
        <div class="alert alert-success">
            <strong><i class="fas fa-check-circle"></i> Verified and closed</strong>
            by {{ $order->verifiedBy?->name }} on {{ $order->verified_at?->format('M d, Y g:i A') }}.
            @if($order->verification_notes) — {{ $order->verification_notes }} @endif
        </div>
    @endif

    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-3">
                <div class="card-header"><strong>Connection</strong></div>
                <div class="card-body">
                    @if($order->client)
                        <div class="row">
                            <div class="col-md-7">
                                <h5 class="mb-1">
                                    {{ $order->client->name }}
                                    @if($order->client->status === 'disconnected')
                                        <span class="badge bg-danger">Disconnected</span>
                                    @endif
                                </h5>
                                <div class="text-muted">
                                    Account {{ $order->client->account_number }} ·
                                    Meter {{ $order->client->meter_number ?: '—' }}
                                </div>
                                <div class="text-muted">{{ $order->address ?: $order->client->full_address }}</div>
                                <a href="{{ route('clients.show', $order->client) }}" class="small">View client</a>
                            </div>
                            <div class="col-md-5 text-md-end mt-3 mt-md-0">
                                {{-- Two balances on purpose: what the office saw
                                     when it raised the job, and what is owed now.
                                     A reconnection raised in error has to be
                                     explainable after the customer has paid. --}}
                                <div class="small text-muted text-uppercase">Owed when raised</div>
                                <div class="h5 mb-2">
                                    {{ $order->outstanding_balance_snapshot !== null
                                        ? '₱' . number_format($order->outstanding_balance_snapshot, 2)
                                        : '—' }}
                                </div>
                                <div class="small text-muted text-uppercase">Owed now</div>
                                <div class="h5 mb-0 {{ $order->client->outstanding_balance > 0 ? 'text-danger' : 'text-success' }}">
                                    ₱{{ number_format($order->client->outstanding_balance, 2) }}
                                </div>
                            </div>
                        </div>
                    @else
                        <span class="text-muted">No client attached to this job.</span>
                    @endif
                </div>
            </div>

            {{-- Where the job came from. A disconnection raised off an overdue
                 billing has to lead back to that billing, because verifying the
                 job is what moves the billing's own disconnection status. --}}
            @if($source)
            <div class="card mb-3">
                <div class="card-header"><strong>Raised from</strong></div>
                <div class="card-body">
                    @if($order->source_type === \App\Models\WorkOrder::SOURCE_BILLING)
                        <i class="fas fa-file-invoice-dollar text-muted me-1"></i>
                        Billing <a href="{{ route('billings.show', $source) }}">{{ $source->billing_number }}</a>
                        — ₱{{ number_format($source->total_amount_due, 2) }} due,
                        ₱{{ number_format($source->balance, 2) }} outstanding.
                        @if(!$order->isTerminal())
                            <div class="small text-muted mt-1">
                                Verifying this job updates that billing's disconnection status.
                            </div>
                        @endif
                    @elseif($order->source_type === \App\Models\WorkOrder::SOURCE_APPLICATION)
                        <i class="fas fa-file-alt text-muted me-1"></i>
                        New connection application
                        <a href="{{ route('applications.show', $source) }}">{{ $source->reference_number }}</a>
                        for {{ $source->full_name }}.
                        @if(!$order->isTerminal())
                            <div class="small text-muted mt-1">
                                Verifying this job completes the application's installation step and
                                makes the connection active.
                            </div>
                        @endif
                    @endif
                </div>
            </div>
            @endif

            @if($order->notes || $order->completion_notes)
            <div class="card mb-3">
                <div class="card-header"><strong>Notes</strong></div>
                <div class="card-body">
                    @if($order->notes)
                        <div class="mb-3">
                            <div class="small text-muted text-uppercase">From the office</div>
                            {{ $order->notes }}
                        </div>
                    @endif
                    @if($order->completion_notes)
                        <div>
                            <div class="small text-muted text-uppercase">From the field</div>
                            {{ $order->completion_notes }}
                        </div>
                    @endif
                </div>
            </div>
            @endif

            @if($order->requiresFinalReading())
            <div class="card mb-3">
                <div class="card-header"><strong>Final meter reading</strong></div>
                <div class="card-body">
                    @if($order->meterReading)
                        <div class="row">
                            <div class="col-md-6">
                                <div class="small text-muted text-uppercase">Reading</div>
                                <div class="h4">{{ rtrim(rtrim(number_format($order->meterReading->reading_value, 2), '0'), '.') }}</div>
                                <div class="small text-muted">
                                    Taken {{ $order->meterReading->reading_date->format('M d, Y g:i A') }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="small text-muted text-uppercase">Reading status</div>
                                <div>
                                    @if($order->meterReading->status === 'draft')
                                        <span class="badge bg-warning text-dark">Draft — approved on verification</span>
                                    @elseif($order->meterReading->status === 'approved')
                                        <span class="badge bg-success">Approved</span>
                                    @else
                                        <span class="badge bg-secondary">{{ ucfirst($order->meterReading->status) }}</span>
                                    @endif
                                </div>
                                @if($closingBilling)
                                    <div class="mt-2">
                                        <div class="small text-muted text-uppercase">Closing bill</div>
                                        <a href="{{ route('billings.show', $closingBilling) }}">
                                            {{ $closingBilling->billing_number }}
                                        </a>
                                        — ₱{{ number_format($closingBilling->total_amount_due, 2) }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    @else
                        <p class="text-muted mb-0">
                            Not recorded yet. The meter is read before the water goes off — that reading is the
                            last consumption this customer can be billed for, and the job cannot be completed
                            without it.
                            @if($readingFloor !== null)
                                <br>Last approved reading:
                                <strong>{{ rtrim(rtrim(number_format($readingFloor, 2), '0'), '.') }}</strong>.
                            @endif
                        </p>
                    @endif
                </div>
            </div>
            @endif
        </div>

        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-header"><strong>Actions</strong></div>
                <div class="card-body d-grid gap-2">
                    @forelse($actions as $action)
                        @if($action === 'accept')
                            <form method="POST" action="{{ route('work-orders.accept', $order) }}">
                                @csrf
                                <button class="btn btn-primary w-100"><i class="fas fa-hand-paper"></i> Accept this job</button>
                            </form>
                        @elseif($action === 'start')
                            <form method="POST" action="{{ route('work-orders.start', $order) }}">
                                @csrf
                                <button class="btn btn-primary w-100"><i class="fas fa-play"></i> Start work</button>
                            </form>
                        @elseif($action === 'complete')
                            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#completeModal">
                                <i class="fas fa-check"></i> Mark completed
                            </button>
                        @elseif($action === 'verify')
                            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#verifyModal">
                                <i class="fas fa-clipboard-check"></i> Verify &amp; close
                            </button>
                        @elseif($action === 'reject')
                            <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#rejectModal">
                                <i class="fas fa-undo"></i> Send back
                            </button>
                        @elseif($action === 'assign')
                            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#assignModal">
                                <i class="fas fa-user-tag"></i> Assign / reassign
                            </button>
                        @elseif($action === 'cancel')
                            <button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#cancelModal">
                                <i class="fas fa-ban"></i> Cancel job
                            </button>
                        @endif
                    @empty
                        <p class="text-muted mb-0 small">
                            @if($order->isTerminal())
                                This job is closed. Nothing further to do.
                            @elseif($isOffice && $order->status === 'completed' && $order->completed_by === auth()->id())
                                You completed this job, so someone else has to verify it. That separation is the
                                whole point of the verification step.
                            @else
                                Nothing for you to do on this job right now.
                            @endif
                        </p>
                    @endforelse
                </div>
            </div>

            <div class="card">
                <div class="card-header"><strong>History</strong></div>
                <div class="card-body small">
                    <dl class="row mb-0">
                        <dt class="col-5 text-muted">Raised</dt>
                        <dd class="col-7">
                            {{ optional($order->requested_at ?? $order->created_at)->format('M d, Y g:i A') }}<br>
                            <span class="text-muted">by {{ $order->requestedBy?->name ?? '—' }}</span>
                        </dd>

                        <dt class="col-5 text-muted">Scheduled</dt>
                        <dd class="col-7">{{ $order->scheduled_date?->format('M d, Y') ?? '—' }}</dd>

                        <dt class="col-5 text-muted">Assigned to</dt>
                        <dd class="col-7">{{ $order->assignee?->name ?? 'Unassigned' }}</dd>

                        <dt class="col-5 text-muted">Accepted</dt>
                        <dd class="col-7">{{ $order->accepted_at?->format('M d, Y g:i A') ?? '—' }}</dd>

                        <dt class="col-5 text-muted">Started</dt>
                        <dd class="col-7">{{ $order->started_at?->format('M d, Y g:i A') ?? '—' }}</dd>

                        <dt class="col-5 text-muted">Completed</dt>
                        <dd class="col-7">
                            {{ $order->completed_at?->format('M d, Y g:i A') ?? '—' }}
                            @if($order->completedBy)<br><span class="text-muted">by {{ $order->completedBy->name }}</span>@endif
                        </dd>

                        <dt class="col-5 text-muted">Verified</dt>
                        <dd class="col-7">
                            {{ $order->verified_at?->format('M d, Y g:i A') ?? '—' }}
                            @if($order->verifiedBy)<br><span class="text-muted">by {{ $order->verifiedBy->name }}</span>@endif
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modals. Every one of these is re-parented to <body> by the script below;
     see the comment there for why. --}}

@if(in_array('complete', $actions))
<div class="modal fade" id="completeModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('work-orders.complete', $order) }}" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Mark {{ $order->order_number }} completed</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                @if($order->requiresFinalReading())
                    <div class="alert alert-warning small">
                        Read the meter <strong>before</strong> the water goes off. That reading is the last
                        consumption this customer can be billed for — once the water is off there is no way
                        back to it.
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Final meter reading <span class="text-danger">*</span></label>
                        <input type="number" step="0.01" min="0" name="final_reading_value" class="form-control" required>
                        @if($readingFloor !== null)
                            <div class="form-text">
                                Cannot be lower than the last approved reading of
                                {{ rtrim(rtrim(number_format($readingFloor, 2), '0'), '.') }}.
                            </div>
                        @endif
                    </div>
                    @if($order->client && !$order->client->meter_number)
                    <div class="mb-3">
                        <label class="form-label">Meter number</label>
                        <input type="text" name="meter_number" class="form-control">
                        <div class="form-text">This client has no meter number on file.</div>
                    </div>
                    @endif
                @endif
                <div class="mb-0">
                    <label class="form-label">What was done</label>
                    <textarea name="completion_notes" class="form-control" rows="3"
                              placeholder="e.g. Meter capped and sealed."></textarea>
                </div>
                <p class="text-muted small mt-3 mb-0">
                    This does not close the job — the office still has to check it.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-success">Mark completed</button>
            </div>
        </form>
    </div>
</div>
@endif

@if(in_array('verify', $actions))
<div class="modal fade" id="verifyModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('work-orders.verify', $order) }}" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Verify {{ $order->order_number }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>You are confirming the work was actually done. This closes the job and cannot be undone.</p>
                @if($order->type === 'disconnection')
                    <div class="alert alert-warning small">
                        This will approve the final reading, raise the closing bill from it, and mark
                        <strong>{{ $order->client?->name }}</strong> as disconnected.
                    </div>
                @elseif(in_array($order->type, ['reconnection', 'installation']) && $order->client?->status === 'disconnected')
                    <div class="alert alert-info small">
                        This will restore <strong>{{ $order->client?->name }}</strong> to active.
                    </div>
                @endif
                <label class="form-label">Notes (optional)</label>
                <textarea name="notes" class="form-control" rows="2" placeholder="e.g. Checked photo, meter sealed."></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-success">Verify &amp; close</button>
            </div>
        </form>
    </div>
</div>
@endif

@if(in_array('reject', $actions))
<div class="modal fade" id="rejectModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('work-orders.reject', $order) }}" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Send {{ $order->order_number }} back</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Reason <span class="text-danger">*</span></label>
                <textarea name="reason" class="form-control" rows="3" required
                          placeholder="e.g. Meter not actually sealed — photo shows valve open."></textarea>
                <div class="form-text">
                    Required. A job returned with no explanation gets done the same wrong way twice.
                </div>
                @if($order->meterReading && $order->meterReading->status === 'draft')
                    <div class="alert alert-warning small mt-3 mb-0">
                        The final reading recorded with this job will be thrown out — the meter is read again
                        when the work is redone.
                    </div>
                @endif
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-warning">Send back</button>
            </div>
        </form>
    </div>
</div>
@endif

@if(in_array('assign', $actions))
<div class="modal fade" id="assignModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('work-orders.assign', $order) }}" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Assign {{ $order->order_number }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Field worker</label>
                <select name="assigned_to_id" class="form-select">
                    <option value="">Unassigned — anyone can take it</option>
                    @foreach($workers as $worker)
                        <option value="{{ $worker->id }}" {{ $order->assigned_to === $worker->id ? 'selected' : '' }}>
                            {{ $worker->name }}
                        </option>
                    @endforeach
                </select>
                <div class="form-text">
                    Reassigning puts the job back to requested — the new person has to accept it before they own it.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
</div>
@endif

@if(in_array('cancel', $actions))
<div class="modal fade" id="cancelModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('work-orders.cancel', $order) }}" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Cancel {{ $order->order_number }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Calling the job off. This is final — it cannot be reopened.</p>
                <label class="form-label">Reason (optional)</label>
                <textarea name="reason" class="form-control" rows="2" placeholder="e.g. Raised against the wrong meter."></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keep it open</button>
                <button type="submit" class="btn btn-danger">Cancel job</button>
            </div>
        </form>
    </div>
</div>
@endif
@endsection

@section('scripts')
<script>
    // The Angle template makes .wrapper (.modal-open .wrapper { z-index: 0 })
    // and .section-container (z-index: 111) stacking contexts, and these modals
    // are declared inside the content section, inside both. Bootstrap appends
    // the backdrop straight to <body>, so from there it paints over the whole
    // wrapper - the dark overlay covers the page and the dialog sits behind it,
    // unclickable. Re-parenting each modal to <body> puts it back above the
    // backdrop. Same fix as meter-readings/show and components/void-billing-modal.
    // (Careful with Blade directive names in these comments: Blade compiles
    // them even inside a script block.)
    document.addEventListener('DOMContentLoaded', function () {
        ['completeModal', 'verifyModal', 'rejectModal', 'assignModal', 'cancelModal'].forEach(function (id) {
            var el = document.getElementById(id);
            if (el && el.parentNode !== document.body) {
                document.body.appendChild(el);
            }
        });
    });
</script>
@endsection