@extends('layouts.master')

@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class="container-xxl">
            <div class="d-flex flex-wrap flex-stack pb-7">
                <div class="d-flex flex-wrap align-items-center my-1">
                    <h3 class="fw-bold me-5 my-1">Send Mass<span class="text-muted"> Email</span>
                    </h3>
                </div>
            </div>
            <div class="card card-flush">
                <div class="card-body">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="kt_ecommerce_settings_edit" role="tabpanel">
                            <form class="form" action="{{ route('marketing.sendMassEmail') }}" method="POST" enctype="multipart/form-data">
                                @csrf                                
                                <input type="hidden" name="created_by" value="{{ Auth::id() }}">
                                <input type="hidden" name="type" value="Email">                                    
                                {{-- Template Name --}}
                                <div class="row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label for="name" class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">Template Name</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <select class="form-select form-select-solid mb-2" name="name" id="name">
                                            <option value="">Select Template</option>
                                            @foreach($email as $template)
                                                <option value="{{ $template->id }}" {{ old('name') == $template->name ? 'selected' : '' }}>
                                                    {{ $template->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>

                                {{-- Subject --}}
                                <div class="row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label for="subject" class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">Subject</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control form-control-solid mb-2" name="subject" id="subject"
                                            value="{{ old('subject') }}" placeholder="Subject">
                                        @error('subject') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                                
                                {{-- From Name --}}
                                <div class="row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label for="from_name" class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">From Name</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control form-control-solid mb-2" name="from_name" id="from_name"
                                            value="{{ old('from_name', $user->username) }}" placeholder="From Name" readonly>
                                        @error('from_name') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>

                                {{-- From email --}}
                                <div class="row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label for="from_name" class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">From Email</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control form-control-solid mb-2" name="from_email" id="from_email"
                                            value="{{ old('from_email', $user->email) }}" placeholder="From Email" readonly>
                                        @error('from_email') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>

                                {{-- Attachment --}}
                                <div class="row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label for="attachment" class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">Attachment</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="file" class="form-control form-control-solid mb-2" name="attachment" id="attachment"
                                            accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx">
                                            <input type="hidden" name="attachment_name" id="attachment_name" value="{{ old('attachment') }}">
                                        @error('attachment') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>

                                {{-- Body --}}
                                <div class="row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label for="body" class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">Body</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <textarea name="body" id="body" class="form-control" placeholder="Body">
                                            {{ old('body') }}
                                        </textarea>
                                        @error('body') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>

                                {{-- Buttons --}}
                                <div class="row py-5">
                                    <div class="col-md-9 offset-md-3">
                                        <div class="d-flex">
                                            <a href="{{ route('marketing.index') }}" class="btn btn-light me-2">Cancel</a>
                                            <button type="submit" class="btn btn-primary" onclick="showSpinner();">
                                                <span class="indicator-label">send</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>                          
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection()
@section('script')
<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace('body');
    function showSpinner() {
        var submitButton = document.getElementById('submit');
        submitButton.innerHTML = '<span class="spinner-border spinner-border-sm align-middle ms-2"></span>';
    }

    function showSpinnerCancelBtn() {
            var cancelButton = document.getElementById('cancel');
            cancelButton.innerHTML = '<span class="spinner-border spinner-border-sm align-middle ms-2"></span>';
        }

        // ajax call to fetch email templates details using jQuery
    $(document).ready(function() {
        $('#name').change(function() {
            var templateName = $(this).val();
            if (templateName) {
               $.ajax({
                    url: "{{ route('marketing.getEmailTemplateDetails') }}",
                    type: "GET",
                    data: {
                        id: templateName
                    },
                    success: function(response) {
                        console.log(response.data);
                        data = response.data;
                        // return false;
                        if (response.success) {
                            $('#subject').val(data.subject);
                            var attachment_name = data.attachment_name;
                            var attachment = data.attachment;
                            if (attachment_name) {
                                $('#attachment_name').val(attachment_name);
                                $('#attachment').after('<span class="text-muted">Current Attachment: <a href='+attachment+' target="_blank">' + attachment_name + '</a></span>');
                            }
                            CKEDITOR.instances['body'].setData(data.body);
                        } else {
                            alert('Error fetching template details.');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                        alert('An error occurred while fetching the template details.');
                    }
                });
            } else {
                $('#subject').val('');
                $('#from_name').val('');
                $('#from_email').val('');
                CKEDITOR.instances['body'].setData('');
            }
        });
    });


</script>
@endsection