@extends('layouts.app')

@section('content')
    <section id="dom">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title-wrap bar-teal">
                            <h4 class="card-title">Host</h4>
                        </div>
                        <p class="card-text">Here you can see the list of existing Hosts.</p>
                    </div>
                    <div class="card-body collapse show">
                        <div class="card-block card-dashboard table-responsive">
                            <table class="table table-striped table-bordered" id="dTable">
                                <thead>
                                    <tr>
                                        <th>Serial #</th>
                                        <th>Mailer</th>
                                        <th>Host</th>
                                        <th>Port</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Password</th>
                                        <th>Encryption</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- Modal --}}
    <div class="modal fade text-left" id="editDept" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header gradient-green-tea">
                    <h3 class="modal-title text-white" id="myModalLabel3">Edit Host</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-12">
                        <div class="row">
                            <input type="hidden" class="form-control" name="id" id="id">
                            <div class="row">
                                <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 center pt-2">
                                <a href="{{ route('home') }}">
                                    <button type="button" class="btn btn-danger mr-1">
                                        <i class="icon-trash"></i> Cancel
                                    </button>
                                </a>
                                <button type="submit" class="btn btn-raised btn-success updatebtn">
                                    <i class="icon-note"></i> Update
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('afterScript')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });
        $(document).ready(function() {
            var table = $('#dTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('host.get-list') }}',
                    type: 'GET',
                    dataType: "JSON",
                    error: function(reason) {
                        return true;
                    }
                },
                columns: [{
                        data: 'serial'
                    },
                    {
                        data: 'mail_mailer'
                    },
                    {
                        data: 'mail_host'
                    },
                    {
                        data: 'mail_port'
                    },
                    {
                        data: 'mail_name'
                    },
                    {
                        data: 'mail_address'
                    },
                    {
                        data: 'mail_password'
                    },
                    {
                        data: 'mail_encryption'
                    },
                    {
                        data: 'actions',
                        render: function(data, type, full, meta) {
                            return `<a class="success p-0 mr-2 viewBtn" title="Edit" data-id="${full.id}" data-type="${full.type}" data-name="${full.name}" data-valueOriginal="${full.valueOriginal}" data-value="${full.value}"  data-toggle="modal" data-keyboard="false" data-target="#editDept">
                                                <i class="ft-edit font-medium-3"></i>
                                            </a>
                                            <a href="#" id="${full.id}"class="danger p-0 mr-2 delete" title="delete" >
                                                <i class="ft-trash-2 font-medium-3"></i>
                                            </a>`;
                        }
                    }
                ],
                order: [0, 'desc'],
                // columnDefs: [
                //     { width: "10%", "targets": [-1, 0] },
                //     { orderable: false, targets: [-1,-2,-3,-4] }
                // ],
            });

        });

        $(document).on('click', '.viewBtn', function() {
            var id = $(this).attr('data-id');
            $.ajax({
                url: 'host/' + id + '/edit',
                method: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#id').val(data[0].id);
                    $('#mail_mailer').val(data[0].mail_mailer);
                    $('#mail_host').val(data[0].mail_host);
                    $('#mail_port').val(data[0].mail_port);
                    $('#mail_name').val(data[0].mail_name);
                    $('#mail_address').val(data[0].mail_address);
                    $('#mail_password').val(data[0].mail_password);
                    $('#mail_encryption').val(data[0].mail_encryption);
                    $('#mail_mailer').trigger('change');
                    $('#mail_port').trigger('change');
                    $('#mail_encryption').trigger('change');
                },
                error: function(e) {
                    console.log(e);
                }
            });
        });

        $(document).on('click', '.updatebtn', function(e) {
            e.preventDefault();
            var id = $('#id').val();
            var mail_mailer = $('#mail_mailer').val();
            var mail_host = $('#mail_host').val();
            var mail_port = $('#mail_port').val();
            var mail_name = $('#mail_name').val();
            var mail_address = $('#mail_address').val();
            var mail_password = $('#mail_password').val();
            var mail_encryption = $('#mail_encryption').val();
            $.ajax({
                type: 'PUT',
                url: 'host/' + id,
                data: {
                    "id": id,
                    "mail_mailer": mail_mailer,
                    "mail_host": mail_host,
                    "mail_port": mail_port,
                    "mail_name": mail_name,
                    "mail_address": mail_address,
                    "mail_password": mail_password,
                    "mail_encryption": mail_encryption,
                },
                success: function(data) {
                    swal("Updated!", "Action has been performed successfully!", "success").catch(swal
                        .noop);
                    $('#dTable').DataTable().ajax.reload();
                    $('#editDept').modal('hide');
                },
                error: function(e) {
                    swal("Error!", e.responseJSON.message, "error");
                }
            });
        });

        $(document).on('click', '.delete', function(e) {
            e.preventDefault();
            var id = $(this).attr('id');
            swal({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#0CC27E',
                cancelButtonColor: '#FF586B',
                confirmButtonText: 'Yes, Delete it',
                cancelButtonText: "No, Cancel"
            }).then(function(isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        url: "/host/" + id,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function() {
                            $('#dTable').DataTable().ajax.reload();
                            swal("Deleted!", "Action has been performed successfully!",
                                "success");
                        }
                    });
                }
            }).catch(swal.noop);
        });

        $('#mail_mailer').select2({
            placeholder: "Select Mailer"
        });
        $('#mail_encryption').select2({
            placeholder: "Select Encryption"
        });
        $('#mail_port').select2({
            placeholder: "Select Port"
        });
    </script>
@endsection