@extends('layouts.admin')

@section('title', 'Newsletters')

@section('content')
<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Newsletters</li>
        </ol>
    </nav>   

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1>Newsletters</h1>

        @if (session('status'))
        <div class="alert alert-success alert-dismissable fade show" role="alert">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            {{ session('status') }}
        </div>
        @endif

        <div>
            <form action="{{ route('admin.newsletters.export') }}" method="GET" class="d-inline-block">
                @csrf
                <button type="submit" class="btn btn-success">Export to CSV</button>
            </form>
        </div>
    </div>

    <form action="{{ route('admin.newsletters.index') }}" method="GET" class="mb-3">
        <div class="input-group">
            <input type="text" class="form-control" name="search" placeholder="Search by Email Address" value="{{ request('search') }}">
            <button class="btn btn-primary" type="submit">Search</button>
        </div>
    </form>


    <table class="table table-striped">
        <thead>
            <tr>
                <th><input type="checkbox" id="select-all"></th>
                <th style="width:60px;">ID&nbsp;<a href="{{ route('admin.newsletters.index', ['sort' => 'id', 'order' => $order === 'asc' ? 'desc' : 'asc']) }}" class="text-decoration-none"><i class="fa fa-sort{{ $sort === 'id' ? ($order === 'asc' ? '-up' : '-down') : '' }}"></i></a></th>
                <th>Email Address&nbsp;<a href="{{ route('admin.newsletters.index', ['sort' => 'email_address', 'order' => $order === 'asc' ? 'desc' : 'asc']) }}" class="text-decoration-none"><i class="fa fa-sort{{ $sort === 'email_address' ? ($order === 'asc' ? '-up' : '-down') : '' }}"></i></a></th>
                <th>Date&nbsp;<a href="{{ route('admin.newsletters.index', ['sort' => 'created_at', 'order' => $order === 'asc' ? 'desc' : 'asc']) }}" class="text-decoration-none"><i class="fa fa-sort{{ $sort === 'created_at' ? ($order === 'asc' ? '-up' : '-down') : '' }}"></i></a></th>
                <th style="width:120px;">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($newsletters as $newsletter)
            <tr>
                <td><input type="checkbox" name="newsletter_ids[]" value="{{ $newsletter->id }}"></td>
                <td>{{ $newsletter->id }}</td>
                <td>{{ $newsletter->email_address }}</td>
                <td>{{ $newsletter->created_at->format('Y-m-d') }}</td>
                <td>
                    <a href="{{ route('admin.newsletters.edit', $newsletter->id) }}" class="btn btn-warning btn-sm">Edit</a>

                    <!-- Delete Form -->
                    <form action="{{ route('admin.newsletters.destroy', $newsletter->id) }}" method="POST" class="d-inline-block" onsubmit="return confirm('Are you sure you want to delete this item?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    <!-- Pagination -->
    <div class="d-flex justify-content-between">
        <div>
            Showing {{ $newsletters->firstItem() }} to {{ $newsletters->lastItem() }} of {{ $newsletters->total() }} items
        </div>
        <div class="pagination-info">
            {{ $newsletters->appends(['search' => request('search'), 'sort' => $sort, 'order' => $order])->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>

<script>
    document.getElementById('select-all').addEventListener('click', function () {
        var checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
        checkboxes.forEach(checkbox => checkbox.checked = this.checked);
    });

    function submitDeleteSelectedForm() {
        const selectedCheckboxes = document.querySelectorAll('input[name="newsletter_ids[]"]:checked');
        const ids = Array.from(selectedCheckboxes).map(checkbox => checkbox.value);

        if (ids.length === 0) {
            alert('No newsletters selected!');
            return;
        }

        document.getElementById('selectedIds').value = JSON.stringify(ids);
        document.getElementById('deleteSelectedForm').submit();
    }
</script>
@endsection