@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">Manage Phonebooks</h4>
        <div class="text-secondary small mt-1">Create and manage phonebook groups. Each contact belongs to a phonebook for organized CNAM lookups.</div>
    </div>
    <div class="mt-2 mt-md-0">
        <a href="{{ route('phonebook.index') }}" class="btn btn-outline-secondary btn-sm">Back to Contacts</a>
    </div>
</div>

@if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</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-4">
    {{-- Existing phonebooks --}}
    <div class="col-12 col-lg-8">
        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th style="width:40px;"></th>
                                <th>Name</th>
                                <th>Description</th>
                                <th class="text-center">Contacts</th>
                                <th class="text-center">CNAM</th>
                                <th class="text-center">Webphone</th>
                                <th class="text-center">Enabled</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($phonebooks as $pb)
                            <tr>
                                <td>
                                    <span style="display:inline-block;width:14px;height:14px;border-radius:50%;background:{{ $pb->color }};"></span>
                                </td>
                                <td class="fw-semibold">{{ $pb->name }}</td>
                                <td class="text-secondary small">{{ $pb->description ?? '—' }}</td>
                                <td class="text-center">
                                    <a href="{{ route('phonebook.index', ['phonebook' => $pb->id]) }}" class="text-decoration-none">
                                        {{ $pb->contacts_count }}
                                    </a>
                                </td>
                                <td class="text-center">
                                    @if($pb->cnam_enabled)
                                        <span class="badge bg-info bg-opacity-10 text-info">Yes</span>
                                    @else
                                        <span class="badge bg-secondary bg-opacity-10 text-secondary">No</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($pb->show_in_webphone)
                                        <span class="badge bg-primary bg-opacity-10 text-primary">Yes</span>
                                    @else
                                        <span class="badge bg-secondary bg-opacity-10 text-secondary">No</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($pb->enabled)
                                        <span class="badge bg-success">Yes</span>
                                    @else
                                        <span class="badge bg-secondary">No</span>
                                    @endif
                                </td>
                                <td class="text-end text-nowrap">
                                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editPb{{ $pb->id }}">Edit</button>
                                    @if($pb->contacts_count > 0)
                                    <form action="{{ route('phonebooks.empty', $pb->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete ALL {{ $pb->contacts_count }} contacts from {{ $pb->name }}? The phonebook itself is kept. This cannot be undone.');">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-warning" title="Delete every contact in this phonebook (keeps the phonebook)">Delete contacts</button>
                                    </form>
                                    @endif
                                    <form action="{{ route('phonebooks.destroy', $pb->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete phonebook {{ $pb->name }}? Its {{ $pb->contacts_count }} contacts will become unassigned.');">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                                    </form>
                                </td>
                            </tr>

                            {{-- Edit modal for this phonebook --}}
                            <div class="modal fade" id="editPb{{ $pb->id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <form method="POST" action="{{ route('phonebooks.update', $pb->id) }}">
                                            @csrf @method('PUT')
                                            <div class="modal-header">
                                                <h5 class="modal-title">Edit Phonebook: {{ $pb->name }}</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row g-3">
                                                    <div class="col-8">
                                                        <label class="form-label">Name *</label>
                                                        <input type="text" name="name" class="form-control" value="{{ $pb->name }}" required>
                                                    </div>
                                                    <div class="col-4">
                                                        <label class="form-label">Color</label>
                                                        <input type="color" name="color" class="form-control form-control-color" value="{{ $pb->color }}">
                                                    </div>
                                                    <div class="col-12">
                                                        <label class="form-label">Description</label>
                                                        <input type="text" name="description" class="form-control" value="{{ $pb->description }}">
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox" name="cnam_enabled" value="1" id="editCnam{{ $pb->id }}" @checked($pb->cnam_enabled)>
                                                            <label class="form-check-label" for="editCnam{{ $pb->id }}">Include in CNAM lookups</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox" name="enabled" value="1" id="editEn{{ $pb->id }}" @checked($pb->enabled)>
                                                            <label class="form-check-label" for="editEn{{ $pb->id }}">Enabled</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox" name="show_in_webphone" value="1" id="editWebphone{{ $pb->id }}" @checked($pb->show_in_webphone)>
                                                            <label class="form-check-label" for="editWebphone{{ $pb->id }}">Show in webphone</label>
                                                        </div>
                                                        <small class="text-secondary">Technicians can search and dial these contacts from the webphone.</small>
                                                    </div>
                                                </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">Save</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <tr><td colspan="8" class="text-center text-secondary py-4">No phonebooks yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Create new phonebook --}}
    <div class="col-12 col-lg-4">
        <div class="card">
            <div class="card-header fw-semibold">Create Phonebook</div>
            <div class="card-body">
                <form method="POST" action="{{ route('phonebooks.store') }}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Name *</label>
                        <input type="text" name="name" class="form-control" required placeholder="e.g. VIP Clients">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <input type="text" name="description" class="form-control" placeholder="What this phonebook is for">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Color</label>
                        <input type="color" name="color" class="form-control form-control-color" value="#6366f1">
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="cnam_enabled" value="1" id="newCnam" checked>
                            <label class="form-check-label" for="newCnam">Include in CNAM lookups</label>
                        </div>
                        <small class="text-secondary">When enabled, this phonebook is searched during inbound Caller ID lookups.</small>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="show_in_webphone" value="1" id="newWebphone">
                            <label class="form-check-label" for="newWebphone">Show in webphone</label>
                        </div>
                        <small class="text-secondary">When enabled, this phonebook's contacts are searchable and dialable from the WebRTC webphone.</small>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Create Phonebook</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection