@extends('layouts.app')
@section('content')
<!--begin::Content-->

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" id="create">
  {{-- <div class="modal-dialog modal-lg" id="create-app">    --}}
    <div class="modal-dialog modal-lg modal-dialog-scrollable" id="create-app" role="document"> 
  </div>
</div>

<div class="modal fade" tabindex="-1" id="show">
  <div class="modal-dialog modal-lg" id="show-app">    
  </div>
</div>

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" id="edit">
  <div class="modal-dialog modal-lg" id="edit-app">    
  </div>
</div>

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" id="remove">
  <div class="modal-dialog" id="remove-app">    
  </div>
</div>

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
  <!--begin::Post-->
  <div class="post d-flex flex-column-fluid" id="kt_post">
    <!--begin::Container-->
    <div id="kt_content_container" class="container-xxl">
      <!--begin::Row-->
      <div class="row g-5 g-xl-8">
        <div class="col-xl-12">
          <!--begin::List Widget 3-->
          <div class="card card-xl-stretch mb-xl-8">
            <!--begin::Header-->
            <div class="card-header py-5">
              <h3 class="card-title align-items-start flex-column">
                <span class="card-label fw-bolder fs-3 mb-1">Input Harian</span>
                <span class="text-muted mt-1 fw-bold fs-7">Laporan Pelaksanaan Harian</span>
              </h3>
            </div>
            <!--end::Header-->
            @php
              $satkeraktif_nama = '';
              $bulanaktif_nama = 'Januari';
              $tahunaktif_nama = $tahunaktif;
            @endphp

            <div class="card-header border-0 py-5">
              <form autocomplete="off">
                <div class="d-md-flex justify-content-md-start" data-kt-customer-table-toolbar="base">
                  <div class="me-md-3">
                    <label class="col-form-label">Pilih : </label>
                  </div>
                  <div class="me-md-3 mb-3 mb-md-0">
                    <select class="form-select" name="pilihsatker">
                      @foreach ($satker as $item)
                      <option value="{{$item->id}}" @if ($satkeraktif==$item->id ) 
                        @php
                         $satkeraktif_nama = $item->nama;
                        @endphp
                        selected 
                        @endif>
                        {{$item->nama}}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="me-md-3 mb-3 mb-md-0">
                    <select class="form-select" name="pilihbulan">
                      @php
                      $bulan = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember']
                      @endphp
                      @for ($i = 1; $i <= 12; $i++) 
                        <option value="{{$i}}" @if ($bulanaktif==$i )  
                        @php
                          $bulanaktif_nama = $bulan[$i-1];
                        @endphp
                        selected
                        @endif>
                        {{$bulan[$i-1]}}</option>
                      @endfor
                    </select>
                  </div>
                  <div class="me-md-3 mb-3 mb-md-0">
                    <select class="form-select" name="pilihtahun">
                      @for ($i = $tahunpertama; $i <= $tahunterakhir; $i++) <option value="{{$i}}" {{$tahunaktif==$i
                        ? 'selected' :''}}>{{$i}}</option>
                        @endfor
                    </select>
                  </div>
                  <div class="d-flex me-md-3 mb-3 mb-md-0">
                    <button type="submit" class="btn btn-primary fw-bolder me-2"><i class="fas fa-search"></i>Lihat Data</button>
                  </div>
                </div>
              </form>
            </div>
            
            <!--begin::Body-->
            <div class="card-body">
              <div class="alert bg-light-info border border-info border border-dashed d-flex flex-column flex-sm-row w-100 p-5 mb-10">
                <!--begin::Content-->
                <div class="d-flex">
                  <div class="d-flex flex-column pe-0 pe-sm-10">
                    <span class="text-muted fs-7 fw-bold">Satker</span>
                    <h5 class="mb-1">{{$satkeraktif_nama}}</h5>
                  </div>
                  <div class="d-flex flex-column pe-0 pe-sm-10">
                    <span class="text-muted fs-7 fw-bold">Periode</span>
                    <h5 class="mb-1">{{$bulanaktif_nama.' '.$tahunaktif_nama}}</h5>
                  </div>
                </div>
                <!--end::Content-->
              </div>
              <div class="table-responsive">
                <table class="table table-row-dashed table-row-gray-300 gy-5 gs-7">
                  <thead>
                    <tr class="fw-bolder text-gray-800 border-bottom border-gray-200 bg-light">
                      <th>Hari</th>
                      <th>Tanggal</th>
                      <th>Data</th>
                    </tr>
                  </thead>
                  <tbody id="table_body">
                    @php
                    // setlocale(LC_TIME, 'id_ID');
                    // \Carbon\Carbon::setLocale('id');
                    $dt = \Carbon\Carbon::now();
                    $periode = \Carbon\CarbonPeriod::create($tahunaktif.'-'.$bulanaktif.'-01', $dt->month($bulanaktif)->daysInMonth);
                    @endphp
                    @foreach ($periode as $hari)
                    <tr>
                      <td class="min-w-100px w-100px">{{$hari->isoFormat('dddd')}}</td>
                      <td class="min-w-150px w-150px">{{$hari->isoFormat('DD MMMM Y')}}</td>
                      <td class="min-w-200px">
                        <div class="d-flex justify-content-between" id="tambah-{{$hari->format('Y-m-d')}}">
                          @php
                            $row = \App\Models\InputHarian::where('tanggal', $hari->format('Y-m-d'))->where('satker_id', $satkeraktif)->first();
                          @endphp

                          @if($row)
                            <div class="tambah-kiri">
                              <button type="button" class="btn btn-sm me-2 btn-success btnshow"
                              data-tanggal="{{$hari->format('Y-m-d')}}"  data-id="{{$row->id}}"
                              ><span class="fas fa-check me-3"></span>Detail</button>
                            </div>
                            <div class="tambah-kanan">
                              <button type="button" class="btn btn-sm btn-icon btn-warning btnedit me-2" data-id="{{$row->id}}"><span class="bi bi-pencil-square"></span></button>
                              <button type="button" class="btn btn-sm btn-icon btn-danger btnremove" data-id="{{$row->id}}"><span class="bi bi-trash"></span></button>
                            </div>
                          @else
                            <div class="tambah-kiri">
                              <button type="button" class="btn btn-sm me-2 btn-secondary btncreate"
                              data-tanggal="{{$hari->format('Y-m-d')}}" 
                              >Tambah</button>
                            </div>
                            <div class="tambah-kanan"></div>
                          @endif

                        </div>
                      </td>
                    </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
            <!--end::Body-->
          </div>
          <!--end:List Widget 3-->
        </div>
      </div>
      <!--end::Row-->
    </div>
    <!--end::Container-->
  </div>
  <!--end::Post-->
