<div class="container-fluid" id="container-wrapper">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800"><?php echo $judul; ?></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="./">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page"><?php echo $judul; ?></li>
        </ol>
    </div>

    <div class="row">
        <div class="col-md-12">

            <div class="card">
                <div class="card-header pb-0">
                    <div class="input-group input-group-sm">
                        <div class="input-group-prepend">
                            <span class="input-group-text" for="limits">LIMIT</span>
                        </div>
                        <select id="limits" name="limits" class="form-control custom-select w-1"
                            onchange="search_Dropship()">
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        <div class="input-group-prepend">
                            <span class="input-group-text" for="sortBy">SORT</span>
                        </div>
                        <select id="sortBy" class="form-control custom-select w-1" onchange="search_Dropship()">
                            <option value="ASC">ASC</option>
                            <option value="DESC" selected>DESC</option>
                        </select>
                        <input type="text" id="keywords" class="form-control w-40" placeholder="Cari data"
                            onkeyup="search_Dropship();" />
                        <div class="input-group-append">
                            <button class="btn btn-danger btn-sm clear_dropship" type="button"><i
                                    class="fa fa-times"></i>
                                Clear</button>
                            <button type="button" class="btn btn-info add_dropship" data-id="0"><i
                                    class="fa fa-plus"></i> Tambah</button>
                            <!--button class="btn btn-primary btn-sm url_doc" data-url="satuan" type="button"
                                data-toggle="tooltip" data-original-title="Dok Satuan Produk" data-placement="left"><i
                                    class="fa fa-info-circle"></i></button-->
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div id="data_dropship"></div>
                </div><!-- /.card-body -->
            </div><!-- /.card -->

        </div>
    </div>
