@include('master.header')
<div class="main-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">
                        <h4 class="mb-0">{{$config['title']}}</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                @foreach($config['breadcrumbs'] ?? array() as $item)
                                <li class="breadcrumb-item"><a
                                        href="{{ $item['url'] ?? '#' }}">{{ $item['title'] ?? '' }}</a></li>
                                @endforeach
                            </ol>
                        </div>

                    </div>
                </div>
            </div>

            
          
            <div class="card">
                <div class="card-header">
                    Data Survey
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <h5 class="card-title mb-3">{{$survey->judul}}</h5>
                        @if($survey->status == 0)
                            <div class="badge mb-2 bg-danger-transparent rounded-pill text-danger p-2 px-3">Non Aktif</div>
                        @else
                            <div class="badge mb-2 bg-success-transparent rounded-pill text-success p-2 px-3">Aktif</div>
                        @endif
                        <p class="card-text mb-0">Tahun {{$survey->tahun}}</p>
                        <p class="card-text"><small class="text-muted">Periode <span class="fw-bold">{{date('d M Y', strtotime($survey->tgl_mulai))}}</span> sd <span class="fw-bold">{{date('d M Y', strtotime($survey->tgl_berakhir))}}</span></small></p>
                        <a href="{{route('survey.edit', $survey->id)}}" class="btn btn-sm btn-info"><i class="fa fa-edit"></i> Edit</a>
                    </div>
                </div>
                
                <div class="card-body">
                    <ul class="nav nav-pills justify-content-center">
                        <li class="nav-item">
                        <a class="nav-link" href="{{route('survey.show', $survey->id)}}"><i class="bx bx-tachometer"></i> Dashboard</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="{{route('survey.kelola', $survey->id)}}"><i class="bx bx-user"></i> Kelola Surveyor</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="{{route('survey.data', $survey->id)}}"><i class="bx bx-line-chart"></i> Data Survey</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="{{route('survey.laporan', $survey->id)}}"><i class="bx bx-pie-chart"></i> Laporan</a>
                        </li>
                    </ul>
                </div>

            </div>

            <div class="row">
                <div class="col-sm-12 col-lg-12">
                    <div class="card">
                    <div class="card-header justify-content-between">
                        <div class="header-title">
                        <div class="row">
                            <div class="col-sm-6 col-lg-6">
                                <h4 class="card-title">{{$config['title']}} </h4>
                            </div>
                            <div class="col-sm-6 col-lg-6">
                                <a href="{{route('survey.laporanlaporan', $survey->id)}}" class="btn btn-success float-end">
                                    <i class='bx bxs-file-doc'></i> Laporan
                                </a>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                        <table id="dt" class="table table-bordered w-100">
                            <thead>
                                <tr>
                                    <th rowspan="2" data-priority="1">Rekening</th>
                                    <th rowspan="2" data-priority="2">Nama Barang</th>
                                    <th rowspan="2">Deskripsi</th>
                                    <th rowspan="2" data-priority="3">Spesifikasi</th>
                                    <th rowspan="2">Satuan</th>
                                    <th rowspan="2">Satuan 2</th>
                                    <th rowspan="2">Satuan 3</th>
                                    <th rowspan="2">Klasifikasi</th>
                                    <th colspan="4" class="text-center">Harga Tahun Survey</th>
                                    <th rowspan="2">Jenis Satuan</th>
                                    <th rowspan="2">Merek</th>
                                    <th rowspan="2">Toko</th>
                                </tr>
                                <tr>
                                    <th data-priority="3">Terkecil</th>
                                    <th data-priority="4">Tengah</th>
                                    <th data-priority="5">Besar</th>
                                    <th data-priority="6">Rata-Rata</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        </div>
                    </div>
                    </div>
                </div>
              </div>

            
        </div> 
    </div>
@include('master.footer')
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.2/moment.min.js"></script>
    <script>
      $(document).ready(function () {
        $('#dt').dataTable({

            responsive: true,
            serverSide: true,
            processing: true,
            lengthMenu: [
                [ 10, 25, 50, -1 ],
                [ '10', '25', '50', 'All' ]
            ],
            ajax: {
            url: `{{ route('survey.laporan', $survey->id) }}`
            },
            columns : [
                { data:'path_rekening', name :'path_rekening', responsivePriority: 12, width:'300px' },
                { data:'nama_item', name :'nama_item', responsivePriority: 1 },
                { data:'deskripsi', name :'deskripsi' },
                {
                    data:'spesifikasi',
                    name :'spesifikasi',
                    responsivePriority: 2,
                    render: function(data){
                        let json = JSON.parse(data.replace(/&quot;/g,'"'));
                            let spesifikasi = [];
                            Object.keys(json).forEach(key => {
                                spesifikasi.push(`${key}:${json[key]}`);
                            });
                            return `<ul><li>`+ spesifikasi.join(`</li><li>`) +`</li></ul>`;
                    }
                },
                { data:'satuan_1', name :'satuan_1', responsivePriority: 3 },
                { data:'satuan_2', name :'satuan_2' },
                { data:'satuan_3', name :'satuan_3' },
                { data:'klasifikasi', name :'klasifikasi' },
                { data:'harga_terkecil', name :'harga_terkecil', responsivePriority: 4, render : $.fn.dataTable.render.number( '.', ',', 0, '', '' ) },
                { data:'harga_tengah', name :'harga_tengah', responsivePriority: 5, render : $.fn.dataTable.render.number( '.', ',', 0, '', '' ) },
                { data:'harga_tertinggi', name :'harga_tertinggi', responsivePriority: 6, render : $.fn.dataTable.render.number( '.', ',', 0, '', '' ) },
                { data:'harga_rata_rata', name :'harga_rata_rata', responsivePriority: 7, render : $.fn.dataTable.render.number( '.', ',', 0, '', '' ) },
                { data:'nama_jenis_satuan', name :'nama_jenis_satuan' },
                { data:'nama_merek', name :'nama_merek' },
                { data:'nama_toko', name :'nama_toko' }
            ],
            rowCallback : function(row, data) {
            }
            });
      });
    </script>
   </body>
</html>