@extends('layouts.app')
@include('plugins.datatables')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <h3 class="content-header-title">External User</h3>
                <div class="row breadcrumbs-top">
                    <div class="breadcrumb-wrapper col-12">
                        {{ Breadcrumbs::render('usermanagement.externaluser') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section>
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <!-- <div class="col-md-4">
                            </div> -->
                            <div class="col-md-8 float-left">
                                <form class="p-t-10" id="form-project" role="form" autocomplete="off" method="post" action="{{ route('usermanagement.externaluser') }}" novalidate>
                                    <div class="form-group-attached">
                                        <div class="row clearfix">
                                            <div class="col-md-4">
                                                <div class="form-group form-group-default ">
                                                    <label>
                                                        <span id="label_name">Name / Email</span>
                                                    </label>
                                                    <input id="search_name" class="form-control" name="search_name" type="text">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Status</label>
                                                    <select  id="status_id" name="status_id" class="form-control">
                                                        <option value="" selected="">Choose one..</option>
                                                        @foreach($all_status as $index => $status)
                                                        <option value="{{ $status->id }}">{{ $status->name_bi }}</option>
                                                        @endforeach
                                                    </select>							
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Account Type</label>
                                                    <select  id="account_type_id" name="account_type_id" class="form-control">
                                                        <option value="" selected="" >Choose one..</option>
                                                        <option value="1">Main Account</option>
                                                        <option value="2">Sub Account</option>
                                                    </select>							
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table" id="table" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="fit">No.</th>
                                    <th>Name</th>
                                    <th>Date Registered</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

<form method="POST" action="{{ route('usermanagement.externaluser.reset_password') }}" class="p-t-15" id="form-reset-password" name="form-reset-password" novalidate>
    {{ csrf_field() }}
    <input type="hidden" id="email_reset_password" name="email" value="">
</form>
@endsection

@push('js')
<script type="text/javascript">
var table = $('#table');

var settings = {
    "processing": true,
    "serverSide": true,
    "deferRender": true,
    "ajax": "{{ fullUrl() }}",
    "columns": [
        { data: 'index', defaultContent: '', orderable: false, searchable: false, render: function (data, type, row, meta) {
            return meta.row + meta.settings._iDisplayStart + 1;
        }},
        { data: "name", name: "name", defaultContent: "-", render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "created_at", name: "created_at", defaultContent: "-" },     
        { data: "status.name", name: "status.name", defaultContent: "-",render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "action", name: "action", orderable: false, searchable: false},
    ],
    "dom": "Blfrtip",
    "buttons": [
        {
            text: '<i class="la la-print m-r-5"></i> Print',
            extend: 'print',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="la la-download m-r-5"></i> Excel',
            extend: 'excelHtml5',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="la la-download m-r-5"></i> PDF',
            extend: 'pdfHtml5',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
    ],
    "destroy": true,
    "iDisplayLength": 10
};

table.dataTable(settings);

$("select#status_id, input#search_name, select#account_type_id").on('change', function() {

    var form = $("#form-project");

    var settings = {
        "processing": true,
        "serverSide": true,
        "deferRender": true,
        "ajax": form.attr('action')+"?"+form.serialize(),
        "columns": [
            { data: 'index', defaultContent: '', orderable: false, searchable: false, render: function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            }},
            { data: "name", name: "name", defaultContent: "-", render: function(data, type, row){
                return $("<div/>").html(data).text();
            }},
            { data: "created_at", name: "created_at", defaultContent: "-" },     
            { data: "status.name", name: "status.name", defaultContent: "-",render: function(data, type, row){
                return $("<div/>").html(data).text();
            }},
            { data: "action", name: "action", orderable: false, searchable: false},
        ],
        "dom": "Blfrtip",
        "buttons": [
            {
                text: '<i class="la la-plus-circle m-r-5"></i> Add External User',
                className: 'btn btn-success btn-sm',
                action: function ( e, dt, node, config ) {
                    add();
                }
            },
            {
                text: '<i class="la la-print m-r-5"></i> Print',
                extend: 'print',
                className: 'btn btn-secondary btn-sm',
                exportOptions: {
                    columns: ':visible:not(.nowrap)'
                }
            },
            {
                text: '<i class="la la-download m-r-5"></i> Excel',
                extend: 'excelHtml5',
                className: 'btn btn-secondary btn-sm',
                exportOptions: {
                    columns: ':visible:not(.nowrap)'
                }
            },
            {
                text: '<i class="la la-download m-r-5"></i> PDF',
                extend: 'pdfHtml5',
                className: 'btn btn-secondary btn-sm',
                exportOptions: {
                    columns: ':visible:not(.nowrap)'
                }
            },
        ],
        "destroy": true,
        "iDisplayLength": 10
    };

    table.dataTable(settings);
});

// search box for table
$('#search-table').keyup(function() {
    table.fnFilter($(this).val());
});

function passwordUser(id) {
    $("#modal-div").load("{{ route('usermanagement.externaluser') }}/password/"+id);
}

function handoverAccount(id) {
    console.log('handover');
    $("#modal-div").load("{{ route('usermanagement.externaluser') }}/handover/"+id);
}

function edit(id) {
    $("#modal-div").load("{{ route('usermanagement.externaluser') }}/"+id);
}

function blast_email_acc(id) {
    $("#modal-div").load("{{ route('usermanagement.externaluser') }}/blast_email_acc/"+id);
}

function resetPassword(id,email,username) {

    $('#email_reset_password').val(email);

    swal({
        title: "Reset Password",
        text: "An email with instruction to reset password will be sent to "+email+". Proceed?",
        icon: "warning",
        buttons: ["Cancel", { text: "Proceed", closeModal: false }],
        dangerMode: true,
    })
    .then((confirm) => {
        if (confirm) {
            $('form#form-reset-password').submit();
        }
    });
}


$('body').on('submit','form#form-reset-password',function(e){

    e.preventDefault();

    var form = $(this);

    $.ajax({
        url: form.attr('action'),
        method: form.attr('method'),
        data: new FormData(form[0]),
        dataType: 'json',
        async: true,
        contentType: false,
        processData: false,
        success: function(data) {
            swal(data.title, data.message, data.status);
            table.api().ajax.reload(null, false);
        }
    });

})

function remove(id) {
    swal({
        title: "Delete Data",
        text: "Data that have been deleted cannot be recovered. Proceed?",
        icon: "warning",
        buttons: ["Cancel", { text: "Delete", closeModal: false }],
        dangerMode: true,
    })
    .then((confirm) => {
        if (confirm) {
            $.ajax({
                url: '{{ route('usermanagement.externaluser') }}/'+id,
                method: 'delete',
                dataType: 'json',
                async: true,
                contentType: false,
                processData: false,
                success: function(data) {
                    swal(data.title, data.message, data.status);
                    table.api().ajax.reload(null, false);
                }
            });
        }
    });
}

$('body').on('submit','#form-project',function(e){

    e.preventDefault();

})

</script>
@endpush