</div>
<div class="modal fade" id="modal-dropship" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" id="save-satuan" role="document">
        <div class="modal-content flat">
            <div class="modal-header">
                <h5 class="modal-title" id="satuanModalScrollableTitle">Tambha data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form role="form" class="form_update_dropship" id="form_update_dropship" name="form_update_dropship">
                <div class="modal-body">

                    <input type='hidden' name='id' id='id_dropship'>
                    <input type='hidden' name='type' id="type">

                    <div class="form-group row mb-1">
                        <label for="nama_toko" class="col-md-4">Nama Toko</label>
                        <div class="col-md-8">
                            <input type="text" name="nama_toko" id="nama_toko" class="form-control  form-control-sm"
                                required>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label for="nama_pemilik" class="col-md-4">Pemilik Toko</label>
                        <div class="col-md-8">
                            <input type="text" name="nama_pemilik" id="nama_pemilik"
                                class="form-control form-control-sm" required>
                            <input type="hidden" name="id_pelanggan" id="id_pelanggan" required>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label for="nama_ttd" class="col-md-4">Nama TTD</label>
                        <div class="col-md-8">
                            <input type="text" name="nama_ttd" id="nama_ttd" class="form-control form-control-sm"
                                required>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label for="telp_toko" class="col-md-4">Telp Toko</label>
                        <div class="col-md-8">
                            <input type="text" name="telp_toko" id="telp_toko" class="form-control form-control-sm"
                                required>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label for="email_toko" class="col-md-4">Email Toko</label>
                        <div class="col-md-8">
                            <input type="text" name="email_toko" id="email_toko" class="form-control form-control-sm"
                                required>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label for="email_toko" class="col-md-4">Kabupaten/Kota</label>
                        <div class="col-md-8">
                            <input type="text" name="alamat_surat" id="alamat_surat"
                                class="form-control form-control-sm" required>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label for="alamat_toko" class="col-md-4">Alamat toko</label>
                        <div class="col-md-8">
                            <textarea name="alamat_toko" id="alamat_toko" class="form-control form-control-sm"
                                required></textarea>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label for="rekening_toko" class="col-md-4">Rekening Toko</label>
                        <div class="col-md-8">
                            <input type="text" name="rekening_toko" id="rekening_toko"
                                class="form-control form-control-sm" required>
                        </div>
                    </div>
                    <div class="form-group row mb-1">
                        <label for="rekening_toko" class="col-md-4">Persentase Kenaikan Harga Toko</label>
                        <div class="col-md-8">
                            <input type="text" name="persen" id="persen" class="form-control form-control-sm" required>
                        </div>
                    </div>
                    <div class="row mb-1">
                        <label for="" class="col-md-4">Warna</label>
                        <div class="form-group col-md-4">
                            <label for="warna_lunas">Invoice Lunas</label>
                            <div class="input-group">
                                <span class="input-group-btn input-group-prepend"><span class="picker"
                                        id="picker1"></span></span>
                                <input type="text" class="form-control" id="warna_lunas" name="warna_lunas" required>
                            </div>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="warna_blunas">Invoice Belum Lunas</label>
                            <div class="input-group">
                                <span class="input-group-btn input-group-prepend"><span class="picker picker2"
                                        id="picker2"></span></span>
                                <input type="text" class="form-control" id="warna_blunas" name="warna_blunas" required>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-1">
                        <label for="" class="col-md-4">Logo</label>
                        <div class="form-group col-md-4">
                            <label for="logo">Lunas</label>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">
                                        <img class="imglogo" data-id="1" id="imglogo1" src="#" height="20" alt="" />
                                    </button>
                                </div>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="logo" name="logo">
                                    <label class="custom-file-label" for="logo">Pilih</label>
                                </div>
                            </div>
                            <small id="logoHelp" class="form-text text-muted">size 700x164 pixel</small>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="logo_bw">Belum Lunas</label>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">
                                        <img class="imglogo" data-id="2" id="imglogo2" src="#" height="20" alt="" />
                                    </button>
                                </div>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="logo_bw" name="logo_bw">
                                    <label class="custom-file-label" for="logo_bw">Pilih</label>
                                </div>
                            </div>
                            <small id="logoHelp" class="form-text text-muted">size 700x164 pixel</small>
                        </div>
                    </div>
                    <div class="row mb-1">
                        <label for="" class="col-md-4">Stamp</label>
                        <div class="form-group col-md-4">
                            <label for="lunas">Lunas</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">
                                        <img class="imglogo" id="stamp_lunas" src="#" height="20" alt="" />
                                    </button>
                                </div>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="lunas" name="lunas">
                                    <label class="custom-file-label" for="lunas">Pilih</label>
                                </div>
                            </div>
                            <small id="logoHelp" class="form-text text-muted">size 300x100 pixel</small>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="blunas">Belum Lunas</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">
                                        <img class="imglogo" id="stamp_blunas" src="#" height="20" alt="" />
                                    </button>
                                </div>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="blunas" name="blunas">
                                    <label class="custom-file-label" for="blunas">Pilih</label>
                                </div>
                            </div>
                            <small id="iconHelp" class="form-text text-muted">size 300x100 pixel</small>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="aktif" class="col-md-4">Aktif</label>
                        <div class="col-md-8">
                            <select name="aktif" id="aktif" class="form-control custom-select  form-control-sm"
                                required>
                                <option value="Y">Ya</option>
                                <option value="N">Tidak</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" name="submit" class="btn btn-info btn-sm flat form-submit">Simpan</button>
                    <button type="button" class="btn btn-danger btn-sm flat" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="confirm-delete" role="dialog"
    tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
                <button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
            </div>
            <div class="modal-body">
                <p>Anda akan menghapus satu url, prosedur ini tidak dapat diubah.</p>
                <p>Apakah Anda ingin melanjutkan?</p>
                <p class="debug-url"></p>
                <input type="hidden" id="data-hapus">
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal" type="button">Batal</button>
                <button class="btn btn-danger hapus" type="button">YA</button>
            </div>
        </div>
    </div>
