@extends('layouts.admin.index')

@section('content')
  <div id="main-wrapper">
    <!-- Sidebar -->
    @include('layouts.admin.sidebar')
    <div class="page-wrapper">
      <!--  Header -->
      @include('layouts.admin.header')

      <div class="body-wrapper">
        <div class="container-fluid">
          <div class="card w-100 position-relative overflow-hidden">
            <div class="card-body p-4">
              <div class="row">
                <div class="col-12 mb-5 d-flex justify-content-between align-items-center">
                  <h3>Roadmap {{ $msp->name }}</h3>

                </div>
                <div class="col-md-12 d-flex justify-content-end flex-column align-items-end">
                  <button class="btn btn-primary" id="btn-add" type="button" data-bs-toggle="modal" data-bs-target="#add-task"><i class="ti ti-plus me-2"></i>Tambah</button>
                  <div id="container"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="add-task"  tabindex="-1" >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <form action="{{ route('msp.add-roadmap') }}" method="POST" enctype="multipart/form-data">
          <input type="hidden" name="msp_id" value="{{ $msp->id }}" />
          <input type="hidden" name="id" value="" />
          {{ csrf_field() }}
          <div class="modal-header d-flex align-items-center">
            <h4 class="modal-title" id="exampleModalLabel2">
              Form Tahapan Kegiatan
            </h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label for="message-text" class="">Deskripsi</label>
              <textarea class="form-control" name="description" rows="3"></textarea>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="message-text" class="">Tanggal Mulai</label>
                  <input type="date" class="form-control" name="start_date"  />
                </div>
              </div>
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="message-text" class="">Tanggal Selesai</label>
                  <input type="date" class="form-control" name="end_date" />
                </div>
              </div>
            </div>
            <div class="mb-3">
              <label for="message-text" class="">Keterangan</label>
              <textarea class="form-control" name="notes" rows="3"></textarea>
            </div>
            <div class="mb-3">
              <label for="message-text" class="">Status</label>
              <select class="form-select" name="status">
                <option value="0">Sedang Berjalan</option>
                <option value="1">Selesai (Terlaksana)</option>
                <option value="2">Berhenti (Gagal)</option>
              </select>
            </div>
            <div class="mb-3 fv-row">
              <label for="inputName" class="form-label">Dokumentasi</label>
              <div class="d-flex flex-column gap-2 mb-3" id="list-gallery">
              </div>
              <button type="button" class="btn btn-outline-primary add-gallery"><i class="ti ti-plus"></i> Tambah Dokumentasi</button>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
              Tutup
            </button>
            <button type="submit" class="btn btn-primary">
              <i class="ti ti-device-floppy me-2"></i>Simpan
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection
@push('styles')
    <style>
      #container,
      #button-container {
        width: 100%;
        margin: 1em auto;
      }
    </style>
