@extends('layouts.app')

@section('content')
<div class="container">
    <h2>Manage Phonebook & Contacts</h2>

    <div class="row">
        <!-- Phonebooks List (Left Column) -->
        <div class="col-md-4">
            <div class="card p-3 mb-3">
                <h5>Create Phonebook</h5>
                <form action="{{ route('phonebooks.store') }}" method="POST">
                    @csrf
                    <input type="text" name="name" class="form-control mb-2" placeholder="Enter Phonebook Name" required>
                    <button type="submit" class="btn btn-success">Create</button>
                </form>
            </div>

            <ul class="list-group">
                @foreach($phonebooks as $phonebook)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="javascript:void(0);" class="phonebook-item" data-id="{{ $phonebook->id }}">
                            {{ $phonebook->name }}
                        </a>
                        <form action="{{ route('phonebooks.destroy', $phonebook) }}" method="POST">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Delete this phonebook?')">X</button>
                        </form>
                    </li>
                @endforeach
            </ul>
        </div>

        <!-- Contacts Section (Right Column) -->
        <div class="col-md-8">
            <div id="contacts-section">
                <div class="text-center text-muted">
                    <p>Select a phonebook to view contacts</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".phonebook-item").forEach(item => {
        item.addEventListener("click", function () {
            let phonebookId = this.getAttribute("data-id");

            fetch(`/phonebooks/${phonebookId}/contacts`)
                .then(response => response.text())
                .then(html => {
                    document.getElementById("contacts-section").innerHTML = html;
                });
        });
    });
});
</script>
@endsection