@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title-wrap bar-teal">
                        <h4 class="card-title" id="horz-layout-colored-controls">Add Host</h4>
                    </div>
                </div>
                <div class="card-body px-4">
                    <form class="form" id="deptForm">
                        <div class="row">
                            <div class="col-lg-6 col-sm-12">
                                <div class="form-group">
                                    <label class="label-control">Domain Name</label>
                                    <input type="text" id="domainName" class="form-control border-primary"
                                        name="domainName" placeholder="example.com">
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12">
                                <div class="form-group">
                                    <label class="label-control">Mailer</label>
                                    <select name="mail_mailer" id="mail_mailer" value="{{ old('mail_mailer') }}"
                                        class="form-control border-primary">
                                        <option value=""></option>
                                        <option value="smtp">smtp</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12">
                                <div class="form-group">
                                    <label class="label-control">Host</label>
                                    <input type="text" id="mail_host" class="form-control border-primary"
                                        name="mail_host" placeholder="mail.example.com">
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12">
                                <div class="form-group">
                                    <label class="label-control">Mail Port</label>
                                    <select name="mail_port" id="mail_port" value="{{ old('mail_mailer') }}"
                                        class="form-control border-primary">
                                        <option value=""></option>
                                        <option value="465">465</option>
                                        <option value="2525">2525</option>
                                        <option value="587">587</option>
                                        <option value="25">25</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12">
                                <div class="form-group">
                                    <label class="label-control">Name</label>
                                    <input type="text" id="mail_name" class="form-control border-primary"
                                        name="mail_name" placeholder="The ABC Company">
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12">
                                <div class="form-group">
                                    <label class="label-control">Email Address</label>
                                    <input type="email" id="mail_address" class="form-control border-primary"
                                        name="mail_address" placeholder="example@example.com">
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12">
                                <div class="form-group">
                                    <label class="label-control">Email Password</label>
                                    <input type="text" id="mail_password" class="form-control border-primary"
                                        name="mail_password" placeholder="example@example.com">
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12">
                                <div class="form-group">
                                    <label class="label-control">Email Encryption</label>
                                    <select name="mail_encryption" id="mail_encryption" value="{{ old('mail_mailer') }}"
                                        class="form-control border-primary">
                                        <option value=""></option>
                                        <option value="ssl">ssl</option>
                                        <option value="tls">tls</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-actions right">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                            <button type="submit" class="btn btn-success">
                                <i class="icon-note"></i> Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('afterScript')
    <script>
        $('#mail_mailer').select2({
            placeholder: "Select Mailer"
        });
        $('#mail_encryption').select2({
            placeholder: "Select Encryption"
        });
        $('#mail_port').select2({
            placeholder: "Select Port"
        });
        $("#deptForm").submit(function(e) {
            e.preventDefault();
            vendor = $("#deptForm");
            var form_data = new FormData($("#deptForm")[0]);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('host.store') }}",
                type: "POST",
                data: form_data,
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function(res) {
                    swal("Inserted!", "Hosts has been Added Successfully!", "success");
                    location.reload();
                },
                error: function(err) {
                    swal('Not Valid', err.responseJSON.message, 'error');
                }
            });
        });
    </script>
@endsection