@endpush
@push('scripts')
  <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
  <script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
  <script src="https://code.highcharts.com/gantt/modules/pattern-fill.js"></script>
  <script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>
  <script type="text/javascript">
    const roadmaps = @json($roadmaps) || [];
    console.log(roadmaps)
    let dataChart = [];
    dataChart.push({
      name: '{{ $msp->name }}',
      id: `msp`,
    })
    roadmaps.forEach(function(s,index){
      dataChart.push({
        name: s.name,
        parent: 'msp',
        id: `sol-${index}`,
      });
      s.activities.forEach(function(a,indexA){
        dataChart.push({
          name: a.activity_name,
          id: `act-${a.id}`,
          parent: `sol-${index}`,
          start: a.start_date,
          end: a.end_date,
          owner: a.actor_name
        })
      })
    })
    let chart = null;
    const day = 24 * 36e5,
      today = Math.floor(Date.now() / day) * day;

    const options = {
      chart: {
        plotBackgroundColor: 'rgba(128,128,128,0.02)',
        plotBorderColor: 'rgba(128,128,128,0.1)',
        plotBorderWidth: 1
      },

      plotOptions: {

        series: {
          borderRadius: '50%',
          connectors: {
            dashStyle: 'ShortDot',
            lineWidth: 2,
            radius: 5,
            startMarker: {
              enabled: false
            }
          },
          groupPadding: 0,
        },
        gantt: {
          // events:{
          //   click: function(x){
          //     fetch(`/msp/detail-roadmap/${x.point.id}`, {
          //       method: 'GET',
          //       headers: {
          //         'Content-Type': 'application/json',
          //         'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
          //       },
          //     })
          //       .then(response => response.json())
          //       .then(res => {
          //         $('input[name="name"]').val(res.data.name);
          //         $('input[name="id"]').val(res.data.id);
          //         $('textarea[name="description"]').val(res.data.description);
          //         $('textarea[name="notes"]').val(res.data.notes);
          //         $('input[name="start_date"]').val(res.data.start_date);
          //         $('input[name="end_date"]').val(res.data.end_date);
          //         $('select[name="status"]').val(res.data.status);
          //         $('#select-mul').select2('destroy');
          //         $('#select-mul').empty()
          //         actors.forEach(function(a){
          //           const actorsFlat = res.data.actors.map(s=>s.actor_id);
          //           $('#select-mul').append(`<option value=${a.institution_id} ${actorsFlat.includes(a.institution_id) ? 'selected':''}>${a.institution.name}</option>`);
          //         })
          //         $("#select-mul").select2({
          //           dropdownParent: $('#add-task')
          //         })
          //         $('#list-gallery').empty();
          //         let galleriesHTML = ''
          //         res.data.galleries.forEach(function(g){
          //           galleriesHTML += `<div class="d-flex gap-2 py-2 border-bottom justify-content-between align-items-center">
          //             <a href="/storage/msp-roadmap/galleries/${g.filename}" target="_blank">
          //             <figure class="figure">
          //               <img src="/storage/msp-roadmap/galleries/${g.filename}" class="figure-img img-fluid rounded" style="max-width: 200px;" alt="${g.subtitle || g.filename_original}">
          //               <figcaption class="figure-caption fs-3">${g.subtitle || g.filename_original}</figcaption>
          //             </figure>
          //             </a>
          //             <button type="button" class="btn btn-danger remove-gallery-edit" data-id="${g.id}"><i class="ti ti-trash"></i></button>
          //           </div>`
          //         })
          //         if(galleriesHTML.length > 0){
          //           $('#list-gallery').html(galleriesHTML);
          //           $('.remove-gallery-edit').each(function(){
          //             $(this).on('click', function(){
          //               const data = $(this).data();
          //               if(data.id !== undefined){
          //                 $(`<input type="hidden" name='deleted_galleries[]' value="${data.id}"/>`).insertAfter($('input[name="id"]'));
          //               }
          //               $(this).parent().remove();
          //             })
          //           })
          //         }
          //         window.$('#btn-add').trigger('click');
          //       })
          //       .catch(error => console.error('Error fetching target and indicator:', error));
          //   }
          // }
        }
      },

      series: [{
        name: 'MSP',
        data: dataChart,
      }],
      title: {
        text: ''
      },
      navigator: {
        enabled: true,
        liveRedraw: true,
        series: {
          type: 'gantt',
          pointPlacement: 0.5,
          pointPadding: 0.25,
          accessibility: {
            enabled: false
          }
        },
        yAxis: {
          min: 0,
          max: 3,
          reversed: true,
          categories: []
        }
      },

      scrollbar: {
        enabled: true
      },

      rangeSelector: {
        enabled: true,
        selected: 99
      },
      xAxis: [{
        currentDateIndicator: {
          color: '#2caffe',
          dashStyle: 'ShortDot',
          width: 2,
          label: {
            format: ''
          }
        },
        dateTimeLabelFormats: {
          day: '%e<br><span style="opacity: 0.5; font-size: 0.7em">%a</span>'
        },
        grid: {
          borderWidth: 0
        },
        gridLineWidth: 1,
        custom: {
          today,
          weekendPlotBands: true
        }
      }],
      yAxis: {
        uniqueNames: true,
        grid: {
          borderWidth: 0
        },
        gridLineWidth: 0,
        labels: {
          symbol: {
            width: 8,
            height: 6,
            x: -4,
            y: -2
          },
        },
        plotBands:{
          events:{
            click: function(){
              console.log('clicked')
            }
          }
        },
        staticScale: 30,
      },
      accessibility: {
        keyboardNavigation: {
          seriesNavigation: {
            mode: 'serialize'
          }
        },
        point: {
          descriptionFormatter: function (point) {
            const completedValue = point.completed ?
                point.completed.amount || point.completed : null,
              completed = completedValue ?
                ' Task ' + Math.round(completedValue * 1000) / 10 +
                '% completed.' :
                '',
              dependency = point.dependency &&
                point.series.chart.get(point.dependency).name,
              dependsOn = dependency ?
                ' Depends on ' + dependency + '.' : '';

            return Highcharts.format(
              point.milestone ?
                '{point.yCategory}. Milestone at {point.x:%Y-%m-%d}. ' +
                'Owner: {point.owner}.{dependsOn}' :
                '{point.yCategory}.{completed} Start ' +
                '{point.x:%Y-%m-%d}, end {point.x2:%Y-%m-%d}. Owner: ' +
                '{point.owner}.{dependsOn}',
              { point, completed, dependsOn }
            );
          }
        },
      },
      lang: {
        accessibility: {
          axis: {
            xAxisDescriptionPlural: 'The chart has a two-part X axis ' +
              'showing time in both week numbers and days.'
          }
        }
      },
    };

    // Plug-in to render plot bands for the weekends
    Highcharts.addEvent(Highcharts.Axis, 'foundExtremes', e => {
      if (e.target.options.custom && e.target.options.custom.weekendPlotBands) {
        const axis = e.target,
          chart = axis.chart,
          day = 24 * 36e5,
          isWeekend = t => /[06]/.test(chart.time.dateFormat('%w', t)),
          plotBands = [];

        let inWeekend = false;

        for (
          let x = Math.floor(axis.min / day) * day;
          x <= Math.ceil(axis.max / day) * day;
          x += day
        ) {
          const last = plotBands.at(-1);
          if (isWeekend(x) && !inWeekend) {
            plotBands.push({
              from: x,
              color: {
                pattern: {
                  path: 'M 0 10 L 10 0 M -1 1 L 1 -1 M 9 11 L 11 9',
                  width: 10,
                  height: 10,
                  color: 'rgba(128,128,128,0.15)'
                }
              }
            });
            inWeekend = true;
          }

          if (!isWeekend(x) && inWeekend && last) {
            last.to = x;
            inWeekend = false;
          }
        }
        axis.options.plotBands = plotBands;
      }
    });

    chart = Highcharts.ganttChart('container', options);
    console.log(chart.yAxis[0])
    // chart.yAxis[0].labelGroup.element.childNodes.forEach(function(label, index) {
    //   console.log(index,label.textContent ? label.textContent : 'lah')
    //
    //   label.style.cursor = "pointer";
    //   label.onclick = function(){
    //     // label.style.fill = "green";
    //
    //   }
    // });
    const myModalEl = document.getElementById('add-task')
    myModalEl.addEventListener('hidden.bs.modal', event => {
      $('#add-task form')[0].reset();
      $('#select-mul').select2('destroy');
      $('#select-mul').empty()
      actors.forEach(function(a){
        $('#select-mul').append(`<option value=${a.institution_id}>${a.institution.name}</option>`);
      })
      $("#select-mul").select2({
        dropdownParent: $('#add-task')
      })
      $('#list-gallery').empty();
    })
  </script>
@endpush