@extends('layouts.external.app')
@section('content')

{{-- TODO: IMPLEMENTASI ROLE BASED PAGE INTEGRASI DENGAN JARVIS --}}

<div class="content-wrapper p-5">
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row">
                <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                    <h3 class="fw-bold">Data Perusahaan</h3>
                    <h6 class="fw-normal mb-0">Daftar Perusahaan</h6>
                </div>
                <div class="col-12 col-xl-4">
                    <div class="justify-content-end d-flex">
                        <div class="dropdown flex-md-grow-1 flex-xl-grow-0">
                            <a href="{{ url('v3/dataperusahaan/tambah') }}" class="btn btn-primary btn-sm">
                                <i class="fa fa-plus"> Perusahaan</i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    {{-- ALERT CONTAINER --}}
                    <div id="api-error-container"></div>

                    <div class="table-responsive">
                        <table id="cabang-table" class="table table-striped table-borderless" width="100%">
                            <thead>
                                <tr>
                                    <th class="text-center" style="font-size: 13px;">#</th>
                                    <th class="text-center" style="font-size: 13px;">Direktur</th>
                                    <th class="text-center" style="font-size: 13px;">Nama <br>Perusahaan</th>
                                    <th class="text-center" style="font-size: 13px;">Lembaga</th>
                                    <th class="text-center" style="font-size: 13px;">Kepemilikan</th>
                                    <th class="text-center" style="font-size: 13px;">Alamat</th>
                                    <th class="text-center" style="font-size: 13px;">Kontak</th>
                                    <th class="text-center" style="font-size: 13px;">Input By</th>
                                    <th class="text-center" style="font-size: 13px;">Aksi</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('partials.external.footer')

<!-- JS plugins -->
<script src="{{ url('/') }}/skydash/src/assets/vendors/js/vendor.bundle.base.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/vendors/chart.js/chart.umd.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dataTables.min.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dataTables.bootstrap5.min.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dataTables.select.min.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/off-canvas.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/template.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/settings.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/jquery.cookie.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dashboard.js"></script>

<script>
    $(document).ready(function() {
        $('#cabang-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route("showcabang") }}',
                dataSrc: function(json) {
                    if (json.error) {
                        $('#api-error-container').html(`
                        <div class="alert alert-danger">
                            ${json.error}
                        </div>
                    `);
                    } else {
                        $('#api-error-container').html('');
                    }
                    return json.data;
                },
                error: function(xhr, status, error) {
                    $('#api-error-container').html(`
                    <div class="alert alert-danger">
                        Data sources timeout, please refresh page!
                    </div>
                `);
                }
            },
            columns: [{
                    data: 'no_urut',
                    title: '#',
                    className: 'text-center',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'nama_direktur',
                    name: 'nama_direktur',
                    className: 'text-center'
                },
                {
                    data: 'cabang',
                    render: function(data, type, row, meta) {
                        const token = row.token;
                        const cabang = row.cabang || '-';
                        const progress = parseInt(row.progress) || 0;
                        const detailUrl = `{{ route('detail.dataperusahaan', ['token' => '__TOKEN__']) }}`.replace('__TOKEN__', token);

                        let content = `
                                        <div class="w-100 ms-3">
                                            <div class="d-flex w-100 justify-content-between">
                                                <h6 class="mb-0"><b>
                                                <a href="${detailUrl}">
                                                ${cabang}
                                                </a>
                                                </b></h6>
                                            </div>
                                            <br>
                                            <span>Document Progress</span>`;

                        if (progress === 100) {
                            content += `<br><span class="badge bg-success mt-1">Completed</span>`;
                        } else {
                            content += `<br>
                                    <div class="progress mt-1" style="height:15px;margin-top:5px">
                                        <div class="progress-bar bg-danger" role="progressbar"
                                            style="width: ${progress}%" aria-valuenow="${progress}"
                                            aria-valuemin="0" aria-valuemax="100">
                                            ${progress}%
                                        </div>
                                    </div>`;
                        }

                        content += `</div>`; // tutup div utama
                        return content;
                    }
                },
                {
                    data: 'type_lembaga',
                    name: 'type_lembaga',
                    className: 'text-center'
                },
                {
                    data: 'type_kepemilikan',
                    name: 'type_kepemilikan',
                    className: 'text-center'
                },
                {
                    data: 'alamat',
                    name: 'alamat',
                    render: function(data) {
                        return `<div style="word-break: break-word; white-space:normal; line-height:19px">${data}</div>`;
                    }
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        return `
                        <div style="display: flex; flex-direction: column; line-height:19px">
                            <div class="row">
                                <div class="col-md">
                                    <i class="fa fa-phone text-primary" style="padding:7px"></i> ${row.telephone}
                                </div>
                                <div class="col-md">
                                    <i class="fa fa-fax text-primary" style="padding:7px"></i> ${row.fax}
                                </div>
                                <div class="col-md">
                                    <i class="fa fa-envelope-o text-primary" style="padding:7px"></i> ${row.email}
                                </div>
                            </div>
                        </div>`;
                    }
                },
                {
                    data: 'nama_agen',
                    name: 'nama_agen',
                    render: function(data) {
                        return `<div style="word-break: break-word; white-space:normal; line-height:19px">${data}</div>`;
                    }
                },
                {
                    data: 'id',
                    render: function(data, type, row, meta) {
                        const token = row.token;
                        let produk = row.produk;
                        const editUrl = '';
                        const detailUrl = `{{ route('detail.dataperusahaan', ['token' => '__TOKEN__']) }}`.replace('__TOKEN__', token);
                        let deleteModal = '#deleteProduk' + data;

                        return `
                        <div class="btn-group">
                            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="font-size: 13px;padding:7px">
                                Action
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a class="dropdown-item" title="Edit" href="${editUrl}" style="font-size: 13px;">
                                        Edit
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" title="Detail" href="${detailUrl}" style="font-size: 13px;">
                                        Detail
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item text-danger" title="Hapus" href="${deleteModal}" data-bs-toggle="modal" data-bs-target="${deleteModal}" data-produk="${produk}" style="font-size: 13px;">
                                        Hapus
                                    </a>
                                </li>
                            </ul>
                        </div>`;
                    },
                    orderable: false,
                    searchable: false
                }
            ],
            autoWidth: false
        });
    });
</script>
</body>

</html>
@endsection