@php
    $isPPICSS = session('user')->idroles === 'PPICSS';
    $isRSPION = session('user')->idroles === 'rspion';
    $isSCRITY = session('user')->idroles === 'scrity';
    $isADMINS = session('user')->idroles === 'admins';
    $isVIEWER = session('user')->idroles === 'VIEWER';
    $isjishuk = session('user')->idroles === 'jishuk';
    $feat = session('user')->idroles === 'featms';

    // Helper function to check if user has access
    $hasAccess = function ($section) use ($isPPICSS, $isRSPION, $isSCRITY, $isADMINS, $isVIEWER, $feat, $isjishuk) {
        if ($isADMINS || $isVIEWER) {
            return true;
        }

        switch ($section) {
            case 'bukutamu':
                return $isRSPION || $isSCRITY || $feat;
            case 'bongkarmuat':
                return $isPPICSS || $isSCRITY || $feat;
            case 'panggilan':
                return $isRSPION;
            case 'jishuken':
                return $isjishuk;
            default:
                return false;
        }
    };
@endphp

@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Dashboard'])
    <div class="container-fluid py-4">
        <!-- Update the card sections to match the new data -->
        <div class="row">
            @if ($hasAccess('bukutamu'))
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <a href="{{ route('trtamu.index') }}" class="text-decoration-none">
                        <div class="card cursor-pointer">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Buku Tamu (Ongoing)</p>
                                            <h5 class="font-weight-bolder text-primary">
                                                {{ $bukuTamuOngoing }}
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                            <i class="ni ni-book-bookmark text-lg opacity-10" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endif

            @if ($hasAccess('bongkarmuat'))
                <div class="col-xl-4 col-sm-6">
                    <a href="{{ route('trbgmt.index') }}" class="text-decoration-none">
                        <div class="card cursor-pointer">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Bongkar/Muat (Ongoing)
                                            </p>
                                            <h5 class="font-weight-bolder text-warning">
                                                {{ $bongkarMuatOngoing }}
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                            <i class="ni ni-delivery-fast text-lg opacity-10" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endif

            @if ($hasAccess('bukutamu'))
                <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <a href="{{ route('trtamu.index') }}" class="text-decoration-none">
                        <div class="card cursor-pointer">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Buku Tamu Selesai Hari
                                                Ini</p>
                                            <h5 class="font-weight-bolder text-success">
                                                {{ $bukuTamuSelesai }}
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                            <i class="ni ni-check-bold text-lg opacity-10" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endif
        </div>

        <!-- Second Row -->
        <div class="row mt-4">
            @if ($hasAccess('panggilan'))
                <div class="col-xl-4 col-sm-6">
                    <a href="{{ route('trlogp.index') }}" class="text-decoration-none">
                        <div class="card cursor-pointer">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Panggilan Masuk</p>
                                            <h5 class="font-weight-bolder text-info">
                                                {{ $panggilanMasuk }}
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-info shadow-info text-center rounded-circle">
                                            <i class="fa fa-phone text-lg opacity-10" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-xl-4 col-sm-6">
                    <a href="{{ route('trlogp.index') }}" class="text-decoration-none">
                        <div class="card cursor-pointer">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Panggilan Keluar</p>
                                            <h5 class="font-weight-bolder text-success">
                                                {{ $panggilanKeluar }}
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                            <i class="fa fa-headphones text-lg opacity-10" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endif

            @if ($hasAccess('bongkarmuat'))
                <div class="col-xl-4 col-sm-6">
                    <a href="{{ route('trbgmt.index') }}" class="text-decoration-none">
                        <div class="card cursor-pointer">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Bongkar/Muat Selesai
                                                Hari Ini</p>
                                            <h5 class="font-weight-bolder text-success">
                                                {{ $bongkarMuatSelesai }}
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                            <i class="ni ni-check-bold text-lg opacity-10" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endif

            @if ($hasAccess('jishuken'))
                <div class="row">
                    <div class="col-md-4 mt-4">
                        <div class="card shadow-sm border-0 cursor-pointer" data-bs-toggle="modal"
                            data-bs-target="#modalBukuTamu">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-1">Personel Estimasi (Buku Tamu)</h6>
                                <h3 class="text-primary">{{ $personelbukutamu }}</h3>
                            </div>
                        </div>
                    </div>

                    <!-- Bongkar Muat -->
                    <div class="col-md-4 mt-4">
                        <div class="card shadow-sm border-0 cursor-pointer" data-bs-toggle="modal"
                            data-bs-target="#modalBongkarMuat">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-1">Personel Estimasi (Bongkar Muat)</h6>
                                <h3 class="text-success">{{ $personelbongkarmuat }}</h3>
                            </div>
                        </div>
                    </div>

                    <!-- Total -->
                    <div class="col-md-4 mt-4">
                        <div class="card shadow-sm border-0 bg-light">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-1">Total Personel Estimasi</h6>
                                <h3 class="text-dark">{{ $personelbukutamu + $personelbongkarmuat }}</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal Buku Tamu -->
                <div class="modal fade" id="modalBukuTamu" tabindex="-1" aria-labelledby="modalBukuTamuLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Detail Personel Estimasi - Buku Tamu</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <div class="table-responsive">
                                    <table id="detailbukutamu" class="table table-sm table-striped">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>No</th>
                                                <th>Nama Instansi</th>
                                                <th>Tanggal Masuk</th>
                                                <th>Jam Masuk</th>
                                                <th>Jumlah Personel</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($detailbukutamu as $row)
                                                <tr>
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ $row->Instansi }}</td>
                                                    <td>{{ \Carbon\Carbon::parse($row->TanggalMasuk)->format('d/m/Y') }}
                                                    <td>{{ $row->JamMasuk }}</td>
                                                    <td style="text-align:right;">{{ $row->JumlahPersonel }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal Bongkar Muat -->
                <div class="modal fade" id="modalBongkarMuat" tabindex="-1" aria-labelledby="modalBongkarMuatLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Detail Personel Estimasi - Bongkar Muat</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <div class="table-responsive">
                                    <table id="detailbongkarmuat" class="table table-sm table-striped">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>No</th>
                                                <th>Nama Ekspedisi</th>
                                                <th>Tanggal Masuk</th>
                                                <th>Jam Masuk</th>
                                                <th>Jumlah Personel</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($detailbongkarmuat as $row)
                                                <tr>
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ $row->Nama_Ekspedisi }}</td>
                                                    <td>{{ \Carbon\Carbon::parse($row->TanggalMasuk)->format('d/m/Y') }}
                                                    <td>{{ $row->JamMasuk }}</td>
                                                    <td style="text-align:right;">{{ $row->JumlahPersonel }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        @if ($hasAccess('jishuken'))
            <div class="row mt-4">

                <div class="col-lg-12 mb-lg-0 mb-4">
                    <div class="card">
                        <div class="card-header pb-0 p-3">
                            <h6 class="mb-0">Transactions</h6>
                        </div>
                        <div class="card-body p-3">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                @if ($hasAccess('bukutamu'))
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="buku-tamu-tab" data-bs-toggle="tab"
                                            data-bs-target="#buku-tamu" type="button" role="tab"
                                            aria-controls="buku-tamu" aria-selected="true">Buku Tamu</button>
                                    </li>
                                @endif

                                @if ($hasAccess('bongkarmuat'))
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="bongkar-muat-tab" data-bs-toggle="tab"
                                            data-bs-target="#bongkar-muat" type="button" role="tab"
                                            aria-controls="bongkar-muat" aria-selected="false">Bongkar/Muat</button>
                                    </li>
                                @endif

                                @if ($hasAccess('panggilan'))
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="panggilan-tab" data-bs-toggle="tab"
                                            data-bs-target="#panggilan" type="button" role="tab"
                                            aria-controls="panggilan" aria-selected="false">Log Panggilan</button>
                                    </li>
                                @endif
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                @if ($hasAccess('bukutamu'))
                                    <!-- Buku Tamu Tab -->
                                    <div class="tab-pane fade show active" id="buku-tamu" role="tabpanel"
                                        aria-labelledby="buku-tamu-tab">
                                        <div class="table-responsive">
                                            <table class="table align-items-center mb-0">
                                                <thead>
                                                    <tr>
                                                        <th
                                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                            Nama Tamu</th>
                                                        <th
                                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                            Instansi</th>
                                                        <th
                                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                            Tanggal Masuk</th>
                                                        <th
                                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                            Jam Masuk</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($bukuTamu as $tamu)
                                                        <tr>
                                                            <td>
                                                                <div class="d-flex px-2 py-1">
                                                                    <div class="d-flex flex-column justify-content-center">
                                                                        <h6 class="mb-0 text-sm">{{ $tamu->NamaTamu }}
                                                                        </h6>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <p class="text-xs font-weight-bold mb-0">
                                                                    {{ $tamu->Instansi }}
                                                                </p>
                                                            </td>
                                                            <td class="align-middle text-center text-sm">
                                                                <span
                                                                    class="text-secondary text-xs font-weight-bold">{{ $tamu->TanggalMasuk }}</span>
                                                            </td>
                                                            <td class="align-middle text-center">
                                                                <span
                                                                    class="text-secondary text-xs font-weight-bold">{{ $tamu->JamMasuk }}</span>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                @endif

                                @if ($hasAccess('bongkarmuat'))
                                    <!-- Bongkar/Muat Tab -->
                                    <div class="tab-pane fade" id="bongkar-muat" role="tabpanel"
                                        aria-labelledby="bongkar-muat-tab">
                                        <div class="table-responsive">
                                            <table class="table align-items-center mb-0">
                                                <thead>
                                                    <tr>
                                                        <th
                                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                            Nama Tamu</th>
                                                        <th
                                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                            Instansi</th>
                                                        <th
                                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                            Tanggal Masuk</th>
                                                        <th
                                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                            Jam Masuk</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($bongkarMuat as $bm)
                                                        <tr>
                                                            <td>
                                                                <div class="d-flex px-2 py-1">
                                                                    <div class="d-flex flex-column justify-content-center">
                                                                        <h6 class="mb-0 text-sm">{{ $bm->Nomor_Polisi }}
                                                                        </h6>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <p class="text-xs font-weight-bold mb-0">
                                                                    {{ $bm->NamaSopir }}
                                                                </p>
                                                            </td>
                                                            <td class="align-middle text-center text-sm">
                                                                <span
                                                                    class="text-secondary text-xs font-weight-bold">{{ $bm->TanggalMasuk }}</span>
                                                            </td>
                                                            <td class="align-middle text-center">
                                                                <span
                                                                    class="text-secondary text-xs font-weight-bold">{{ $bm->JamMasuk }}</span>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                @endif

                                @if ($hasAccess('panggilan'))
                                    <!-- Log Panggilan Tab -->
                                    <div class="tab-pane fade" id="panggilan" role="tabpanel"
                                        aria-labelledby="panggilan-tab">
                                        <div class="table-responsive">
                                            <table class="table align-items-center mb-0">
                                                <thead>
                                                    <tr>
                                                        <th
                                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                            Tipe Panggilan</th>
                                                        <th
                                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                            No Telepon</th>
                                                        <th
                                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                            Penelpon</th>
                                                        <th
                                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                            Penerima</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($panggilanLog as $log)
                                                        <tr>
                                                            <td>
                                                                <div class="d-flex px-2 py-1">
                                                                    <div class="d-flex flex-column justify-content-center">
                                                                        <h6 class="mb-0 text-sm">
                                                                            {{ ucfirst($log->call_type) }}</h6>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <p class="text-xs font-weight-bold mb-0">
                                                                    {{ $log->nomor_telepon }}</p>
                                                            </td>
                                                            <td class="align-middle text-center text-sm">
                                                                <span
                                                                    class="text-secondary text-xs font-weight-bold">{{ $log->penelpon }}</span>
                                                            </td>
                                                            <td class="align-middle text-center text-sm">
                                                                <span
                                                                    class="text-secondary text-xs font-weight-bold">{{ $log->penerima }}</span>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('js')
    <script src="./assets/js/plugins/chartjs.min.js"></script>
    <script>
        $('#detailbukutamu').DataTable({
            "order": [
                [1, 'asc']
            ],
            "responsive": true, // Membuat tabel responsif
            "language": {
                "sEmptyTable": "Tidak ada data yang tersedia pada tabel ini",
                "sProcessing": "Sedang memproses...",
                "sLengthMenu": "Tampilkan _MENU_ Data",
                "sZeroRecords": "Tidak ditemukan data yang sesuai",
                "sInfo": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "sInfoEmpty": "Menampilkan 0 sampai 0 dari 0 data",
                "sInfoFiltered": "(disaring dari _MAX_ total data)",
                "sInfoPostFix": "",
                "sSearch": "Cari:",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "Pertama",
                    "sPrevious": "Sebelumnya",
                    "sNext": "Selanjutnya",
                    "sLast": "Terakhir"
                },
                "oAria": {
                    "sSortAscending": ": aktifkan untuk mengurutkan kolom secara ascending",
                    "sSortDescending": ": aktifkan untuk mengurutkan kolom secara descending"
                }
            }
        });

        $('#detailbongkarmuat').DataTable({
            "order": [
                [1, 'asc']
            ],
            "responsive": true, // Membuat tabel responsif
            "language": {
                "sEmptyTable": "Tidak ada data yang tersedia pada tabel ini",
                "sProcessing": "Sedang memproses...",
                "sLengthMenu": "Tampilkan _MENU_ Data",
                "sZeroRecords": "Tidak ditemukan data yang sesuai",
                "sInfo": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                "sInfoEmpty": "Menampilkan 0 sampai 0 dari 0 data",
                "sInfoFiltered": "(disaring dari _MAX_ total data)",
                "sInfoPostFix": "",
                "sSearch": "Cari:",
                "sUrl": "",
                "oPaginate": {
                    "sFirst": "Pertama",
                    "sPrevious": "Sebelumnya",
                    "sNext": "Selanjutnya",
                    "sLast": "Terakhir"
                },
                "oAria": {
                    "sSortAscending": ": aktifkan untuk mengurutkan kolom secara ascending",
                    "sSortDescending": ": aktifkan untuk mengurutkan kolom secara descending"
                }
            }
        });

        var ctx1 = document.getElementById("chart-line").getContext("2d");
        var gradientStroke1 = ctx1.createLinearGradient(0, 230, 0, 50);

        gradientStroke1.addColorStop(1, 'rgba(251, 99, 64, 0.2)');
        gradientStroke1.addColorStop(0.2, 'rgba(251, 99, 64, 0.0)');
        gradientStroke1.addColorStop(0, 'rgba(251, 99, 64, 0)');

        new Chart(ctx1, {
            type: "line",
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "Transactions",
                    tension: 0.4,
                    borderWidth: 0,
                    pointRadius: 0,
                    borderColor: "#fb6340",
                    backgroundColor: gradientStroke1,
                    borderWidth: 3,
                    fill: true,
                    data: @json($chartData),
                    maxBarThickness: 6
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            padding: 10,
                            color: '#fbfbfb',
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: false,
                            drawOnChartArea: false,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            color: '#ccc',
                            padding: 20,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                },
            },
        });
    </script>
    <style>
        .cursor-pointer {
            cursor: pointer;
        }
    </style>
@endpush