@extends('layouts.master')

@section('content')
<div class="container">
    <div class="card card-custom gutter-b">
        <div class="card-header flex-wrap py-3">
            <div class="card-title">
                <h3 class="card-label">List of Customer</h3>
            </div>
            <div class="card-toolbar">
                <!--begin::Button-->
                <div class="form-group row">
                    <a class="btn btn-info" href="{{ route('user.export', ['role' => 3]) }}">{{__('Export Customer')}}</a>
                    &nbsp;
                    <button type="button" class="btn btn-primary" id="showAddCustomer">
                        <i class="flaticon-plus icon-lg"></i>
                        Add New Customer
                    </button>
                </div>
                <!--end::Button-->
            </div>
        </div>
        <div class="card-body">
            <!--begin: Datatable-->
            <table class="table table-bordered" id="customer-table">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>Photo</th>
                        <th>Username</th>
                        <th>Name</th>
                        <th>Level</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <!--end: Datatable-->
        </div>
    </div>
</div>

<!--begin::Modal-->
@include('user.customer.add')
@include('user.customer.edit')
<!--end::Modal-->

@endsection
@push('script')
<script type="text/javascript">
    var table = $('#customer-table').DataTable({
        responsive: false,
        scrollX: true,
        lengthMenu: [10, 20, 50, 100],
        columns: [
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.photo != null)
                        return '<img src="'+row.photo.file_path+'" width="80px" height="80px" style="border: 1px solid #ddd; border-radius: 4px;">';
                    else
                        return '-';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span>'+row.name+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.detail && row.detail.first_name && row.detail.last_name)
                        return '<span>'+row.detail.first_name+' '+row.detail.last_name+'</span>';
                    else if(row.detail && row.detail.first_name)
                        return '<span>'+row.detail.first_name+'</span>';
                    else
                        return '-';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span>'+row.role.role+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.detail && row.detail.phone)
                        return '<span>'+row.detail.phone+'</span>';
                    else
                        return '-';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span>'+row.email+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.status == 1)
                        return "<h5><span class='badge badge-success'>{{ __('Active') }}</span></h5>";
                    else
                        return "<h5><span class='badge badge-danger'>{{ __('Inactive') }}</span></h5>";
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<a href="#" title="Edit" class="btn btn-icon btn-circle btn-light-warning btn-sm mr-2 edit-customer" data-id="'+row.id+'"><i class="la la-edit icon-xl"></i></a><a href="#" title="Delete" class="btn btn-icon btn-circle btn-light-danger btn-sm delete-customer" data-id="'+row.id+'"><i class="la la-trash icon-xl"></i></a>';
                }
            },
        ],

        ajax: {
            method : 'get',
            url: "{{ route('user.customer.dt') }}",
            dataSrc:"data",
            dataType : "json"
        }
    }).on('click', 'a.edit-customer', function(e) {

        e.preventDefault();

        $('#preview_edit').hide();
        $('#removeFile_edit').hide();
        $('#preview_front_ic_edit').hide();
        $('#removeFile_front_ic_edit').hide();
        $('#preview_back_ic_edit').hide();
        $('#removeFile_back_ic_edit').hide();
        $('input[type="file"]').show();

        var id  = $(this).data('id');
        var url = "{{ route('user.detail', ':id') }}";
        url     = url.replace(':id',id);

        $.ajax({
            url: url,
            type: 'GET',
            success: function(data) {
                var val = data.data;
                $('#user_name_edit').val(val.name);

                if(val.photo)
                    var photo = val.photo.file_path;
                else
                    var photo = 0;

                if(val.ic)
                    var ic = val.ic.file_path_front;
                else
                    var ic = 0;

                $('#curr_photo_edit').val(photo);
                $('#curr_front_ic_edit').val(ic);
                $('#curr_back_ic_edit').val(ic);

                if(val.photo != null)
                {
                    $('#removeFile_edit, #preview_edit').show();
                    document.getElementById("preview_edit").src = val.photo.file_path;
                    $('.file_photo_edit').hide();
                }

                if(val.ic != null)
                {
                    $('#removeFile_front_ic_edit, #preview_front_ic_edit').show();
                    document.getElementById("preview_front_ic_edit").src = val.ic.file_path_front;
                    $('.file_front_ic_edit').hide();

                    $('#removeFile_back_ic_edit, #preview_back_ic_edit').show();
                    document.getElementById("preview_back_ic_edit").src = val.ic.file_path_back;
                    $('.file_back_ic_edit').hide();
                }

                $('#email_edit').val(val.email);
                $('#level_edit').val(val.user_role).select2();

                if(val.detail != null)
                {
                    $('#first_name_edit').val(val.detail.first_name);             
                    $('#last_name_edit').val(val.detail.last_name);
                    $('#phone_edit').val(val.detail.phone);
                    $('#ic_edit').val(val.detail.ic);
                } 

                if(val.status == 1)
                {
                    document.getElementById("status_edit").checked = true;
                }
                else
                {
                    document.getElementById("status_edit").checked = false;
                }
            }
        });

        $('#id_edit').val(id);

        $('#editCustomer').modal('show');
    }).on('click', 'a.delete-customer', function(e) {

        e.preventDefault();

        var id      = $(this).data('id');
        var _token  = $("input[name='_token']").val();
        var url     = "{{ route('user.customer.delete', ':id') }}";
        url         = url.replace(':id',id);

        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete it!"
        }).then(function(result) {
            if (result.value) {
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        _token : _token
                    },
                    success: function(data) {
                        if(data.status != 'success')
                        {
                            var errors = data;
                            $.each(errors, function(index, sm){
                                toastr.error(sm, {timeOut: 5000});
                            });
                        }
                        else
                        {
                            Swal.fire(
                                "Deleted!",
                                "Customer has been deleted.",
                                "success"
                            )
                            $('#customer-table').DataTable().ajax.reload(null, false);
                        }
                    }
                });
            }
        });
    });

    $(document).ready(function() {

        $('#level_edit').select2();

        $('#showAddCustomer').on('click', function () {
            $('#preview_edit').hide();
            $('#removeFile_edit').hide();
            $('#preview').hide();
            $('#removeFile').hide();
            $('#preview_front_ic').hide();
            $('#removeFile_front_ic').hide();
            $('#preview_front_ic_edit').hide();
            $('#removeFile_front_ic_edit').hide();
            $('#preview_back_ic').hide();
            $('#removeFile_back_ic').hide();
            $('#preview_back_ic_edit').hide();
            $('#removeFile_back_ic_edit').hide();
            $('input[type="file"]').show();

            $('#addCustomer').modal('show');
        });

        $('.save-customer').on('click', function () {
            addCustomer();
        });

        $('.update-customer').on('click', function () {
            updateCustomer();
        });

        $('#addCustomer').on('hidden.bs.modal', function() {
            $('#addCustomer form')[0].reset();
        });

        $('.file_photo_add').change(function(e) {
            if(e.target.files[0])
            {
                var fileName = e.target.files[0].name;
                $(this).hide();
                $('#removeFile, #preview').show();
                var reader = new FileReader();
                reader.onload = function(e) {
                    // get loaded data and render thumbnail.
                    document.getElementById("preview").src = e.target.result;
                };
                // read the image file as a data URL.
                reader.readAsDataURL(this.files[0]);
            }
            else
            {
                document.getElementById("preview").src = '';
                $(".file").val('');
                $('#preview').hide();
            }
            
        });

        $("#removeFile").click(function(){
            document.getElementById("preview").src = '';
            $(".file_photo_add").val('');
            $('#preview').hide();
            $('#current_photo').val('');
            $(this).hide();
            $('.file_photo_add').show();
        });

        $('.file_photo_edit').change(function(e) {
            if(e.target.files[0])
            {
                var fileName = e.target.files[0].name;
                $(this).hide();
                $('#removeFile_edit, #preview_edit').show();
                var reader = new FileReader();
                reader.onload = function(e) {
                    // get loaded data and render thumbnail.
                    document.getElementById("preview_edit").src = e.target.result;
                };
                // read the image file as a data URL.
                reader.readAsDataURL(this.files[0]);
            }
            else
            {
                document.getElementById("preview_edit").src = '';
                $(".file_photo_edit").val('');
                $('#preview_edit').hide();
            }
            
        });

        $("#removeFile_edit").click(function(){
            document.getElementById("preview_edit").src = '';
            $(".file_photo_edit").val('');
            $('#preview_edit').hide();
            $('#curr_photo_edit').val('0');
            $(this).hide();
            $('.file_photo_edit').show();
        });

        $('.file_front_ic').change(function(e) {
            if(e.target.files[0])
            {
                var fileName = e.target.files[0].name;
                $(this).hide();
                $('#removeFile_front_ic, #preview_front_ic').show();
                var reader = new FileReader();
                reader.onload = function(e) {
                    // get loaded data and render thumbnail.
                    document.getElementById("preview_front_ic").src = e.target.result;
                };
                // read the image file as a data URL.
                reader.readAsDataURL(this.files[0]);
            }
            else
            {
                document.getElementById("preview_front_ic").src = '';
                $(".file_front_ic").val('');
                $('#preview_front_ic').hide();
            }
            
        });

        $("#removeFile_front_ic").click(function(){
            document.getElementById("preview_front_ic").src = '';
            $(".file_front_ic").val('');
            $('#preview_front_ic').hide();
            $(this).hide();
            $('.file_front_ic').show();
        });

        $('.file_front_ic_edit').change(function(e) {
            if(e.target.files[0])
            {
                var fileName = e.target.files[0].name;
                $(this).hide();
                $('#removeFile_front_ic_edit, #preview_front_ic_edit').show();
                var reader = new FileReader();
                reader.onload = function(e) {
                    // get loaded data and render thumbnail.
                    document.getElementById("preview_front_ic_edit").src = e.target.result;
                };
                // read the image file as a data URL.
                reader.readAsDataURL(this.files[0]);
            }
            else
            {
                document.getElementById("preview_front_ic_edit").src = '';
                $(".file_front_ic_edit").val('');
                $('#preview_front_ic_edit').hide();
            }
            
        });

        $("#removeFile_front_ic_edit").click(function(){
            document.getElementById("preview_front_ic_edit").src = '';
            $(".file_front_ic_edit").val('');
            $('#preview_front_ic_edit').hide();
            $('#curr_front_ic_edit').val('0');
            $(this).hide();
            $('.file_front_ic_edit').show();
        });

        $('.file_back_ic').change(function(e) {
            if(e.target.files[0])
            {
                var fileName = e.target.files[0].name;
                $(this).hide();
                $('#removeFile_back_ic, #preview_back_ic').show();
                var reader = new FileReader();
                reader.onload = function(e) {
                    // get loaded data and render thumbnail.
                    document.getElementById("preview_back_ic").src = e.target.result;
                };
                // read the image file as a data URL.
                reader.readAsDataURL(this.files[0]);
            }
            else
            {
                document.getElementById("preview_back_ic").src = '';
                $(".file_back_ic").val('');
                $('#preview_back_ic').hide();
            }
            
        });

        $("#removeFile_back_ic").click(function(){
            document.getElementById("preview_back_ic").src = '';
            $(".file_back_ic").val('');
            $('#preview_back_ic').hide();
            $(this).hide();
            $('.file_back_ic').show();
        });

        $('.file_back_ic_edit').change(function(e) {
            if(e.target.files[0])
            {
                var fileName = e.target.files[0].name;
                $(this).hide();
                $('#removeFile_back_ic_edit, #preview_back_ic_edit').show();
                var reader = new FileReader();
                reader.onload = function(e) {
                    // get loaded data and render thumbnail.
                    document.getElementById("preview_back_ic_edit").src = e.target.result;
                };
                // read the image file as a data URL.
                reader.readAsDataURL(this.files[0]);
            }
            else
            {
                document.getElementById("preview_back_ic_edit").src = '';
                $(".file_back_ic_edit").val('');
                $('#preview_back_ic_edit').hide();
            }
            
        });

        $("#removeFile_back_ic_edit").click(function(){
            document.getElementById("preview_back_ic_edit").src = '';
            $(".file_back_ic_edit").val('');
            $('#preview_back_ic_edit').hide();
            $('#curr_back_ic_edit').val('0');
            $(this).hide();
            $('.file_back_ic_edit').show();
        });
    });

    function addCustomer()
    {
        var user_name   = $('#user_name_add').val();
        var password    = $('#password_add').val();
        var first_name  = $('#first_name_add').val();
        var last_name   = $('#last_name_add').val();
        var phone       = $('#phone_add').val();
        var email       = $('#email_add').val();
        var ic          = $('#ic_add').val();
        var status      = document.getElementById('status_add').checked ? '1' :'0';
        var _token      = $("input[name='_token']").val();
        var url         = "{{ route('user.customer.store') }}";

        let fr = new FormData();
        let photo = $('#photo_add').prop('files')[0];
        let frontic = $('#front_ic_add').prop('files')[0];
        let backic = $('#back_ic_add').prop('files')[0];
        let curr_photo = '0';
        let curr_front_ic = '0';
        let curr_back_ic = '0';

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                user_name   : user_name,
                password    : password,
                first_name  : first_name,
                last_name   : last_name,
                email       : email,
                phone       : phone,
                ic          : ic,
                status      : status,
                _token      : _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                } else{
                    var user_id = data.user_id;

                    fr.append('user_id', user_id);
                    fr.append('photo', photo);
                    fr.append('curr_photo', curr_photo);
                    fr.append('frontic', frontic);
                    fr.append('curr_front_ic', curr_front_ic);
                    fr.append('backic', backic);
                    fr.append('curr_back_ic', curr_back_ic);
                    fr.append('_token', _token);
                    $.ajax({
                        url: "{{ route('user.upload.image') }}",
                        data:fr,
                        type: "POST",
                        cache:false,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(data) {
                            if(data.status != 'success'){
                                var errors = data;
                                $.each(errors, function(index, sm){
                                    toastr.error(sm, {timeOut: 5000});
                                });
                            }
                            else
                            {
                                Swal.fire({
                                    title: "Success!",
                                    text: "Successfully Add New Customer!",
                                    icon: "success",
                                    buttonsStyling: false,
                                    showConfirmButton: false,
                                    timer: 3000
                                 });
                                $('#addCustomer').modal('hide');
                                $('#customer-table').DataTable().ajax.reload(null, false);
                            }
                        }
                    });
                }
            }
        });
    }

    function updateCustomer()
    {
        var id          = $('#id_edit').val();
        var user_name   = $('#user_name_edit').val();
        var level       = $('#level_edit').val();
        var password    = $('#password_edit').val();
        var first_name  = $('#first_name_edit').val();
        var last_name   = $('#last_name_edit').val();
        var phone       = $('#phone_edit').val();
        var email       = $('#email_edit').val();
        var ic          = $('#ic_edit').val();
        var status      = document.getElementById('status_edit').checked ? '1' :'0';
        var _token      = $("input[name='_token']").val();
        var url         = "{{ route('user.customer.update', ':id') }}";
        url             = url.replace(':id',id);

        let fr = new FormData();
        let photo = $('#photo_edit').prop('files')[0];
        let frontic = $('#front_ic_edit').prop('files')[0];
        let backic = $('#back_ic_edit').prop('files')[0];
        let curr_photo_edit = $('#curr_photo_edit').val();
        let curr_front_ic_edit = $('#curr_front_ic_edit').val();
        let curr_back_ic_edit = $('#curr_back_ic_edit').val();

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                user_name   : user_name,
                password    : password,
                first_name  : first_name,
                last_name   : last_name,
                email       : email,
                phone       : phone,
                ic          : ic,
                status      : status,
                level       : level,
                _token      : _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                } else{
                    var user_id = data.user_id;

                    fr.append('user_id', user_id);
                    fr.append('photo', photo);
                    fr.append('curr_photo', curr_photo_edit);
                    fr.append('frontic', frontic);
                    fr.append('curr_front_ic', curr_front_ic_edit);
                    fr.append('backic', backic);
                    fr.append('curr_back_ic', curr_back_ic_edit);
                    fr.append('_token', _token);
                    $.ajax({
                        url: "{{ route('user.upload.image') }}",
                        data:fr,
                        type: "POST",
                        cache:false,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(data) {
                            if(data.status != 'success'){
                                var errors = data;
                                $.each(errors, function(index, sm){
                                    toastr.error(sm, {timeOut: 5000});
                                });
                            }
                            else
                            {
                                Swal.fire({
                                    title: "Success!",
                                    text: "Successfully Updated Customer!",
                                    icon: "success",
                                    buttonsStyling: false,
                                    showConfirmButton: false,
                                    timer: 3000
                                 });
                                $('#editCustomer').modal('hide');
                                $('#customer-table').DataTable().ajax.reload(null, false);
                            }
                        }
                    });
                }
            }
        });
    }
</script>
@endpush