@extends('layouts.app')

@section('content')

<div class="row">
    <div class="col-sm-12">
        <a href="javascript:void(0);" onclick="show_form();" class="btn btn-info pull-right" style="margin-left: 10px;">{{translate('Upload Images')}}</a>
        <a href="{{ route('newsletters.template.add')}}" class="btn btn-info pull-right">{{translate('Create Template')}}</a>
    </div>
</div>

<br>

<!-- Basic Data Tables -->
<!--===================================================-->
<div class="panel">
    <div class="panel-heading bord-btm clearfix pad-all h-100">
        <h3 class="panel-title pull-left pad-no">{{translate('Email Templates')}}</h3>
    </div>
    <div class="panel-body">
        <table class="table table-striped res-table mar-no" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>#</th>
                    <th>{{translate('Name')}}</th>
                    <th>{{translate('Status')}}</th>
                    <th>{{translate('Created Date')}}</th>
                    <th width="10%">{{translate('Options')}}</th>
                </tr>
            </thead>
            <tbody>
                @foreach($templates as $key => $template)
                   
                        <tr>
                            <td> {{ ($key+1) + ($templates->currentPage() - 1)*$templates->perPage() }}</td>
                            <td>{{$template->name}}</td>
                            <td> 
                                <label class="switch">
                                        <input onchange="update_approved(this)" value="{{ $template->id }}" type="checkbox"  >
                                        <span class="slider round"></span>
                                </label>
                            </td>
                            <td>{{date('d-m-Y h:i:s', strtotime($template->created_at))}}</td>
                            <td>
                                <div class="btn-group dropdown">
                                    <button class="btn btn-primary dropdown-toggle dropdown-toggle-icon" data-toggle="dropdown" type="button">
                                        {{translate('Actions')}} <i class="dropdown-caret"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li><a href="{{route('newsletters.template.edit', encrypt($template->id))}}">{{translate('Edit')}}</a></li>
                                        <li><a onclick="show_details('{{$template->id}}');" >{{translate('View')}}</a></li>
                                         <li><a href="{{route('newsletters.template.duplicate', $template->id)}}">{{translate('Duplicate')}}</a></li>
                                        <li><a onclick="confirm_modal('{{route('newsletters.template.destroy', $template->id)}}');">{{translate('Delete')}}</a></li>
                                        
                                    </ul>
                                </div>
                            </td>
                        </tr>
                   
                @endforeach
            </tbody>
        </table>
        <div class="clearfix">
            <div class="pull-right">
                {{ $templates->appends(request()->input())->links() }}
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="show_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" id="modal-content">

        </div>
    </div>
</div>

 <div class="modal fade" id="awb_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" id="modal-content">

            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        function update_approved(el){
            if(el.checked){
                var status = 1;
            }
            else{
                var status = 0;
            }
            $.post('{{ route('newsletters.template.approved') }}', {_token:'{{ csrf_token() }}', id:el.value, status:status}, function(data){
                if(data == 1){
                    showAlert('success', 'template status updated successfully');
                }
                else{
                    showAlert('danger', 'Something went wrong');
                }
            });
        }
        function show_details(id){
            $.post('{{ route('newsletters.template.view') }}',{_token:'{{ @csrf_token() }}', id:id}, function(data){
                $('#show_modal #modal-content').html(data);
                $('#show_modal').modal('show', {backdrop: 'static'});
            });
        }
        function show_form(){
            $.get('{{ route('newsletters.template.upload') }}', function(data){
                $('#awb_modal #modal-content').html(data);
                $('#awb_modal').modal('show', {backdrop: 'static'});
            });
        }
    </script>
@endsection