@extends('layouts.app')
@section('title', 'SMTP Configuration')
@section('content')
<div class="container-fluid mt-5 pt-1">
    <div class="row pr-2 pl-2 pt-2 pb-0">
        <div class="col-lg-12 col-md-12 col-xl-12 col-sm-12">
            <h6>Settings - SMTP Configuration</h6>
            <div class="card">
                <div class="card-body pt-0">
                    <table id="users_table" class="table table-bordered nowrap table-striped mb-0 mt-2" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <tr>
                                <th class="td_bgcolor">Sl.No</th>
                                <th class="td_bgcolor">Client</th>
                                <th class="td_bgcolor">Lender</th>
                                <th class="td_bgcolor">Host</th>
                                <th class="td_bgcolor">Port</th>
                                <th class="td_bgcolor">Username</th>
                                <th class="td_bgcolor">Mail ID</th>
                                <th class="td_bgcolor">From Name</th>
                                <th class="td_bgcolor">Encryption</th>
                                <th class="td_bgcolor">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                                                        @forelse($mailconfigs as $mailconfig)
                            @if(auth()->user()->user_type_id == 1)
                                <tr>
                                    <td>{!! $i++ !!}</td>
                                    <td>{{ $mailconfig->client_name}}</td>
                                    <td>{{ $mailconfig->lender_name}}</td>
                                    <td>{{ $mailconfig->mail_host}}</td>
                                    <td>{{ $mailconfig->mail_port}}</td>
                                    <td>{{ $mailconfig->mail_username}}</td>
                                    <td>{{ $mailconfig->mail_id}}</td>
                                    <td>{{ $mailconfig->mail_fromname}}</td>
                                    <td>{{ $mailconfig->encryption}}</td>
                                    <td><span><i class="fa fa-edit text-success" onclick="editmailconfig({{ $mailconfig->id }})" style="cursor:pointer;"></i></span></td>
                                </tr>
                            @endif
                            @empty
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="myModal_users" class="modal fade" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Add Configuration</h6>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" style="border:none;background-color:#57B492;color:white;font-size:15px;">
                    <span aria-hidden="true">X</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" role="form" name="mailconfigform" id="mailconfigform" data-parsley-validate="" enctype="multipart/form-data" autocomplete="off">
                    @csrf
                    <div class="row">
                        @if(auth()->user()->user_type_id == 1)
                            <div class="row my-2">
                                <div class="col-lg-4">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Client
                                        <span class="text-danger"> * </span>
                                    </label>
                                    <select required id="clientsdrop" class="form-select" onchange="get_lenders(this.value);">
                                        <option selected disabled value="">Select Client</option>
                                        @foreach($clients_list as $clients)
                                            <option value="{{ $clients->id }}">{{ $clients->client_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-4">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Lender
                                        <span class="text-danger"> * </span>
                                    </label>
                                    <select required name="lender_id" id="lender_id" class="form-select">
                                        <option value="">Choose Client First</option>
                                    </select>
                                </div>
                                <div class="col-lg-4">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Host
                                        <span class="text-danger"> * </span>
                                    </label>
                                    <input required type="text" name="mail_host" id="mail_host" class="form-control" autocomplete="off">
                                </div>
                            </div>
                            <div class="row my-2">
                                <div class="col-lg-4">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Port
                                        <span class="text-danger"> * </span>
                                    </label>
                                    <input required type="number" name="mail_port" id="mail_port" class="form-control" autocomplete="off">
                                </div>
                                <div class="col-lg-4">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Username
                                        <span class="text-danger"> * </span>
                                    </label>
                                    <input required type="text" name="mail_username" id="mail_username" class="form-control" autocomplete="off">
                                </div>
                                <div class="col-lg-4">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Password
                                        <span class="text-danger"> * </span>
                                    </label>
                                    <input required type="password" name="mail_password" id="mail_password" class="form-control" autocomplete="off">
                                </div>
                            </div>
                            <div class="row my-2 mb-4">
                                <div class="col-lg-4">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Email ID
                                    </label>
                                    <input type="email" name="mail_id" id="mail_id" class="form-control" autocomplete="off">
                                </div>
                                <div class="col-lg-4">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">From Name
                                    </label>
                                    <input type="text" name="mail_fromname" id="mail_fromname" class="form-control" autocomplete="off">
                                </div>
                                <div class="col-lg-4">
                                    <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Encryption
                                    </label>
                                    <input type="text" name="encryption" id="encryption" class="form-control" autocomplete="off">
                                </div>
                            </div>
                        @endif
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn" style="background:#57B492;color:white;" form="mailconfigform"> Submit </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="editLenderModel">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div id="append_data"></div>
        </div>
    </div>
</div>
@endsection

@section('page_css')
<style>
    .dataTables_filter .form-control {
        padding: 8px !important;
        border-radius: 5px !important;
        height: 10px !important;
    }
    div.dt-buttons {
        float: right !important;
        margin-top: -1px;
        margin-left: 11px;
    }
    .form-control, .form-select {
        font-size:13px !important;
        border-radius: 5px !important;
        height: auto;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .parsley-required, .parsley-custom-error-message{
        color: red;
        font-size:12px;
        margin-top:4px;
        list-style-type: none;
        margin-left: -25px;
    }
    .parsley-length, .parsley-type {
        color: red;
        font-size:12px;
        margin-top:4px;
        list-style-type: none;
        margin-left: -25px;
    }
    .modal-header {
        background: #57B492;
    }
    .modal-title {
        color: white;
    }
    .dataTables_length .form-select {
        width: 45% !important;
    }
    .form-switch.form-switch-sm .form-check-input {
        height: 1.25rem;
        width: calc(1.25rem + 1rem);
        border-radius: 2rem;
    }
</style>
@endsection

@section('page_script')
<script>
    $(function() {
        $('#users_table').DataTable({
            scrollX: true,
            dom: '<"mt-2"<"row"<"col-md-6"l><"col-md-6"<B><"float-end"f>>><"mb-1"<t>><"row"<"col"i><"col"p>>>',
            buttons: [{
                text: '<strong>Add Configuration</strong>',
                className: 'btn btn-sm ml-2',
                action: function(e, node, config) {
                    openUsers_modal();
                }
            }],
        });

        $('#mailconfigform').submit(function(e) {
            e.preventDefault();
            if ($("#mailconfigform").parsley().validate()) {
                var formData = new FormData($("#mailconfigform")[0]);

                $.ajax({
                    url: "{{ route('addmailconfig') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response) {
                            var result = response.split('@#!');
                            if (result[1] !== 'error') {
                                $("#myModal_users").modal('hide');
                                Swal.fire({
                                    position: 'middle',
                                    icon: result[1],
                                    title: result[2],
                                    showConfirmButton: false,
                                    timer: 3000
                                });
                                setTimeout(function() {
                                    location.href = location.href;
                                }, 3000);
                            } else {
                                Swal.fire({
                                    position: 'middle',
                                    icon: result[1],
                                    title: result[2],
                                    showConfirmButton: false,
                                    timer: 3000
                                });
                            }
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // Handle AJAX error here, e.g., show an error message to the user
                        console.error("AJAX error: " + textStatus + " - " + errorThrown);
                    }
                });
            }
        });
    });
    function openUsers_modal() {
        $('#mailconfigform').parsley().reset();
        document.getElementById("mailconfigform").reset();
        var addUserModal = new bootstrap.Modal(document.getElementById('myModal_users'), {
            backdrop: 'static',
            keyboard: false
        });
        $("#myModal_users").appendTo("body").modal('show');
    }
    
    function get_lenders(clientid)
    {
        $.ajax({
            type: "POST",
            url: "{{route('getlendersmailconfig')}}",
            data: { "_token": "{{ csrf_token() }}",
                    "clientid":clientid
                },
            success: function(html)
            {
                $("#lender_id").html(html);
            }
        });
    }
    function editmailconfig(id)
    {
        var url = '/editmailconfig/'+id;
        $.ajax({
            url:url,
            dataType:'html',
            success:function(data)
            {
                $("#append_data").html('');
                $("#append_data").html(data);
                $('#editLenderModel').modal('show');
            }
        });
        return false;
    }
    function updateconfig()
    {
        if ($("#updateLenderFrm").parsley())
        {
            if ($("#updateLenderFrm").parsley().validate()) {
                if ($("#updateLenderFrm").parsley().isValid()) {
                    $.ajax({
                        url: "{{ route('updatemailconfig') }}",
                        type: "POST",
                        data: new FormData($("#updateLenderFrm")[0]),
                        // dataType: 'html',
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response) {
                                var result = response.split('@#!');
                                if(result[1] != 'error') {
                                    $("#editLenderModel").modal('hide');
                                    Swal.fire({
                                        position: 'middle',
                                        icon: result[1],
                                        title: result[2],
                                        showConfirmButton: false,
                                        timer: 1000
                                    });
                                    setTimeout(function(){
                                        location.href = location.href;
                                    }, 1000);
                                } else {
                                    Swal.fire({
                                        position: 'middle',
                                        icon: result[1],
                                        title: result[2],
                                        showConfirmButton: false,
                                        timer: 3000
                                    });
                                }
                            }
                        }
                    });
                }
            }
        }
    }

</script>
@endsection