@extends('layouts.index')

@push('css')
{{-- bootstrapt tabel plugins --}}
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<link href="https://unpkg.com/bootstrap-table@1.21.4/dist/extensions/sticky-header/bootstrap-table-sticky-header.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/custom.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}">

<style>
    .sheet-bar-wrapper {
        overflow-x: auto;
        white-space: nowrap;
        border-top: 1px solid #ddd;
        background-color: #f8f9fa;
        padding: 10px 0;
    }
    .sheet-bar {
        display: inline-flex;
        padding: 10px;
    }
    .sheet-tab {
        display: inline-block;
        margin-right: 5px;
        padding: 8px 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        background-color: #fff;
    }
    .sheet-tab.active {
        background-color: #1b82ec;
        color: #fff;
    }
    .sheet-content {
        padding: 20px;
        border: 1px solid #ddd;
        margin-top: 10px;
        background-color: #fff;
    }
    .sheet-bar-wrapper::-webkit-scrollbar {
        height: 8px;
    }
    .sheet-bar-wrapper::-webkit-scrollbar-thumb {
        background-color: #bbb;
        border-radius: 4px;
    }
    .sheet-bar-wrapper::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }
</style>
@endpush

@section('content')

<div class="page-content">
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-flex align-items-center justify-content-between">
                    <div class="page-title">
                        <h4 class="mb-0 font-size-18">Proyek Strategis</h4>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item active">Welcome to {{ env('APP_NAME') }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="page-content-wrapper">

            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between w-100 align-items-center mt-5 table-responsive">
                                @role('admin|admin-opd|monev')
                                    <form action="" class="d-flex w-100 mx-4">
                                        <div class="mx-1 w-50" style="margin-top:28px">
                                            <select name="pd" id="" class="form-control select-opd">
                                                @role('admin')
                                                    <option value="">Pilih Perangkat Daerah</option>
                                                    @foreach ($opd as $item)
                                                        <option value="{{ $item->id }}" @if($request->get('pd') == $item->id ) SELECTED @endif>{{ $item->nama_perangkat_daerah }}</option>
                                                    @endforeach
                                                @endrole

                                                @role('admin-opd|monev')
                                                    @foreach ($opd as $item)
                                                        <option value="{{ $item->id }}"  @if(Auth::user()->opd_id == $item->id ) SELECTED @endif>{{ $item->nama_perangkat_daerah }}</option>
                                                    @endforeach
                                                @endrole
                                            </select>
                                        </div>
                                    
                                        <div class="mx-1">
                                            <label for="tanggal_awal">Tanggal Awal</label>
                                            <input id="tanggal_awal" type="text" value="{{ ($request->tanggal_awal) ? $request->tanggal_awal : '' }}" name="tanggal_awal" class="form-control tanggal_awal_akhir" autocomplete="off">
                                        </div>
                                    
                                        <div class="mx-1">
                                            <label for="tanggal_akhir">Tanggal Akhir</label>
                                            <input id="tanggal_akhir" type="text" value="{{ ($request->tanggal_akhir) ? $request->tanggal_akhir : '' }}" name="tanggal_akhir" class="form-control tanggal_awal_akhir" autocomplete="off">
                                        </div>
                                    
                                        <div class="mx-1" style="margin-top:28px">
                                            <button class="btn btn-warning">Filter</button>
                                        </div>
                                    
                                        <div class="mx-1" style="margin-top:28px">
                                            <a href="{{url('/pekerjaan_mendesak')}}" class="btn btn-success">Reset</a> 
                                        </div>
                                    
                                        <div class="mx-1" style="margin-top:28px">
                                            <button class="btn btn-success" type="submit" name="printpdf" value="print">
                                                <img height="20" src="{{ asset('pdf-download-icon.png') }}" alt="download-to-pdf">
                                            </button>
                                        </div>
                                    </form>
                                    @endrole
                                <div>
                                </div>
                            </div>
                            <div class="d-flex flex-column justify-content-center w-100 align-items-around"
                                style="display: block">

                                <div class="table-responsive py-4" style="padding: 25px;">

                                    <div class="container-fluid mt-4">
                                        <!-- Scrollable Sheet Bar -->
                                        <div class="sheet-bar-wrapper">
                                            <div class="sheet-bar">
                                                @foreach ($strategis as $index => $sheet)
                                                    <div 
                                                        class="sheet-tab @if($index === 0) active @endif" 
                                                        data-sheet-id="sheet-{{ $index }}">
                                                        {{ $sheet['uraian'] }}
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                
                                        <!-- Sheet Content -->
                                        @forelse ($strategis as $index => $sheet)
                                            <div 
                                                id="sheet-{{ $index }}" 
                                                class="sheet-content @if($index !== 0) d-none @endif">

                                                <table id="table" class="table table-flush" data-height="500" data-show-columns="true">
                                                    <thead class="thead-light">
                                                        <tr class="biasa">
                                                            <th class="align-middle text-center" style="background: rgb(220, 218, 218)">No</th>
                                                            <th class="align-middle text-center" style="background: rgb(220, 218, 218)">Data</th>
                                                            <th class="align-middle text-center" style="background: rgb(220, 218, 218)">Keterangan</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td class="text-center">1</td>
                                                            <td>Nama Proyek</td>
                                                            <td>{{ $sheet->uraian }}</td>
                                                        </tr>

                                                        <tr>
                                                            <td class="text-center">2</td>
                                                            <td>Lokasi</td>
                                                            <td>{{ $sheet->RealisasiRincianKegiatan->lokasi ?? '-' }}</td>
                                                        </tr>

                                                        <tr>
                                                            <td class="text-center">3</td>
                                                            <td>Sumber Pendanaan</td>
                                                            <td>{{ $sheet->SumberDana->sumber_dana }}</td>
                                                        </tr>

                                                        <tr>
                                                            <td class="text-center">4</td>
                                                            <td>Pagu Anggaran</td>
                                                            <td>Rp{{ number_format($sheet->pagu , 0, ',', '.') }}</td>
                                                        </tr>

                                                        <tr>
                                                            <td class="text-center">5</td>
                                                            <td>Nilai Kontrak</td>
                                                            <td>Rp{{ number_format($sheet->RealisasiRincianKegiatan->nilai_kontrak , 0, ',', '.') }}</td>
                                                        </tr>

                                                        <tr>
                                                            <td class="text-center">6</td>
                                                            <td>Perangkat Daerah</td>
                                                            <td>{{ $sheet->Opd->nama_perangkat_daerah }}</td>
                                                        </tr>

                                                        <tr>
                                                            <td class="text-center">7</td>
                                                            <td>Metode Pelaksanaan</td>
                                                            <td>{{ $sheet->RealisasiRincianKegiatan->metode }}</td>
                                                        </tr>

                                                        <tr>
                                                            <td class="text-center">8</td>
                                                            <td>Penyedia</td>
                                                            <td>{{ $sheet->RealisasiRincianKegiatan->nama_penyedia ?? '-' }}</td>
                                                        </tr>

                                                        {{-- <tr>
                                                            <td class="text-center">9</td>
                                                            <td>Konsultan Pengawas</td>
                                                            <td>PT. Ciriajasa Cipta Mandiri KSO PT. Ciriajasa E.C</td>
                                                        </tr> --}}

                                                        <tr>
                                                            <td class="text-center">10</td>
                                                            <td>Masa Kontrak</td>
                                                            <td>{{ $sheet->RealisasiRincianKegiatan->masa_kontrak ?? '-' }}</td>
                                                        </tr>

                                                        <tr>
                                                            <td class="text-center">11</td>
                                                            <td>Realisasi Keuangan</td>
                                                            <td>
                                                                Rp{{ $sheet->RealisasiRincianKegiatan ? number_format($sheet->RealisasiRincianKegiatan->realisasiKeuangan->sum(function ($item) {
                                                                    return is_numeric($item->realisasi) ? $item->realisasi : 0;
                                                                    }), 0, ',', '.') : "-" }}
                                                            </td>
                                                        </tr>

                                                        <tr>
                                                            <td class="text-center">12</td>
                                                            <td>Realisasi Fisik</td>
                                                            <td>
                                                                {{
                                                                    $sheet->RealisasiRincianKegiatan
                                                                        ? number_format(
                                                                            (
                                                                                ($sheet->volume != 0)
                                                                                ? ($sheet->RealisasiRincianKegiatan->realisasiFisik->sum('realisasi') / $sheet->volume) * 100
                                                                                : 0
                                                                            ),2 , ',', '.'
                                                                        )
                                                                        : "0"
                                                                }}%
                                                            </td>
                                                        </tr>

                                                        <tr>
                                                            <td class="text-center">13</td>
                                                            <td>Masa Pemeliharaan</td>
                                                            <td>{{ $sheet->RealisasiRincianKegiatan->masa_pemeliharaan ?? '-' }}</td>
                                                        </tr>

                                                        <tr>
                                                            <td class="text-center">14</td>
                                                            <td>Dokumentasi</td>
                                                            <td>
                                                                @forelse($sheet->RealisasiRincianKegiatan->dokumen as $doc)
                                                                    <div class="file-section">
                                                                        <div class="file-info">
                                                                            <p>
                                                                                {{ $doc->keterangan == 0 ? 'Dokumen Kontrak, SK dan lain-lain' : ($doc->keterangan == 1 ? 'Dokumentasi Kegiatan' : 'Dokumen Berita Acara Serah Terima') }}
                                                                            </p>
                                                                            <p>{{ $doc->file_name }}</p>
                                                                        </div>
                                                                        <div class="file-preview">
                                                                            <img data-enlargable src="{{ asset("assets/document/$doc->file_name") }}" alt="{{ $doc->file_name }}" height="100">
                                                                        </div>
                                                                        <div class="file-actions">
                                                                            <br>
                                                                            <a href="{{route('doc.download',$doc->id)}}" class="btn btn-success"><i class="fa fa-download"></i></a>
                                                                            {{-- <a link="{{route('doc.delete',$doc->id)}}" class="btn btn-danger btn-del"><i class="fa fa-times"></i></a> --}}
                                                                        </div>
                                                                    </div>
                                                                    <hr>
                                                                @empty
                                                                    <div>
                                                                        Belum ada dokumentasi
                                                                    </div>
                                                                @endforelse
                                                            </td>                                                            
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            @empty
                                            <center>
                                                Belum ada Data
                                            </center>
                                        @endforelse
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@push('js')
{{-- bootrapt tabel --}}
<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="{{asset('assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $('img[data-enlargable]').addClass('img-enlargable').click(function(){
        var src = $(this).attr('src');
        var encodedSrc = encodeURIComponent(src); // Encode the URL

        // Create a container to display the enlarged image
        var $container = $('<div>').css({
            background: 'RGBA(0,0,0,.5)',
            width: '100%',
            height: '100%',
            position: 'fixed',
            zIndex: '10000',
            top: '0',
            left: '0',
            cursor: 'zoom-out',
        }).appendTo('body');

        // Create an image element inside the container
        $('<img>').attr('src', src).css({
            maxWidth: '100%',
            maxHeight: '100%',
            margin: 'auto',
            display: 'block',
        }).appendTo($container);

        // Click anywhere on the container to close it
        $container.click(function(){
            $(this).remove();
        });
    });