</div>
<style>
.picker {
    border-radius: 0;
    width: 43px;
    height: 43px;
    cursor: pointer;
}
</style>
<input type="hidden" name="halaman" id="halaman" value="0">
<script src="<?php echo base_url('assets/'); ?>vendor/colorpick/colorPick.js"></script>
<script>
$("#picker1").colorPick({
    'initialColor': '#8e44ad',
    'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad",
        "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#444444",
        "#ED3237", "#000000"
    ],
    'onColorSelected': function() {
        $("#warna_lunas").val(this.color);
        // console.log("The user has selected the color: " + this.color)
        this.element.css({
            'backgroundColor': this.color,
            'color': this.color
        });
    }
});
$("#picker2").colorPick({
    'initialColor': '#8e44ad',
    'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad",
        "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#444444",
        "#ED3237", "#000000"
    ],
    'onColorSelected': function() {
        $("#warna_blunas").val(this.color);
        // console.log("The user has selected the color: " + this.color)
        this.element.css({
            'backgroundColor': this.color,
            'color': this.color
        });
    }
});
$("#picker3").colorPick({
    'initialColor': '#8e44ad',
    'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad",
        "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#444444",
        "#ED3237", "#000000"
    ],
    'onColorSelected': function() {
        $("#tema").val(this.color);
        // console.log("The user has selected the color: " + this.color)
        this.element.css({
            'backgroundColor': this.color,
            'color': this.color
        });
    }
});
$('.clear_dropship').on('click', function() {
    $('#keywords').val('');
    search_Dropship();
});
search_Dropship();

function search_Dropship(page_num) {
    page_num = page_num ? page_num : 0;
    var keywords = $('#keywords').val();
    var sortBy = $('#sortBy').val();
    var limits = $('#limits').val();

    var urlnya = '<?php echo base_url('dropshiper/ajaxData/'); ?>' + page_num
    $.ajax({
        type: 'POST',
        url: urlnya,
        data: {
            page: page_num,
            keywords: keywords,
            sortBy: sortBy,
            limits: limits
        },
        beforeSend: function() {
            //$('.table-mailcard').loading();
        },
        success: function(html) {
            //$('#data_dropship').on('loading.stop', function(event, loading) {
            $('#data_dropship').html(html);
            $('#halaman').val(page_num);
            //});
            // $('.table-mailcard').loading('stop');
        },
        error: function(res, status, httpMessage) {
            $('.table-mailcard').loading('stop');
            console.log(res.status)
            if (res.status == 401) {
                sweet_login(httpMessage, 'warning', base_url);
            } else {
                sweet("Peringatan!!!", httpMessage, "warning", "warning");
            }
        }
    });
}
$('#modal-dropship').on('shown.bs.modal', function() {
    $('#nama_toko').focus();
});

$(document).on('click', '.add_dropship', function(e) {
    e.preventDefault();
    var id = $(this).attr('data-id');
    $('#modal-dropship').modal({
        backdrop: 'static',
        keyboard: false
    });
    if (id == 0) {
        $("#satuanModalScrollableTitle").html('Add Data');
        $("#type").val('add');
        $("#id_dropship").val(id);
        var warna = "#69008c";
        $("#picker1").css("background-color", warna);
        $("#warna_lunas").val(warna);

        var warna2 = "#444444";
        $("#warna_blunas").val(warna2);
        $("#picker2").css("background-color", warna2);
        $('#imglogo1').attr("src", "");
        $('#imglogo2').attr("src", "");
        $('#stamp_lunas').attr("src", "");
        $('#stamp_blunas').attr("src", "");
        return;
    } else {
        $("#satuanModalScrollableTitle").html('Edit Data');
        $("#type").val('edit');
    }
    $.ajax({
        url: base_url + 'dropshiper/edit',
        data: {
            id: id
        },
        method: 'POST',
        dataType: 'json',
        beforeSend: function() {
            $('body').loading();
        },
        success: function(data) {
            $("#id_dropship").val(data.id);
            $("#id_pelanggan").val(data.id_pelanggan);
            $("#nama_toko").val(data.toko);
            $("#nama_pemilik").val(data.pemilik);
            $("#nama_ttd").val(data.nama_ttd);
            $("#telp_toko").val(data.telp);
            $("#email_toko").val(data.email);
            $("#alamat_surat").val(data.alamat_surat);
            $("#rekening_toko").val(data.rekening);
            $("#alamat_toko").val(data.alamat);
            $("#persen").val(data.persen);
            $("#warna_lunas").val(data.warna_lunas);
            $("#warna_blunas").val(data.warna_blunas);
            $("#aktif").val(data.aktif);
            $("#picker1").css("background-color", data.warna_lunas);
            $("#picker2").css("background-color", data.warna_blunas);

            $('#imglogo1').attr("src", data.logo_lunas);
            $('#imglogo2').attr("src", data.logo_blunas);
            $('#stamp_lunas').attr("src", data.stamp_lunas);
            $('#stamp_blunas').attr("src", data.stamp_blunas);
            $('body').loading('stop');
        },
        error: function(res, status, httpMessage) {
            $('body').loading('stop');
            console.log(res.status)
            if (res.status == 401) {
                sweet_login(httpMessage, 'warning', base_url);
            } else {
                sweet("Peringatan!!!", httpMessage, "warning", "warning");
            }
        }
    });
});

