@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">Automatic Calling — Do Not Call List</h4>
        <div class="text-secondary small mt-1">Numbers here are never dialled by any campaign.</div>
    </div>
</div>

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

<div class="row g-3">
    {{-- Add form --}}
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header fw-semibold">Add a Number</div>
            <div class="card-body">
                <form method="POST" action="{{ route('dialer.dnc.store') }}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Telephone Number</label>
                        <input type="text" name="phone" class="form-control" placeholder="082 498 9396" required>
                        <div class="form-text">Any format is accepted; it is stored in international form.</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Customer Name (optional)</label>
                        <input type="text" name="customer_name" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Reason (optional)</label>
                        <input type="text" name="reason" class="form-control" placeholder="Customer requested no more calls">
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Add to Do Not Call List</button>
                </form>
            </div>
        </div>
    </div>

    {{-- List --}}
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
                <span>Blocked Numbers</span>
                <span class="text-muted small">{{ $entries->total() }} total</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0 align-middle">
                        <thead>
                            <tr>
                                <th>Number</th>
                                <th>Customer</th>
                                <th>Reason</th>
                                <th>Added</th>
                                <th>Status</th>
                                @if($canRemove)<th class="text-end">Action</th>@endif
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($entries as $entry)
                            <tr>
                                <td class="fw-semibold">{{ $entry->phone_e164 }}</td>
                                <td>{{ $entry->customer_name ?: '—' }}</td>
                                <td class="small text-muted">{{ $entry->reason ?: '—' }}</td>
                                <td class="small">{{ optional($entry->added_at)->format('Y-m-d H:i') ?: '—' }}</td>
                                <td>
                                    @if($entry->active)
                                        <span class="badge bg-danger-subtle text-danger">Active</span>
                                    @else
                                        <span class="badge bg-secondary-subtle text-secondary">Removed</span>
                                    @endif
                                </td>
                                @if($canRemove)
                                <td class="text-end">
                                    @if($entry->active)
                                    <form method="POST" action="{{ route('dialer.dnc.destroy', $entry->id) }}"
                                          onsubmit="return confirmRemove(this);" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <input type="hidden" name="reason" value="">
                                        <button type="submit" class="btn btn-sm btn-outline-danger">Remove</button>
                                    </form>
                                    @endif
                                </td>
                                @endif
                            </tr>
                            @empty
                            <tr>
                                <td colspan="{{ $canRemove ? 6 : 5 }}" class="text-center text-muted py-4">
                                    No numbers on the Do Not Call list yet.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {{ $entries->links() }}
    </div>
</div>

@push('scripts')
<script>
function confirmRemove(form) {
    const reason = window.prompt('Removing a number requires a reason. Please enter it:');
    if (reason === null || reason.trim() === '') {
        return false;
    }
    form.querySelector('input[name="reason"]').value = reason.trim();
    return true;
}
</script>
@endpush
@endsection