@push('title')
Add New List
@endpush

<div class="content-wrapper">
    <section class="content" x-data>
        <div class="container-fluid">
            <!-- Card for Search and New List Form -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Manage Email Lists</h3>
                </div>
                <div class="card-body">
                    <!-- Real-time Search -->
                    <div class="mb-3">
                        <input type="text" class="form-control form-control-sm " placeholder="Search lists..." wire:model.debounce.300ms="search" style="height: 30px; width: 200px;">
                    </div>

                    <!-- Form to Create or Update an Email List -->
                    <form wire:submit.prevent="{{ $editListId ? 'updateEmailList' : 'createEmailList' }}" class="form-inline">
                        <input type="text" class="form-control form-control-sm mr-2" id="listName" wire:model.lazy="listName" placeholder="List Name">

                        <input type="text" class="form-control form-control-sm mr-2" id="listGeo" wire:model.lazy="listGeo" placeholder="Geo">

                        <input type="text" class="form-control form-control-sm mr-2" id="listESP" wire:model.lazy="listESP" placeholder="ESP">

                        <button type="submit" class="btn btn-primary btn-sm">{{ $editListId ? 'Update' : 'Create' }} List</button>
                    </form>

                </div>
            </div>

            <!-- Display List of Email Lists -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Email Lists</h3>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Geo</th>
                                <th>ESP</th>
                                <th>Size</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($emailLists as $list)
                            <tr>
                                <td>{{ $list->name }}</td>
                                <td>{{ $list->geo }}</td>
                                <td>{{ $list->esp }}</td>
                                <td>{{ $list->size }}</td>
                                <td>
    <button wire:click="startEditing({{ $list->id }})" class="btn btn-sm btn-warning">Edit</button>
    <button wire:click="deleteList({{ $list->id }})" class="btn btn-sm btn-danger">Delete</button>
    <!-- New button to update list size -->
    <button wire:click="updateListSize({{ $list->id }})" class="btn btn-sm btn-info">Update Size</button>
</td>

                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <!-- Pagination -->
                <div class="card-footer clearfix">
                    {{ $emailLists->links() }}
                </div>
            </div>
        </div>
    </section>
</div>