$("#form_update_dropship").submit(function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(element) {
                if (element.lengthComputable) {
                    var percentComplete = ((element.loaded / element.total) * 100);
                    $("#file-progress-bar").width(percentComplete + '%');
                    $("#file-progress-bar").html(percentComplete + '%');
                }
            }, false);
            return xhr;
        },
        url: base_url + '/dropshiper/update',
        type: 'POST',
        data: formData,
        dataType: 'json',
        contentType: false,
        processData: false,
        cache: false,
        beforeSend: function() {
            $("body").loading({
                zIndex: 1051,
                message: 'saving data'
            });
            $("#file-progress-bar").width('0%');
        },
        success: function(data) {

            $('#modal-dropship').modal('hide');

            $("#file-progress-bar").width('0%');

            $('.form-submit').attr('disabled', false);
            search_Dropship();
            $("body").loading('stop');
        },
        error: function(res, status, httpMessage) {
            $('body').loading('stop');
            console.log(res.status)
            if (res.status == 401) {
                // sweet_login(httpMessage,'warning',base_url);
            } else {
                // sweet("Peringatan!!!", httpMessage, "warning", "warning");
            }
        }
    })
    return false;
});
$(".custom-file").change(function() {
    $("body").loading('stop');
});

$(document).on('click', '.hapus', function(e) {
    var id = $("#data-hapus").val();
    var halaman = $("#halaman").val();
    $.ajax({
        url: base_url + 'dropshiper/delete',
        data: {
            id: id
        },
        method: 'POST',
        dataType: 'json',
        beforeSend: function() {
            $('body').loading();
        },
        success: function(data) {
            if (data.status == 200) {
                $('#confirm-delete').modal('hide');
                showNotif('bottom-right', 'Hapus data', data.msg, 'success');
            } else {
                showNotif('bottom-right', 'Hapus data', data.msg, 'error');
            }
            search_Dropship(halaman);
            $('body').loading('stop');
        },
        error: function(res, status, httpMessage) {
            $('#confirm-delete').modal('hide');
            $('body').loading('stop');
            console.log(res.status)
            if (res.status == 401) {
                sweet_login(httpMessage, 'warning', base_url);
            } else {
                sweet("Peringatan!!!", httpMessage, "warning", "warning");
            }
        }
    });
});
$('#confirm-delete').on('show.bs.modal', function(e) {
    $('#data-hapus').val($(e.relatedTarget).data('id'));
});
$('body').on('hidden.bs.modal', '.modal', function() {
    //$('.form-group > .col-md-8 >.form-control').val('')
});

$('#nama_pemilik').autocomplete({
    source: function(request, response) {
        $.ajax({
            url: base_url + 'dropshiper/ajax_cari_pemilik',
            dataType: "json",
            method: 'post',
            data: {
                name_startsWith: request.term,
                type: 'konsumen_cari',
                row_num: 1
            },
            success: function(data) {
                response($.map(data, function(item) {
                    var code = item.split("|");
                    return {
                        label: code[0],
                        value: code[1],
                        data: item
                    }
                }));
            }
        });
    },

    autoFocus: true,
    minLength: 3,
    select: function(event, ui) {
        if (ui.item.data == 'Data tidak ditemukan') {

            $('#nama_pemilik').val('');
            $('#id_pelanggan').val('');

            return false;
        }
        var names = ui.item.data.split("|");
        $('#nama_pemilik').val(names[1]);
        $('#id_pelanggan').val(names[3]);
    },
    change: function(event, ui) {
        var names = ui.item.data.split("|");

    }
});
</script>