@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">Phonebook</h4>
        <div class="text-secondary small mt-1">Internal &amp; external contacts. Lookup CallerID names on inbound calls.</div>
    </div>
    <div class="mt-2 mt-md-0 d-flex gap-2 flex-wrap">
        <a href="{{ route('phonebooks.manage') }}" class="btn btn-outline-secondary btn-sm">
            <i data-feather="folder" class="icon-sm"></i> Manage Phonebooks
        </a>
        <a href="{{ route('phonebook.recent') }}" class="btn btn-outline-secondary btn-sm">
            <i data-feather="phone-incoming" class="icon-sm"></i> Recent Calls
        </a>
        <a href="{{ route('phonebook.export', request()->only(['q','kind','label','blocked','favorite'])) }}" class="btn btn-outline-secondary btn-sm">
            <i data-feather="download" class="icon-sm"></i> Export CSV
        </a>
        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#importModal">
            <i data-feather="upload" class="icon-sm"></i> Import CSV
        </button>
        <a href="{{ route('phonebook.create') }}" class="btn btn-primary btn-sm">
            <i data-feather="plus" class="icon-sm"></i> Add Contact
        </a>
    </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

<div class="card mb-3">
    <div class="card-body">
        <form method="GET" action="{{ route('phonebook.index') }}" class="row g-2 align-items-end">
            <div class="col-md-4">
                <label class="form-label small">Search</label>
                <input type="text" name="q" value="{{ $q }}" class="form-control" placeholder="Name, number, company, email, label, tag">
            </div>
            <div class="col-md-2">
                <label class="form-label small">Phonebook</label>
                <select name="phonebook" class="form-select">
                    <option value="">All Phonebooks</option>
                    @foreach($phonebooks as $pb)
                        <option value="{{ $pb->id }}" @selected($phonebookId == $pb->id)>{{ $pb->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small">Type</label>
                <select name="kind" class="form-select">
                    <option value="">All</option>
                    @foreach($kinds as $k => $kn)
                        <option value="{{ $k }}" @selected($kind === $k)>{{ $kn }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small">Label</label>
                <select name="label" class="form-select">
                    <option value="">All</option>
                    @foreach($labels as $l)
                        <option value="{{ $l }}" @selected($label === $l)>{{ $l }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <div class="form-check mt-4">
                    <input class="form-check-input" type="checkbox" name="favorite" value="1" id="fav" @checked($favorite)>
                    <label class="form-check-label" for="fav">Favorites</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="blocked" value="1" id="blk" @checked($blocked)>
                    <label class="form-check-label" for="blk">Blocked only</label>
                </div>
            </div>
            <div class="col-md-2 d-flex gap-2">
                <button type="submit" class="btn btn-primary w-100">Filter</button>
                <a href="{{ route('phonebook.index') }}" class="btn btn-outline-secondary">Reset</a>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        @if ($contacts->isEmpty())
            <div class="text-center py-5 text-secondary">
                <p class="mb-3">No contacts match your filters.</p>
                <a href="{{ route('phonebook.create') }}" class="btn btn-primary btn-sm">Add a contact</a>
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Number</th>
                            <th>Phonebook</th>
                            <th>Type</th>
                            <th>Label</th>
                            <th>Company</th>
                            <th class="text-center">Calls</th>
                            <th>Last Call</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($contacts as $c)
                            <tr class="{{ $c->is_blocked ? 'table-danger' : '' }}">
                                <td>
                                    @if($c->favorite)
                                        <i data-feather="star" class="icon-sm text-warning"></i>
                                    @endif
                                    @if($c->is_blocked)
                                        <i data-feather="slash" class="icon-sm text-danger" title="Blocked"></i>
                                    @endif
                                </td>
                                <td class="fw-semibold">{{ $c->display_name }}</td>
                                <td>
                                    <code>{{ $c->number_raw }}</code>
                                    @if($c->number_e164 && $c->number_e164 !== $c->number_raw)
                                        <br><small class="text-secondary">{{ $c->number_e164 }}</small>
                                    @endif
                                </td>
                                <td>
                                    @php $pbName = $phonebooks->firstWhere('id', $c->phonebook_id); @endphp
                                    @if($pbName)
                                        <span class="badge" style="background:{{ $pbName->color }}22;color:{{ $pbName->color }};border:1px solid {{ $pbName->color }}44;font-size:.72rem;font-weight:600;">
                                            <span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:{{ $pbName->color }};margin-right:4px;"></span>
                                            {{ $pbName->name }}
                                        </span>
                                    @else
                                        <span class="text-secondary" style="font-size:.78rem;">—</span>
                                    @endif
                                </td>
                                <td>
                                    @php $kindClass = match($c->kind ?? 'external') { 'internal' => 'bg-info', 'customer' => 'bg-success', 'vendor' => 'bg-warning text-dark', 'other' => 'bg-secondary', default => 'bg-primary' }; @endphp
                                    <span class="badge {{ $kindClass }}">{{ \App\Models\PhonebookContact::KINDS[$c->kind] ?? ucfirst($c->kind ?? 'external') }}</span>
                                </td>
                                <td>
                                    @if($c->label)
                                        <span class="badge bg-dark">{{ $c->label }}</span>
                                    @endif
                                </td>
                                <td>{{ $c->company }}</td>
                                <td class="text-center">{{ $c->call_count ?: '—' }}</td>
                                <td><small class="text-secondary">{{ $c->last_call_at?->diffForHumans() ?? '—' }}</small></td>
                                <td class="text-end text-nowrap">
                                    <a href="{{ route('phonebook.edit', $c->id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                                    <form action="{{ route('phonebook.toggle-block', $c->id) }}" method="POST" class="d-inline">
                                        @csrf
                                        <button type="submit" class="btn btn-sm btn-outline-{{ $c->is_blocked ? 'success' : 'warning' }}">
                                            {{ $c->is_blocked ? 'Unblock' : 'Block' }}
                                        </button>
                                    </form>
                                    <form action="{{ route('phonebook.destroy', $c->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete {{ $c->display_name }}?');">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="mt-3">{{ $contacts->links() }}</div>
        @endif
    </div>
</div>

{{-- Import CSV modal --}}
<div class="modal fade" id="importModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('phonebook.import') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Import Phonebook (CSV)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="small text-secondary">
                        Only a <strong>name</strong> and a <strong>number</strong> column are required. Recognised name headers include
                        <code>full_name</code>, <code>name</code>, <code>display_name</code>; number headers include
                        <code>contact_mobileNumber</code>, <code>mobile</code>, <code>number</code>.
                        Optional: <code>company, email, label, tags, notes</code>. Numbers are auto-normalised to E.164 (ZA).
                    </p>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Import into phonebook</label>
                        <select name="phonebook_id" class="form-select">
                            <option value="">— Unassigned (no phonebook) —</option>
                            @foreach($phonebooks as $pb)
                                <option value="{{ $pb->id }}">{{ $pb->name }}</option>
                            @endforeach
                        </select>
                        <div class="form-text">Choose which phonebook these contacts belong to. Leave unassigned to import without a phonebook.</div>
                    </div>
                    <div class="mb-3">
                        <input type="file" name="csv" accept=".csv,text/csv" required class="form-control">
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="mode" value="upsert" id="modeUpsert" checked>
                        <label class="form-check-label" for="modeUpsert">Upsert (update if the number already exists)</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="mode" value="insert-only" id="modeInsert">
                        <label class="form-check-label" for="modeInsert">Insert only (skip existing)</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Import</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection