@extends('layouts.admin')
@section('title')
  Infografis |
@endsection
@section('css')
  <style>
  .sidebar-menu{
    width:100%;
    padding:0px 5px;
    height: 100%;
  }
  .sidebar-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .sidebar-menu ul li a i{
    color:#676767;
    font-size:20px;
    margin-right:10px;
    font-weight: 400;
    align-items:center
  }
  .sidebar-menu ul li a {
    display: flex;
    color:rgba(27, 46, 75, 0.9);
    padding: 3px 10px 3px 0px;
    text-decoration: none;
    align-items:center;
    font-size:15px;
    line-height: 1rem
  }
  .sidebar-menu ul li a:hover,
  .sidebar-menu ul li a.active{
    color:#47008d
  }
  .sidebar-menu ul li a.active{
    font-weight: 600
  }
  .sidebar-menu ul li:last-child a{
    border-bottom:none;
  }
  .content-box{
    border-left:3px solid #eaedf3;
  }
  .post ol, .post ul{
    padding-left: 20px;
  }
  .form-control:disabled, .form-control[readonly] {
    background-color: #ffffff;
  }

  .list-information{
    padding: 8px 0px;
    border-bottom: 1px solid #eaedf4;
  }
  .list-information label{
    margin-bottom:5px;
    color:#969696;
    font-weight: 400;
  }
  .list-information h6{
    margin-bottom: 0px;
  }
  .label {
    display: inline-block;
    font-weight: 400;
    padding:5px;
    line-height: 1.5384616;
    border: 1px solid transparent;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    border-radius: 0px
  }
  .date-text{
    margin-bottom:5px;
    color:#d3552f
  }
  .table thead tr th {
    border-top: 3px solid #d9dce5;
    border-bottom: 3px solid #d9dce5;
    padding: 10px 10px;
  }

  .sp-container{
    z-index:1050 !important;
  }
  .colorpicker{
    position: relative;
  }
  .colorpicker .sp-replacer{
    position: absolute;
    top: 6px;
    right: 2px;
    border: 0px;
  }
  .colorpicker .sp-dd{
    display: none;
  }
  table tbody tr:first-child td{
    border-top:none;
  }
  </style>
@endsection
@section('content')
  <h1 class="df-title mg-b-10">Infografis</h1>
  <ol class="breadcrumb df-breadcrumbs">
    <li class="breadcrumb-item"><a href="">Admin</a></li>
    <li class="breadcrumb-item active" aria-current="page">Infografis</li>
  </ol>
  <div class="card card-table rounded-10 mg-t-50">
    <div class="card-body">
      <div class="pd-20">
        <div class="center">
          <h5>Grafik {{ $data['infografis']->judul }}</h5>
          <h5>Tahun {{ $data['infografis']->periode }}</h5>
        </div>
        <div id="grafik-trend" class="mg-b-20"></div>
        <button type="button" class="btn pull-right btn-dark mg-b-20" onclick="add_indikator()" >Tambah</button>
      </div>
      <div class="table-responsive mg-b-20">
        <table class="table table-bordered">
          <thead class="thead-light">
            <tr>
              <th rowspan="2" class="center" width="30px" style="border-left:0" >No</th>
              <th rowspan="2" class="center" >Nama Indikator</th>
              <th rowspan="2" class="center" width="80px">Satuan</th>
              <th colspan="{{ count($data['periode']) }}" class="center" >Realisasi</th>
              <th rowspan="2" style="width:1px;white-space:nowrap;border-right:0">
                
              </th>
            </tr>
            <tr>
              @foreach($data['periode'] as $tahun)
              <th class="center" style="padding:10px;width:50px" >
                <div style="width:50px" class="center">{{ $tahun }}</div>
              </th>
              @endforeach
            </tr>
          </thead>
          <tbody>
            @foreach ($data['indikator'] as $key => $value)
              <tr>
                <td class="center" style="border-left:0">{{$key+1}}</td>
                <td style="border-left:0">{{$value->nama_indikator}}</td>
                <td class="center">{{$value->satuan}}</td>
                @foreach ($value->realisasi as $key2 => $value2)
                <td class="center">{{ $value2['realisasi'] }}</td>
                @endforeach
                <td style="width:1px;white-space:nowrap;border-right:0">
                  <a href="javascript:;" onclick="edit_indikator('{{$value->id}}')" class="button green ripple-effect ico">
                    <i data-feather="edit" class="tx-white-8 wd-20 ht-20 "></i>
                  </a>
                  <a href="javascript:;" onclick="confirmDelete({{$value->id}})" class="button red ripple-effect ico">
                    <i data-feather="trash" class="tx-white-8 wd-20 ht-20 "></i>
                  </a>
                  <form action="{{ route('admin.proses_indikator_infografis') }}" method="post" id="hapus{{$value->id}}">
                    {{ csrf_field() }}
                    <input type="hidden" name="id" value="{{$value->id}}">
                    <input type="hidden" name="action" value="delete">
                  </form>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="modal fade" role="dialog" id="modal-indikator">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="title"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="{{ route('admin.proses_indikator_infografis',[ 'infografis' => $data['infografis']->id ]) }}" method="POST">
          {{ csrf_field() }}
          <div class="modal-body">
            <div class="form-group">
              <label>Pilih Indikator</label>
              <select class="select2" id="indikator" name="indikator" style="width:100%">
                @foreach ($data['pilih-indikator'] as $key => $value)
                <option value="{{$value->id}}">{{$value->nama_indikator}}</option>
                @endforeach
              </select>
            </div>
            <div class="row">
              <div class="col-md-5">
                <div class="form-group" id="grafik-color">
                  <label>Color</label>
                    <div class="colorpicker">
                    <input type="text" class="form-control" autocomplete="off" name="color" id="color">
                  </div>
                </div>
              </div>
              <div class="col-md-7">
                <div class="form-group" id="grafik-color">
                  <label>Jenis Grafis</label>
                    <div class="colorpicker">
                    <select class="select2" id="jenis" name="jenis" style="width:100%">
                      <option value="line">Line</option>
                      <option value="column">Batang</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <input type="hidden" id="id" name="id">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Kembali</button>
            <button type="submit" class="btn btn-primary" id="action" name="action" value="add">Tambahkan</button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection
@section('js')
  <script src="{{asset('assets/admin/lib/prismjs/prism.js')}}"></script>
  <script>

  $("#grafik-color input").spectrum({
    preferredFormat: "hex",
    showInput: true,
    showPalette: true,
    palette: [["#16a085","#2980b9","#8e44ad"],["#f39c12","#d35400","#c0392b"],["#273c75","#6ab04c","#22a6b3"],["#6F1E51","#ED4C67","#1289A7"]]
  });
  $("#grafik-color input").show();

  function add_indikator(){
    $('#color').val('#16a085');
    $('#color').spectrum('set', '#16a085');
    $('#id').val(0);
    $('#title').html('Tambah Indikator');
    $('#action').val('add');
    $('#action').html('Tambahkan');
    $('#modal-indikator').modal('show');
  }

  function edit_indikator(id){
    $.get("{{ url('api/find_indikator_infografis') }}/"+id,function(result){
      $('#indikator').val(result.fid_indikator);
      $('#indikator').select2();

      $('#jenis').val(result.jenis_grafik);
      $('#jenis').select2();

      $('#color').val(result.color);
      $('#color').spectrum('set', result.color);

      $('#id').val(id);
      $('#title').html('Edit Indikator');
      $('#action').val('edit');
      $('#action').html('Simpan');
      $('#modal-indikator').modal('show');
    });
  }

  grafik_trend();
  function grafik_trend() {
    const indikator = @json($data['indikator']);

    // Ambil periode (tahun)
    const categories = indikator[0].realisasi.map(r => r.periode);

    // Mapping series dinamis
    const series = indikator.map(item => ({
      name: item.nama_indikator,
      type: item.jenis_grafik,
      data: item.realisasi.map(r => r.realisasi)
    }));

    // Ambil warna
    const colors = indikator.map(item => item.color);

    // Stroke width: line tebal, bar = 0
    const strokeWidth = series.map(s => s.type === 'line' ? 3 : 0);

    var options = {
        series: series,
        colors: colors,
        chart: {
          height: 350,
          type: 'line', // parent type (WAJIB)
          toolbar: { show: false }
        },
        stroke: {
            curve: 'smooth',
            width: strokeWidth
        },
        plotOptions: {
            bar: {
              columnWidth: '45%'
            }
        },
        dataLabels: {
            enabled: false
        },
        xaxis: {
            categories: categories
        },
        legend: {
            position: 'bottom',
            offsetY: 30
        },
        grid: {
            padding: {
              bottom: 30
            }
        },
        tooltip: {
            shared: true,
            intersect: false
        }
    };
    new ApexCharts(
        document.querySelector("#grafik-trend"),
        options
    ).render();
  }

  </script>
@endsection