@extends('layouts.app')

@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')

@section('page_title') Create Email Template @endsection
<div class="container">
    <div class="row">
        <div class="col-10 offset-md-1">
            <div class="card">
                <div class="card-header">
                    <h4>Create Email Template
                        @can('hasViewPermission')
                        <a class="btn  btn-sm pull-right btn-dark" href="{{url('emailTemplateList')}}">Email Template List</a>
                        @endcan
                    </h4>
                </div>
                <div class="card-body">
                    <form method="post" action="{{route('addemailtemplate')}}" enctype="" autocomplete="off">
                        {{ csrf_field() }}
                        <div class="form-group row desc">
                            <label for="organization" class="col-sm-3 col-form-label">Organization</label>
                            <div class="col-sm-9">
                                <select class="form-control" name="organization" id="organization" data-live-search="true">
                                    <option value="">Select Organization</option>
                                    @foreach($org_names as $org_name)
                                    <option value="{{$org_name->id}}">{{$org_name->account_name}} ({{$org_name->email}})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group row desc">
                            <label for="mail_server" class="col-sm-3 col-form-label">Mail Server</label>
                            <div class="col-sm-9">
                                <select class="form-control" name="mail_server" id="mail_server">
                                    <option value="">Select Mail Server</option>
                                    @foreach($mail_server as $server_name)
                                    <option value={{$server_name->id}}> {{$server_name->alias_server_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group row desc">
                            <label for="email" class="col-sm-3 col-form-label">Email Account</label>
                            <div class="col-sm-9">
                                <select class="form-control" name="email" id = "email">
                                    <option value="">Select Email Account</option>
                                </select>
                                <span class="error-categories span-error redIcon"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="template_name" class="col-sm-3 col-form-label">Template Name</label>
                            <div class="col-sm-9">
                            <input name="template_name" type="text" class="form-control" id="template_name" value="{{old('template_name')}}" placeholder="Please enter a template name" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="template_ID" class="col-sm-3 col-form-label">Template ID</label>
                            <div class="col-sm-9">
                                <input name="template_ID" type="text" class="form-control" id="template_ID" value="{{old('template_ID')}}" placeholder="Please enter template ID" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="email_content" class="col-sm-3 col-form-label">Email Content</label>
                            <div class="col-sm-9">
                                <textarea name="email_content" id="email_content" placeholder="Enter your content" style="width: 100%; height: 200px;"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="offset-sm-3 col-sm-9">
                                <button type="submit" id="" class="btn btn-sm btn-block btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- customizing the organisation label drop-down -->
<script>
$('#organization').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: false,
        buttonWidth: '100%',
        enableCaseInsensitiveFiltering: true
    });
    // ajax for filtering email based on mail server selection
    $('#mail_server').on('change', function() {
        mail_server_id = $('#mail_server option:selected').val();
        $.ajax({
            url:"{{ url('email_names') }}",
            method: "POST",
            data: {
                "_token" : "{{ csrf_token() }}",
                mail_server_id: mail_server_id,
            },
                success: function(result) {
                    $('#email').empty();
                    $('#email').html(result);
                }
        });
    });
</script>
@endsection