</div>
<!--end::Content-->
@endsection

@section('js')

<script>
    function create(url, tanggal, satker){
        axios.get(url, {
            params: {
                'tanggal': tanggal,
                'satker_id': satker,
            }
        }).then(function (response){
            $('#create-app').html(response.data);
            $("#create").modal('show');
        });
    };

    function show(url, dataid){
        axios.get(url, {
            params: {
                'data_id': dataid,
            }
        }).then(function (response){
            $('#show-app').html(response.data);
            $("#show").modal('show');
        });
    };

    function edit(url, dataid){
        axios.get(url, {
            params: {
                'data_id': dataid,
            }
        }).then(function (response){
            $('#edit-app').html(response.data);
            $("#edit").modal('show');
        });
    };

    function remove(url, dataid){
        axios.get(url, {
            params: {
                'data_id': dataid,
            }
        }).then(function (response){
            $('#remove-app').html(response.data);
            $("#remove").modal('show');
        });
    };

    $('#create').on('hidden.bs.modal', function () {
        $('#create-app').empty();
    });

    $('#edit').on('hidden.bs.modal', function () {
        $('#edit-app').empty();
    });

    $('#show').on('hidden.bs.modal', function () {
        $('#show-app').empty();
    });

    $('#remove').on('hidden.bs.modal', function () {
        $('#remove-app').empty();
    });

    $(document).ready(function(){

        $('#table_body').on('click','.btncreate',function(e){
          btn = $(this);  
          create('{{ url("mod/input-harian/create") }}', btn.data('tanggal'), '{{$satkeraktif}}');
        });

        $('#table_body').on('click','.btnshow',function(e){
          btn = $(this);
          show('{{ url("mod/input-harian/show") }}', btn.data('id'));
        });
        
        $('#table_body').on('click','.btnedit',function(e){
          btn = $(this);
          edit('{{ url("mod/input-harian/edit") }}', btn.data('id'));
        });
        
        $('#table_body').on('click','.btnremove',function(e){
          btn = $(this);
          remove('{{ url("mod/input-harian/remove") }}', btn.data('id'));
        });
        
    });


</script>

@stop