@extends('layouts.app')
@section('title', 'Campaigns | Email Marketing')
@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('/plugins/dataTables/datatables.min.css') }}">
@endsection

@section('content')
        @include('Website::email-marketing.email-campaigns.campaign-breadcrumbs',compact('template'))
    <div class="studio98_websters">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content p-md">
                        @include('flash::message')
                        <div class="clearfix"></div>
                        <h3 class="campaign-subtitle">Select a template</h3>
                        <div class="row align-items-end">
                            <div class="col-sm-12 col-md-6">
                                <div class="form-group">
                                    {!! Form::label('search','Search:') !!}
                                    {!! Form::text('search', '' , ['class' => 'form-control template_search','placeholder' => 'Search','id' => 'template_search']) !!}
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="form-group align-fix">
                                    {!! Form::checkbox('premade_template' , null , 0 ,['class' => 'premade_template']) !!}
                                    {!! Form::label('premade_template','Premade template',['class' => 'input-label ml-2']) !!}
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="form-group align-fix">
                                    {!! Form::checkbox('your_template' , null , 0 ,['class' => 'your_template']) !!}
                                    {!! Form::label('your_template','Your template',['class' => 'input-label ml-2']) !!}
                                </div>
                            </div>
                        </div>
                        <div class="row email-template_selector email-template-list my-3">
                            @foreach($templates as $key => $template)
                                                                <div class="col-md-4 col-lg-3 mb-3" title="{{$template->name}}">
                                    <input id="template-{{$template->id}}" data-id="{{$template->id}}" type="radio" name="email-template" value="template-{{$template->id}}" />
                                    <label class="email-template_label" for="template-{{$template->id}}">
                                        <img src="{{$file_path}}" class="img-fluid" alt="" style="max-height: 400px">
                                    </label>
                                </div>
                            @endforeach
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <a type="button" class="btn btn-primary pull-right template_btn" href="javascript:void(0)">Next</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('footer')
    <script>
        $(document).ready(function() {
            $('.template_btn').click(function () {
                var template_id = $('input[name="email-template"]:checked').data('id');
                if(template_id !== undefined)
                {
                    $.ajax({
                        method:'POST',
                        url: '{{ email_marketing_url('campaign/save-campaign-template') }}',
                        data: 'template_id=' + template_id + '&campaign_id=' + {!! $id !!} +  '&_token='+csrf_token,
                    }).done(function(response) {
                        window.location = '{{email_marketing_url('campaign/edit-template/'.$id)}}';
                    });
                }
                else{
                    window.location = '{{email_marketing_url('campaign/edit-template/'.$id)}}';
                }
            });
            $('#template_search').keyup(function () {
                var search_str = $(this).val();
                $.ajax({
                    method:'GET',
                    url: '{{ email_marketing_url('campaign/search-campaign-template') }}',
                    data: 'search_str=' + search_str,
                }).done(function(response) {
                    var list_div = $('.email-template-list');
                    list_div.empty();
                    $(response).each(function(index,value) {
                        list_div.append(' <div class="col-md-6 col-lg-4 mb-3" title="' + value.name + '">\n' +
                            '                 <input id="template-' + value.id + '" data-id="' + value.id + '" type="radio" name="email-template" value="template-' + value.id + '" />\n' +
                            '                 <label class="email-template_label" for="template-' + value.id + '"><img src="' + value.thumbnail + '" class="img-fluid" alt=""></label>\n' +
                            '             </div>');
                    });
                });
            });
        });
    </script>
@endsection