</script>

<script type="text/javascript">
    $('.select-opd').select2({
       width:'100%',
    });

    $('.tanggal_awal_akhir').datepicker({
        format:'yyyy-mm-dd',
        autoclose:true,
    });

    /*$(document).ready(function() {
        navbarHeight = parseInt($('#page-topbar').css('height'));
        $('#table').bootstrapTable({
            // stickyHeader: true,
            showFullscreen: true,
            stickyHeaderOffsetY: navbarHeight,
            theadClasses: "table-light",
        }).on('load-fullscreen.bs.table', function () {
            // Add icon when entering fullscreen mode
            $('.fullscreen.btn').html('<i class="fas fa-compress"></i> Fullscreen');
        }).on('unload-fullscreen.bs.table', function () {
            // Remove icon when exiting fullscreen mode
            $('.fullscreen.btn').html('<i class="fas fa-expand"></i> Fullscreen');
        });
    });*/

</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const tabs = document.querySelectorAll('.sheet-tab');
        const sheets = document.querySelectorAll('.sheet-content');

        tabs.forEach(tab => {
            tab.addEventListener('click', function () {
                // Remove active class from all tabs
                tabs.forEach(t => t.classList.remove('active'));

                // Hide all sheets
                sheets.forEach(sheet => sheet.classList.add('d-none'));

                // Add active class to the clicked tab
                this.classList.add('active');

                // Show the corresponding sheet
                const sheetId = this.getAttribute('data-sheet-id');
                document.getElementById(sheetId).classList.remove('d-none');
            });
        });
    });
</script>
@endpush