@extends('layouts.landing.index')
@section('content')
<div class="container-fluid py-4">
  <button class="btn btn-primary mb-4" id="add-data">Add Data</button>
  <div class="d-flex w-100 gap-4 overflow-auto">
    <div class="card p-2" style="min-width: 300px;">
      <div class="card-body">
        <h5 class="card-title">Open</h5>
        <div data-status="1" id="status-1">
        </div>
      </div>
    </div>
    <div class="card p-2" style="min-width: 300px;">
      <div class="card-body">
        <h5 class="card-title">Inprogress 1</h5>
        <div data-status="2" id="status-2">
        </div>
      </div>
    </div>
    <div class="card p-2" style="min-width: 300px;">
      <div class="card-body">
        <h5 class="card-title">Inprogress 2</h5>
        <div data-status="3" id="status-3">
        </div>
      </div>
    </div>
    <div class="card p-2" style="min-width: 300px;">
      <div class="card-body">
        <h5 class="card-title">Inprogress 3</h5>
        <div data-status="4" id="status-4">
        </div>
      </div>
    </div>
    <div class="card p-2" style="min-width: 300px;">
      <div class="card-body">
        <h5 class="card-title">Inprogress 4</h5>
        <div data-status="5" id="status-5">
        </div>
      </div>
    </div>
    <div class="card p-2" style="min-width: 300px;">
      <div class="card-body">
        <h5 class="card-title">Done</h5>
        <div data-status="6" id="status-6">
        </div>
      </div>
    </div>
  </div>
</div>
 
@endsection  

@push('scripts')
<script src="{{ asset('assets/js/Sortable.js') }}"></script>
<script>
  $(document).ready(function(){
    $('#add-data').on('click', function(){
      const dataTest =  JSON.parse(localStorage.getItem('dataTest'));
      const newData = { ...dataTest };
      const newObj = {
        id: dataTest.data.length+1,
        status: 1
      }
      newData.data.push(newObj);
      localStorage.setItem('dataTest', JSON.stringify(newData));
      reload();
    });

    function refresh() {
      reload();
    }

    function reload() {
      const status = [1,2,3,4,5,6];
      const dataTest =  JSON.parse(localStorage.getItem('dataTest'));
      for (let index = 0; index < status.length; index++) {
        const element = status[index];
        document.getElementById(`status-${element}`).innerHTML = '';
        const filteredObj = dataTest.data.filter(e => e.status === element);
        for (let x = 0; x < filteredObj.length; x++) {
          const obj = filteredObj[x];
          const html = document.createElement('div');
          html.setAttribute('data-id', `${obj.id}`)
          html.setAttribute('class', 'card mb-2 handle w-100')
          html.innerHTML = `
            <div class="card-body">
              <h5 class="card-title">Card title ${obj.id}</h5>
              <h6 class="card-subtitle mb-2 text-muted">Status: ${obj.status}</h6>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          `;
          document.getElementById(`status-${element}`).appendChild(html);
        }

        record = document.querySelector(`#status-${element}`);
        Sortable.create(record, {
          group: {
            name: `status-${element}`,
            pull: true,
            put: true
          },
          handle: '.handle',
          animation: 100,
          onEnd: function (evt) {
            const dataTest =  JSON.parse(localStorage.getItem('dataTest'));
            const index = dataTest.data.findIndex(e => e.id == evt.clone.dataset.id);
            const newData = { ...dataTest };
            newData.data[index].status = parseInt(evt.to.dataset.status);
            localStorage.setItem('dataTest', JSON.stringify(newData));
            refresh();
          },
        })
      }
    }

    let obj = {
      data: []
    };

    const check =  JSON.parse(localStorage.getItem('dataTest'));
    if (!check) {
      localStorage.setItem('dataTest', JSON.stringify(obj));
    }
    // const status = [1,2,3,4,5,6];
    // const dataTest =  JSON.parse(localStorage.getItem('dataTest'));
    // for (let index = 0; index < status.length; index++) {
    //   const element = status[index];
    //   const filteredObj = dataTest.data.filter(e => e.status === element);
    //   for (let x = 0; x < filteredObj.length; x++) {
    //     const obj = filteredObj[x];
    //     const html = document.createElement('div');
    //     html.setAttribute('data-id', `${obj.id}`)
    //     html.setAttribute('class', 'card mb-2 handle w-100')
    //     html.innerHTML = `
    //       <div class="card-body">
    //         <h5 class="card-title">Card title ${obj.id}</h5>
    //         <h6 class="card-subtitle mb-2 text-muted">Status: ${obj.status}</h6>
    //         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    //       </div>
    //     `;
    //     document.getElementById(`status-${element}`).appendChild(html);
    //   }

    //   record = document.querySelector(`#status-${element}`);
    //   Sortable.create(record, {
    //     group: {
    //       name: `status-${element}`,
    //       pull: true,
    //       put: true
    //     },
    //     handle: '.handle',
    //     animation: 100,
    //     onEnd: function (evt) {
    //       const dataTest =  JSON.parse(localStorage.getItem('dataTest'));
    //       const index = dataTest.data.findIndex(e => e.id == evt.clone.dataset.id);
    //       const newData = { ...dataTest };
    //       newData.data[index].status = parseInt(evt.to.dataset.status);
    //       localStorage.setItem('dataTest', JSON.stringify(newData));
    //       reload();
    //     },
    //   })
    // }
    reload();
  })
</script>
@endpush