modal blade

@extends('admin.layouts.app')

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="ic-datatable">
                {!! $dataTable->table([], true) !!}
            </div>
        </div>
    </div>

    <!-- Enrolled Students Email Modal -->
    <div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="emailModalLabel">Enrolled Student Email</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('enrolled-student.send-email') }}" class="form" method="POST">
                    @csrf
                    <input type="hidden" name="course_id" value="{{ $courseId }}">
                    <input type="hidden" name="student_id">
                    <div class="modal-body">
                        <div class="row">
                            @foreach ($templates as $template)
                                <div class="col-3 mb-2">
                                    <button type="button" class="btn btn-light" onclick="useTemplate({{ $loop->index }}, '#enrolledStudentEmailModal')">
                                        <span class="badge bg-light text-dark">{{ $template->name }}</span>
                                    </button>
                                </div>
                            @endforeach
                        </div>

                        <div class="select-types">
                            @include('admin.datatable.enrolled-students.partials.types', ['for' => 'email'])
                        </div>

                        <div class="form-group">
                            <label class="form-label">Subject</label>
                            <input name="subject" type="text" required class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Body</label>
                            <textarea name="body" class="form-control ic_summernote"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Enrolled Students SMS Modal -->
    <div class="modal fade" id="smsModal" tabindex="-1" aria-labelledby="smsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="smsModalLabel">Enrolled Student Email</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('enrolled-student.send-sms') }}" class="form" method="POST">
                    @csrf
                    <input type="hidden" name="course_id" value="{{ $courseId }}">
                    <input type="hidden" name="student_id">
                    <div class="modal-body">
                        <div class="select-types d-none">
                            @include('admin.datatable.enrolled-students.partials.types', ['for' => 'sms'])
                        </div>
                        <div class="form-group">
                            <label class="form-label">Body</label>
                            <textarea name="body" class="form-control norweo" rows="5"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Students Email Modal -->
    <div class="modal fade" id="studentEmailModal" tabindex="-1" aria-labelledby="studentEmailModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="studentEmailModalLabel">Send Email</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('enrolled-student.send-email') }}" class="form" method="POST">
                    @csrf
                    <input type="hidden" name="course_id" value="{{ $courseId }}">
                    <input type="hidden" name="student_id">
                    <div class="modal-body">
                        <div class="row">
                            @foreach ($templates as $template)
                                <div class="col-3 mb-2">
                                    <button type="button" class="btn btn-light" onclick="useTemplate({{ $loop->index }}, '#studentEmailModal')">
                                        <span class="badge bg-light text-dark">{{ $template->name }}</span>
                                    </button>
                                </div>
                            @endforeach
                        </div>
                        <div class="form-group">
                            <label class="form-label">Subject</label>
                            <input name="subject" type="text" required class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Body</label>
                            <textarea name="body" class="form-control ic_summernote"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Students SMS Modal -->
    <div class="modal fade" id="studentSMS" tabindex="-1" aria-labelledby="studentSMSLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="studentSMSLabel">Enrolled Student Email</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('enrolled-student.send-sms') }}" class="form" method="POST">
                    @csrf
                    <input type="hidden" name="course_id" value="{{ $courseId }}">
                    <input type="hidden" name="student_id">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form-label">Body</label>
                            <textarea name="body" class="form-control norweo" rows="5"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('style')
    @include('admin.layouts.partials.datatableCss')
@endpush

@push('script')
    @include('admin.layouts.partials.dataTablejs')

    <script>
        $(document).ready(function() {
            $('#emailModal .ic_summernote').summernote({
                height: 200,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['insert', ['link', 'picture']],
                    ['view', ['fullscreen', 'codeview', 'help']],
                ]
            });

            // Reset modal when hidden
            $('#emailModal, #smsModal').on('hidden.bs.modal', function () {
                $(this).find('input[name="student_id"]').val('');
                $(this).find('input[name="type"]').first().prop('checked', true);
                $(this).find('input[name="subject"]').val('');
                $(this).find('textarea[name="body"]').summernote
                    ? $(this).find('textarea[name="body"]').summernote('code', '')
                    : $(this).find('textarea[name="body"]').val('');
                $(this).find('.select-types').removeClass('d-none');
            });



            /* $('#enrolledStudentSMS').on('hidden.bs.modal', function(event) {
                $('#enrolledStudentSMS input[name="type"]').first().prop('checked', true);
                $('#enrolledStudentSMS textarea[name="body"]').val('');
            });

            $('#studentEmailModal').on('hidden.bs.modal', function(event) {
                $('#studentEmailModal input[name="type"]').first().prop('checked', true);
                fillEmailForm('#studentEmailModal');
                $('#studentEmailModal input[name="student_id"]').val('');
            });

            $('#studentSMS').on('hidden.bs.modal', function(event) {
                $('#studentSMS input[name="type"]').first().prop('checked', true);
                $('#studentSMS textarea[name="body"]').val('');
                $('#studentSMS input[name="student_id"]').val('');
            }); */
        });

        var template = null;
        var emailTemplates = @json($templates);

        function useTemplate(index) {
            template = emailTemplates[index];
            fillEmailForm(template.subject, template.body);
        }

        function fillEmailForm(subject = '', body = '') {
            $('#emailModal input[name="subject"]').val(subject);
            $('#emailModal textarea[name="body"]').summernote('code', body);
        }

        function setStudentId(id, selector) {
            $(`${selector} input[name="student_id"]`).val(id);
            $('.select-types').addClass('d-none');
        }
    </script>
@endpush