@extends('admin.master_layout')

@section('title')
<title>{{__('admin.Subscribers')}}</title>
@endsection

@push('css')
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
@endpush

@section('admin-content')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>{{__('admin.Subscribers')}}</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="{{ route('admin.dashboard') }}">{{__('admin.Dashboard')}}</a></div>
                <div class="breadcrumb-item">{{__('admin.Subscribers')}}</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row mt-4">
                <div class="col">
                    <div class="card">
                        <div class="card-header">
                            <h1>{{__('admin.Send Email to All Subscriber')}}</h1>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('admin.each-subscriber-email') }}" method="POST">
                                @csrf
                                <div class="form-group">
                                    <label>{{__('Email Template')}}</label>
                                    <select name="template" id="template" class="form-control">
                                        <option value="">{{__('Select Template')}}</option>
                                        @foreach($emailTemplates as $template)
                                            <option value="{{ $template->id }}">{{ $template->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>{{__('admin.Subject')}}</label>
                                    <input type="text" name="subject" id="subject" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>{{__('admin.Message')}}</label>
                                    <textarea name="message" id="message" class="editor"></textarea>
                                </div>
                                <button class="btn btn-primary">{{__('admin.Send Email')}}</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Subscribers List -->
            <div class="row mt-4">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <form action="{{ route('admin.send-bulk-subscriber-email') }}" method="POST" id="bulkEmailForm">
                                @csrf
                                <div class="mb-3">
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#bulkEmailModal">
                                        {{__('Send Email to Selected')}}
                                    </button>
                                    <button type="button" class="btn btn-secondary" id="selectAll">{{__('Select All')}}</button>
                                    <button type="button" class="btn btn-secondary" id="deselectAll">{{__('Deselect All')}}</button>
                                </div>
                                <table class="table table-striped" id="dataTable">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" id="checkAll"></th>
                                            <th>{{__('admin.SN')}}</th>
                                            <th>{{__('admin.Email')}}</th>
                                            <th>{{__('admin.Verified')}}</th>
                                            <th>{{__('admin.Action')}}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($subscribers as $index => $subscriber)
                                            <tr>
                                                <td><input type="checkbox" name="subscribers[]" value="{{ $subscriber->id }}" class="subscriber-checkbox"></td>
                                                <td>{{ ++$index }}</td>
                                                <td>{{ $subscriber->email }}</td>
                                                <td>
                                                    @if($subscriber->is_verified)
                                                        <span class="badge badge-success">{{__('admin.Yes')}}</span>
                                                    @else
                                                        <span class="badge badge-danger">{{__('admin.No')}}</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href="javascript:;" data-toggle="modal" data-target="#deleteModal" class="btn btn-danger btn-sm" onclick="deleteData({{ $subscriber->id }})"><i class="fas fa-trash"></i></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- Bulk Email Modal -->
<div class="modal fade" id="bulkEmailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{__('Send Email to Selected Subscribers')}}</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>{{__('admin.Email Template')}}</label>
                    <select id="bulk_template" class="form-control template-select">
                        <option value="">{{__('Select Template')}}</option>
                        @foreach($emailTemplates as $template)
                            <option value="{{ $template->id }}">{{ $template->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>{{__('admin.Subject')}}</label>
                    <input type="text" id="bulk_subject" class="form-control">
                </div>
                <div class="form-group">
                    <label>{{__('admin.Message')}}</label>
                    <textarea id="bulk_message" class="editor"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">{{__('admin.Close')}}</button>
                <button class="btn btn-primary" id="sendBulkEmail">{{__('admin.Send Email')}}</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
$(document).ready(function() {
    // Initialize CKEditor for all textareas
    $('.editor').each(function() {
        ClassicEditor.create(this).then(editor => {
            $(this).data('editor', editor);
        }).catch(error => console.error(error));
    });

    // Function to update CKEditor content
    function updateEditorContent(selector, content) {
        let editorInstance = $(selector).data('editor');
        if (editorInstance) {
            editorInstance.setData(content);
        }
    }

    // Handle template selection for main form
    $('#template').on('change', function() {
        var templateId = $(this).val();
        if (templateId) {
            $.ajax({
                url: "{{ route('admin.get-email-template') }}",
                type: "GET",
                data: { id: templateId },
                success: function(response) {
                    $('#subject').val(response.subject);
                    updateEditorContent('#message', response.description);
                },
                error: function() {
                    toastr.error('Error loading template');
                }
            });
        } else {
            $('#subject').val('');
            updateEditorContent('#message', '');
        }
    });

    // Handle template selection for modals
    $('.template-select').on('change', function() {
        var templateId = $(this).val();
        var modalBody = $(this).closest('.modal-body');
        
        if (templateId) {
            $.ajax({
                url: "{{ route('admin.get-email-template') }}",
                type: "GET",
                data: { id: templateId },
                success: function(response) {
                    modalBody.find('.modal-subject').val(response.subject);
                    updateEditorContent(modalBody.find('.editor'), response.description);
                },
                error: function() {
                    toastr.error('Error loading template');
                }
            });
        } else {
            modalBody.find('.modal-subject').val('');
            updateEditorContent(modalBody.find('.editor'), '');
        }
    });
    $('#checkAll').change(function() {
        $('.subscriber-checkbox').prop('checked', $(this).is(':checked'));
    });

    $('#selectAll').click(() => $('.subscriber-checkbox').prop('checked', true));
    $('#deselectAll').click(() => $('.subscriber-checkbox').prop('checked', false));

    $('#sendBulkEmail').click(() => $('#bulkEmailForm').submit());
});
</script>
@endpush