@extends('layouts.app')
@section('content')
    <div class="page-title"><i class="fas fa-plug me-2"></i>Disconnected Clients</div>
    <p class="page-subtitle">Accounts currently cut off {{ $isSuperAdmin && !$selectedCompanyId ? 'across all companies' : 'for ' . ($company->name ?? 'your company') }}</p>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('info'))
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            {{ session('info') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Without these, a refused reconnection redirected back silently and the
         button looked broken. --}}
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <i class="fas fa-list me-2"></i>Disconnected
                <span class="badge bg-danger ms-2">{{ $clients->total() }}</span>
            </div>
            <div class="btn-group" role="group">
                <a href="{{ route('clients.index') }}" class="btn btn-sm btn-secondary">
                    <i class="fas fa-users me-1"></i>All Clients
                </a>
                <a href="{{ route('disconnections.index') }}" class="btn btn-sm btn-dark">
                    <i class="fas fa-ban me-1"></i>Disconnection Queue
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                @if($isSuperAdmin)
                    <div class="col-md-4">
                        <select name="company_id" class="form-select" onchange="window.location.href='{{ route('clients.disconnected') }}?company_id=' + (this.value ? this.value : '')">
                            <option value="">All Companies</option>
                            @foreach($allCompanies as $comp)
                                <option value="{{ $comp->id }}" @selected($selectedCompanyId === $comp->id)>{{ $comp->name }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
                <div class="{{ $isSuperAdmin ? 'col-md-5' : 'col-md-6' }}">
                    <form method="GET" action="{{ route('clients.disconnected') }}" class="input-group">
                        @if($isSuperAdmin && $selectedCompanyId)
                            <input type="hidden" name="company_id" value="{{ $selectedCompanyId }}">
                        @endif
                        <input type="text" name="search" class="form-control" placeholder="Search by name, account # or meter #..." value="{{ request('search') }}">
                        <button class="btn btn-primary" type="submit"><i class="fas fa-search"></i></button>
                        @if(request('search'))
                            <a href="{{ route('clients.disconnected') }}" class="btn btn-outline-secondary" title="Clear"><i class="fas fa-times"></i></a>
                        @endif
                    </form>
                </div>
            </div>

            @if($clients->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead>
                            <tr>
                                <th>Name</th>
                                @if($isSuperAdmin)
                                    <th>Company</th>
                                @endif
                                <th>Account #</th>
                                <th>Meter #</th>
                                <th>Address</th>
                                <th>Disconnected</th>
                                <th class="text-end">Outstanding</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($clients as $client)
                                @php
                                    $outstanding = $client->billings()->outstanding()->sum('balance');
                                @endphp
                                <tr>
                                    <td><strong>{{ $client->name }}</strong></td>
                                    @if($isSuperAdmin)
                                        <td>{{ $client->company->name ?? 'N/A' }}</td>
                                    @endif
                                    <td><code>{{ $client->account_number }}</code></td>
                                    <td>{{ $client->meter_number ?? 'N/A' }}</td>
                                    <td>{{ $client->address ?? 'N/A' }}</td>
                                    <td>
                                        @if($client->disconnected_at)
                                            {{ $client->disconnected_at->format('M d, Y') }}
                                            <br><small class="text-muted">{{ $client->disconnected_at->diffForHumans() }}</small>
                                        @else
                                            <span class="text-muted">Not recorded</span>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        @if($outstanding > 0)
                                            <span class="badge bg-danger">₱{{ number_format($outstanding, 2) }}</span>
                                        @else
                                            <span class="badge bg-success">Settled</span>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{ route('clients.show', $client) }}" class="btn btn-sm btn-info" title="View">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('disconnections.client-history', $client) }}" class="btn btn-sm btn-secondary" title="Disconnection history">
                                            <i class="fas fa-history"></i>
                                        </a>
                                        @if(Auth::user()->hasCompanyAdminAccess() || Auth::user()->isSuperAdmin())
                                            {{-- Reconnecting is a payment first: the fee is charged and
                                                 the account settled, and only then is the job raised.
                                                 The modal collects that payment. --}}
                                            @php($info = $reconnectionInfo[$client->id] ?? ['owed' => 0, 'fee' => 0, 'fee_charged' => true, 'total' => 0])
                                            <button type="button" class="btn btn-sm btn-success js-reconnect"
                                                    data-bs-toggle="modal" data-bs-target="#reconnectModal"
                                                    title="Charge the fee, take payment and raise the job"
                                                    data-client="{{ $client->name }}"
                                                    data-action="{{ route('disconnections.reconnect', $client) }}"
                                                    data-owed="{{ number_format($info['owed'], 2, '.', '') }}"
                                                    data-fee="{{ number_format($info['fee'], 2, '.', '') }}"
                                                    data-fee-charged="{{ $info['fee_charged'] ? '1' : '0' }}"
                                                    data-total="{{ number_format($info['total'], 2, '.', '') }}">
                                                <i class="fas fa-plug"></i> Reconnect
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <nav class="mt-4">
                    {{ $clients->links('pagination::bootstrap-5') }}
                </nav>
            @else
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    @if(request('search'))
                        No disconnected client matches "{{ request('search') }}".
                    @else
                        No clients are disconnected right now.
                    @endif
                </div>
            @endif
        </div>
    </div>

    {{-- Reconnection payment. Charging the fee and taking the money is the
         office's step; raising the job happens on submit, and the water only
         goes back on when a field worker completes that job and it is
         verified. --}}
    @if(Auth::user()->hasCompanyAdminAccess() || Auth::user()->isSuperAdmin())
    <div class="modal fade" id="reconnectModal" tabindex="-1">
        <div class="modal-dialog">
            <form method="POST" id="reconnectForm" class="modal-content">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Reconnect <span id="rcName"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="border rounded p-3 bg-light mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Outstanding balance</span>
                            <strong id="rcOwed"></strong>
                        </div>
                        <div class="d-flex justify-content-between" id="rcFeeRow">
                            <span>Reconnection fee <small class="text-muted" id="rcFeeNote"></small></span>
                            <strong id="rcFee"></strong>
                        </div>
                        <hr class="my-2">
                        <div class="d-flex justify-content-between">
                            <span class="fw-bold">Total to settle</span>
                            <span class="fw-bold text-danger" id="rcTotal"></span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Payment amount <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">₱</span>
                            <input type="number" step="0.01" min="0.01" name="amount" id="rcAmount" class="form-control" required>
                        </div>
                        <div class="form-text">
                            The account has to be settled in full — the reconnection fee included —
                            before the job can be raised.
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Payment method</label>
                        <select name="payment_method" class="form-select">
                            <option value="cash">Cash</option>
                            <option value="check">Check</option>
                            <option value="transfer">Bank Transfer</option>
                            <option value="online">Online Payment</option>
                            <option value="gcash">GCash</option>
                        </select>
                    </div>

                    <div class="mb-0">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" rows="2" class="form-control" placeholder="Optional"></textarea>
                    </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-success">
                        <i class="fas fa-plug me-1"></i> Take payment &amp; raise job
                    </button>
                </div>
            </form>
        </div>
    </div>
    @endif
@endsection

@section('scripts')
<script>
    // The Angle template makes .wrapper and .section-container stacking
    // contexts, and this modal is declared inside the content section. Bootstrap
    // appends its backdrop to <body>, so from in there the overlay paints over
    // the dialog and nothing is clickable. Re-parenting the modal to <body> puts
    // it back on top. Same fix as meter-readings/show and work-orders/show.
    // (Careful with Blade directive names in these comments: Blade compiles
    // them even inside a script block.)
    document.addEventListener('DOMContentLoaded', function () {
        var modalEl = document.getElementById('reconnectModal');
        if (!modalEl) { return; }
        if (modalEl.parentNode !== document.body) { document.body.appendChild(modalEl); }

        var peso = function (n) {
            return '\u20B1' + Number(n).toLocaleString('en-PH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        };

        // Bootstrap's data-bs-toggle opens the dialog; this only fills it in.
        document.querySelectorAll('.js-reconnect').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var owed = parseFloat(btn.dataset.owed || '0');
                var fee = parseFloat(btn.dataset.fee || '0');
                var feeCharged = btn.dataset.feeCharged === '1';
                var total = parseFloat(btn.dataset.total || '0');

                document.getElementById('reconnectForm').action = btn.dataset.action;
                document.getElementById('rcName').textContent = btn.dataset.client;
                document.getElementById('rcOwed').textContent = peso(owed);
                document.getElementById('rcTotal').textContent = peso(total);

                var feeRow = document.getElementById('rcFeeRow');
                if (fee > 0) {
                    feeRow.style.display = '';
                    document.getElementById('rcFee').textContent = peso(fee);
                    // A fee already charged is part of the outstanding balance,
                    // so showing it again would double-count it.
                    document.getElementById('rcFeeNote').textContent =
                        feeCharged ? '(already charged, included above)' : '(charged on submit)';
                } else {
                    feeRow.style.display = 'none';
                }

                document.getElementById('rcAmount').value = total > 0 ? total.toFixed(2) : '';
            });
        });
    });
</script>
@endsection