<script>
    $(function() {
        // adjust height of detail sections based on drawer height
        $("#detail-pelanggan>div").height($("#drawer").height() + $("#drawer").offset().top - $("#detail-pelanggan>div").offset().top + 24);
        // reset modal
        $("#tampil_form .card-body").html("");

        var periode = get_periode();

        loading("#detail-layanan");
        loading("#detail-aktivitas");

        $("#detail-perusahaan").load("<?= route('sales_activity.kanban.detail.perusahaan', ['id' => $id, 'periode' => '" + periode + "']) ?>");
        $("#detail-layanan").load("<?= route('sales_activity.kanban.detail.layanan', ['id' => $id]) ?>");
        $("#detail-aktivitas").load("<?= route('sales_activity.kanban.detail.aktivitas', ['id' => $id]) ?>");
    })
</script>
<style>
    .divider-light {
        border-color: #d8d8d8 !important;
    }

    .text-biru {
        color: #1c77d4;
    }

    #detail-pelanggan ::-webkit-scrollbar {
        width: 4px;
    }

    #detail-pelanggan ::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }

    #detail-pelanggan ::-webkit-scrollbar-thumb {
        background-color: #888;
    }
</style>
<div class="row">
    <div id="detail-pelanggan" class="col-8">
        <div class="d-flex flex-column" style="overflow-x: hidden;overflow-y: auto;">
            <div id="detail-perusahaan">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="custom-loader" style="margin: 0.3rem 1rem"></span>
                </div>
                <hr>
                <div>
                    <div class="form-group pb-1 loading-skeleton">
                        <label class="font-weight-bold mb-1 text-biru">Data Perusahaan</label>
                        <div class="row loading-skeleton">
                            <div class="col-12">
                                <label>Nama Perusahaan</label>
                                <br>
                                <label class="font-weight-bold">Nama Perusahaan</label>
                            </div>
                            <div class="col-6">
                                <label>Jenis Perusahaan</label>
                                <br>
                                <label class="font-weight-bold">Jenis</label>
                            </div>
                            <div class="col-6">
                                <label>Lead Source</label>
                                <br>
                                <label class="font-weight-bold">Lead Source</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group pb-1 loading-skeleton">
                        <label class="font-weight-bold mb-1 text-biru">Alamat Perusahaan</label>
                        <div class="row loading-skeleton">
                            <div class="col-12">
                                <label><?= $this->lang->line('alamat') ?></label>
                                <br>
                                <label class="font-weight-bold">Alamat</label>
                            </div>
                            <div class="col-6">
                                <label><?= $this->lang->line('provinsi') ?></label>
                                <br>
                                <label class="font-weight-bold">Provinsi</label>
                            </div>
                            <div class="col-6">
                                <label><?= $this->lang->line('kota') ?></label>
                                <br>
                                <label class="font-weight-bold">Kota</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group pb-1 loading-skeleton">
                        <label class="font-weight-bold mb-1 text-biru">Data PIC</label>
                        <div class="row loading-skeleton">
                            <div class="col-4">
                                <label><?= $this->lang->line('nama') ?></label>
                                <br>
                                <label class="font-weight-bold">Nama PIC</label>
                            </div>
                            <div class="col-4">
                                <label><?= $this->lang->line('email') ?></label>
                                <br>
                                <label class="font-weight-bold">Email PIC</label>
                            </div>
                            <div class="col-4">
                                <label><?= $this->lang->line('no_telp') ?></label>
                                <br>
                                <label class="font-weight-bold">Telepon PIC</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group pb-1 loading-skeleton">
                        <label class="font-weight-bold mb-1 text-biru">Data Sales</label>
                        <div class="row loading-skeleton">
                            <div class="col-4">
                                <label><?= $this->lang->line('nama') ?></label>
                                <br>
                                <label class="font-weight-bold">Nama Sales</label>
                            </div>
                            <div class="col-4">
                                <label><?= $this->lang->line('email') ?></label>
                                <br>
                                <label class="font-weight-bold">Email Sales</label>
                            </div>
                            <div class="col-4">
                                <label><?= $this->lang->line('no_telp') ?></label>
                                <br>
                                <label class="font-weight-bold">Telepon Sales</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group pb-1 loading-skeleton">
                        <label class="font-weight-bold mb-1 text-biru">Deskripsi</label>
                        <div class="row loading-skeleton">
                            <div class="col-12">
                                <label>Judul</label>
                                <br>
                                <label class="font-weight-bold">Judul project</label>
                            </div>
                            <div class="col-12">
                                <label>keterangan</label>
                                <br>
                                <label class="font-weight-bold">Keterangan dari project atau pipline yang dibuat</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="detail-layanan"></div>
        </div>
    </div>
    <div class="col-4 border-left divider-light">
        <div id="detail-aktivitas"></div>
    </div>
</div>
