@extends('layouts.admin')


@section('style')
@endSection

@section('script')

    <script type="text/javascript" src="{{ mix('js/admin/view-blast.js') }}" defer></script>

    <script defer>

        $(() => {
            const endpoints = {
                voucher_series: @json($blast_groups),
                event_types:  @json($event_types),
                event_categories: @json($event_categories),
                ajax_get_notif_templates_list :  '{{ route('admin.notification.template.list') }}',
                ajax_get_filtered_targets : '{{ route('admin.ajax_get_filtered_targets') }}',
                ajax_get_blast_groups : '{{ route('admin.ajax_get_blast_groups') }}',
            }
            const config = @json(config('admin.create_blast.filter_config'));
            skaleBlastView.load('{{ $blast_id }}', config, endpoints);
        });
    </script>

@endSection

@section('content')

    <!-- Content Header (Page header) -->
    @php
        $page_title = ($blast_id ?? 'Blast') .' <small>Preview</small>';
    @endphp

    <!-- Main content -->
    <div class="content">
        <div class="container-fluid">
            <div class="row">

            <div class="col-md-12 d-none col-wa-info">
                <div class="card card-warning shadow">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-info mr-2"></i>
                            <span>The status of WhatsApp blast will get refresh after 15 minutes of Blast Schedule.</span>
                        </h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                        </div>
                      </div>
                </div>
            </div>

            <div class="col-md-3">

                <!-- Profile Image -->
                <div class="card card-primary shadow">
                    <div class="card-body card-profile">
                        <p class="text-center text-muted small mb-0">Blast Title</p>

                        <h3 class="profile-username text-center" name="name">{{ $reminder['blast_name'] }}</h3>
                        <hr>


                        <p><b> Status</b><span class="float-right text-muted" name="status"></span></p>
                        <hr>


{{--                        <p><b>Target Group ID </b><span class="float-right text-muted" name="blast_group_id"></span></p>--}}
{{--                        <hr>--}}


                        <p><b> Schedule</b><br/><span class="text-muted" name="schedule_datetime"></span></p>
                        <a href="javascript:void(0)" id="blast-cancel" class="w-100 btn btn-sm btn-outline-danger d-none">Cancel Blast</a>

                        <div class='sms_wrap'>
                            <hr>
                            <strong> SMS Details </strong>

                            <p>Sender ID: <span class="text-muted" name="sms_sender_id"></span></p>
                            <p class="mb-0">Content:</p>
                            <p class="bg-light border p-2 rounded text-white"><span class="" name="sms_content"></span></p>
                        </div>

                        <div class='email_wrap'>
                            <hr>
                            <strong> Email Details </strong>

                            <p>Sender Name: <span class="text-muted" name="email_sender_name"></span></p>
                            <p>Reply to: <span class="text-muted" name="email_reply_to"></span></p>
                            <p>Subject: <span class="text-muted" name="email_email_subject"></span></p>

                            <p class="mb-0">Content:</p>
                            <p class="bg-light border p-2 rounded text-white"><span class="" name="email_content"></span></p>
                        </div>

                        <div class='whatsapp_wrap'>
                            <hr>
                            <strong> WhatsApp Template Details </strong>

                            <p>Name: <span class="text-muted" name="whatsapp_name"></span></p>
                            <p class="mb-0">Content:</p>
                            <p class="bg-light border p-2 rounded text-white"><span class="" name="whatsapp_content"></span></p>
                        </div>



                        {{--<div class="row">--}}

                            {{--<div class="col-md-12">--}}
                                {{--<a target="_blank" href="{{ route('edit_reminder', $reminder['id'] ) }}" class="btn btn-info btn-block"><b>Edit</b></a>--}}
                            {{--</div>--}}
                        {{--</div>--}}

                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>

            <div class="col-md-9">
                <div class="card card-info card-outline card-outline-tabs shadow">
                    <div class="card-header p-0 border-bottom-0">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a href="#activity" data-toggle="tab" class="nav-link  link-muted active"  aria-selected="true">Recipients</a>
                            </li>
                            <li class="nav-item link-muted">
                                <a href="#target_group" data-toggle="tab" class="nav-link link-muted "  aria-selected="false">Target Group Details</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body table-responsive p-0 overflow-hidden">

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="activity" role="tabpanel">

                            {{--<div class="card-header">--}}
                            {{--<h3 class="card-title">{{ __('heading.title_view_voucher_series') }}</h3>--}}
                            {{--</div>--}}
                            <!-- /.card-header -->
                            <div class="card-body table-responsive p-0">

                                    <table id="blast_table" class="table table-bordered table-hover dataTable">
                                        <thead>
                                        <tr>
                                            <th>No.</th>
                                            <th>User ID</th>
                                            <th>Type</th>
                                            <th>Sent to</th>
                                            <th>Content</th>
                                            <th>Status</th>
                                            <th>Code</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                                <!-- /.card-body -->

                        </div>

                        <div class="tab-pane fade" id="target_group" role="tabpanel">



                        </div>
                        <!-- /.tab-pane -->

                    <!-- /.tab-content -->
                </div>
                    </div>
                <!-- /.nav-tabs-custom -->
            </div>

        </div>
        <!-- /.row -->
    </div>
    <!-- /.content -->
</div>
    </div>

@endsection