@extends('layouts.app')
@section('title', 'E-blast')

@push('css')
@endpush

@section('content')
    <x-content-body>

        <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Add E-Blast</h4>
                    </div>
                    <div class="card-body">
                        <div class="basic-form">
                            <form id="create-e-blast-form">
                                <div class="row">
                                    <div class="mb-3 col-md-6">
                                        <label class="form-label"> Name<span class="text-danger"> *
                                            </span></label>
                                        <input type="text" class="form-control form-control-sm" name="name">
                                    </div>


                                    <div class="mb-3 col-md-6">
                                        <label class="form-label"> Drop Template</label>
                                        <select class="multi-select form-control form-control-sm" name="dropTemplate"
                                            id="dropTemplate">
                                            <option selected disabled> Select Template</option>
                                            <option>Template 1</option>
                                            <option>Template 2</option>
                                            <option>Template 3</option>
                                            <option>Template 4</option>
                                            <option>Template 5</option>
                                            <option>Template 6</option>
                                        </select>
                                    </div>
                                    <div class="mb-3 col-md-6">
                                        <label class="form-label"> From</label>
                                        <select class="multi-select form-control form-control-sm" name="from"
                                            id="from">
                                            <option selected disabled> Select From</option>
                                            <option>User Assigned Agent when assigned </option>

                                        </select>
                                    </div>


                                    <div class="mb-3 col-md-6">
                                        <label class="form-label"> Subject<span class="text-danger"> *
                                            </span></label>
                                        <input type="text" class="form-control form-control-sm" name="subject">
                                    </div>
                                    <div class="mb-3 col-md-6">
                                        <label class="form-label"> Schedular Delivery Date<span class="text-danger"> *
                                            </span></label>
                                        <input type="date" class="form-control form-control-sm" placeholder=""
                                            id="schedular_delivery_date" name="schedular_delivery_date">
                                    </div>
                                    <div class="mb-3 col-md-12">
                                        <label class="form-label"> Description<span class="text-danger"> *
                                            </span></label>
                                        <div id="ckeditor" name="description"></div>
                                    </div>
                                </div>


                                <div class="mt-4 text-end">
                                    <button type="submit" class="btn btn-primary">Schedule </button>
                                    <button type="submit" class="btn btn-primary">Send</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.includes.modals.marketing.social-media.add-modal')
        @include('layouts.includes.modals.marketing.social-media.edit-modal')
    </x-content-body>
@endsection

@push('js')
    <script>
        const SocialMediaStoreRoute = @json(route('marketing.social-media.store'));
    </script>
    <script src="{{ asset('assets/js/custom/marketing/social-media.js') }}"></script>
@endpush