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

<style>
    .tabel-edf3f4 {
        border-collapse: collapse;
        font-size: 13px;
        width: 100%;
    }

    .tabel-edf3f4 th,
    .tabel-edf3f4 td {
        border: 1px solid #edf3f4;
        padding: 8px;
    }

    .tabel-edf3f4 tr>td:first-child,
    .tabel-edf3f4 tr>th:first-child {
        background-color: #edf3f4;
        color: #379ff8;
        font-weight: 600;
    }
</style>

@php
$data = $response['datas'][0] ?? [];

$nama_perusahaan = $data['cabang'] ?? '-';
$logo = $data['logo_file'] ?? '';
$type_lembaga = $data['type_lembaga'] ?? '-';
$type_kepemilikan = $data['type_kepemilikan'] ?? '-';
$no_npwp = $data['no_npwp'] ?? '-';
$nama_dirut = $data['nama_dirut'] ?? '-';
$telephone = $data['telephone'] ?? '-';
$fax = $data['fax'] ?? '-';
$email = $data['email'] ?? '-';
@endphp

<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 Detail</h3>
                    <h6 class="fw-normal mb-0">
                        Data Perusahaan <i class="fa fa-angle-double-right"></i>
                        Detail
                    </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">
                            <!-- tombol / dropdown -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="row">
        <div class="col-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    {{-- ALERT JIKA API ERROR --}}
                    @if (!empty($api_error))
                    <div class="alert alert-danger">
                        {{ $api_error }}
                    </div>
                    @endif
                    <h4 class="card-title">{{ $nama_perusahaan }}</h4>
                    <div class="row">
                        <div class="col-4 text-center">
                            @if($logo)
                            <img src="{{ $logo }}" width="150px" class="img-fluid mt-5 mb-5">
                            @else
                            <p><em>Logo tidak tersedia</em></p>
                            @endif
                        </div>
                        <div class="col-8">
                            <div style="text-align: center; border:1px solid #edf3f4">
                                <table class="tabel-edf3f4">
                                    <tr>
                                        <td style="width:25%; text-align:left">Lembaga</td>
                                        <td style="text-align:right">{{ $type_lembaga }}</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left">Kepemilikan</td>
                                        <td style="text-align:right">{{ $type_kepemilikan }}</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left">NPWP Perusahaan</td>
                                        <td style="text-align:right">{{ $no_npwp }}</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left">Direktur</td>
                                        <td style="text-align:right">{{ $nama_dirut }}</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left">Telepon / Fax</td>
                                        <td style="text-align:right">{{ $telephone }} / {{ $fax }}</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left">Email</td>
                                        <td style="text-align:right">{{ $email }}</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left">Contact Person</td>
                                        <td style="text-align:right">Rp. 630.000</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left">Wilayah</td>
                                        <td style="text-align:right">Rp. 200.000</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('partials.external.footer')

<!-- JS dan plugin -->
<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" type="text/javascript"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dashboard.js"></script>

<script>
    $(document).ready(function() {
        $('#example').DataTable();
    });
</script>

@endsection