@extends('user.template')
@section('title', $title)
@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')

<div class="row">
  <div class="col-md-12 grid-margin">
    <div class="row">
      <div class="col-12 col-xl-9 mb-4 mb-xl-0">
        <h3 class="font-weight-bold">{{$title}}</h3>
        <h6 class="font-weight-normal mb-0">{{$title}} {{$data->periode}} </h6>
      </div>
      <div class="col-12 col-xl-3">
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-12 mb-3">
      <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('user.renja')}}">{{$title}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{$data->periode}}</li>
          </ol>
      </nav>
  </div>
</div>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-md-3">
            <p class="card-title">{{$title}}</p>
            <b class="font-weight-500 mb-xl-4 text-primary">{{$data->entitas}}</b>
            <small>Periode</small>
            <h2 class="text-primary">{{$data->periode}}</h2>
            <small>
              {{Auth::user()->nama}} 
            </small>
          </div>  
          <div class="col-md-9">
            <div class="row">
              <div class="col-md-12 border-left">
                <p class="card-title">Program</p>
                <ul>
                  @if($data->program == 'null')
                  <b class="text-danger">Silahkan Hapus Renja Ini Karena Tidak Sesuai Prosedur</b>
                  @else
                  @foreach (json_decode($data->program) as $program)
                  <li>{{$program}}</li>
                  @endforeach
                  @endif
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <small class="float-right">
          Created : {{$data->created_at}} - 
          Updated : {{$data->updated_at}}
        </small>
        <a href="{{route('user.renja.edit',['id'=>$data->id])}}" class="btn btn-info">Edit</a>
        <a class="btn btn-danger" href="#" onclick="hapusRedirect('{{route('user.renja.delete',['id'=>$data->id])}}', '{{route('user.renja')}}', 'Hapus {{$title}} ?')" >Hapus</a>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="ml-4 mt-4 mr-4">
        <button  class="btn btn-outline-success float-right" data-toggle="modal" data-name="Tambah Kegiatan {{$title}} Baru" data-ket="tambah" href="#modalKegiatan">Buat Kegiatan {{$title}} Baru</button>
        <b>Kegiatan Renja</b> <br>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-borderless ">
            <thead>
              <tr class="text-center">
                <th>No</th>
                <th>Kegiatan</th>
                <th>Target</th>
                <td></td>
              </tr>  
            </thead>
            <tbody>
              @foreach ($kegiatans as $noKegiatan => $kegiatan)
              <tr class="kegiatan{{$kegiatan->id}}">
                <td>{{$noKegiatan+1}}</td>
                <td>{{$kegiatan->kegiatan}}</td>
                <td>{{$kegiatan->peserta}}</td>
                <td>
                  <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-name="Edit {{$title}} Kegiatan" data-ket="edit" href="#modalKegiatan" data-id="{{$kegiatan->id}}" data-kegiatan="{{$kegiatan->kegiatan}}" data-peserta="{{$kegiatan->peserta}}">Edit</button>
                  <a class="btn btn-danger btn-sm" href="#" onclick="hapus('{{route('user.renja.kegiatan.delete',['id'=>$kegiatan->id])}}', 'kegiatan{{$kegiatan->id}}', 'Hapus {{$title}} Kegiatan ?')" >Hapus</a>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalKegiatan" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title"></h4>
          </div>
          <form method="post" id="formActionKegiatan" class="form-horizontal"> @csrf
          <input type="hidden" name="renja_id" value="{{$data->id}}">
          <div class="modal-body">
              <div id="inputHiddenKegiatan"></div>
              <div class="form-group">
                <label for="kegiatan">Kegiatan</label>
                <input type="text"  name="kegiatan" class="form-control" required id="kegiatan" placeholder="Kegiatan">
              </div>
              <div class="form-group">
                <label for="peserta">Target</label>
                <input type="text"  name="peserta" class="form-control" required id="peserta" placeholder="Peserta">
              </div>
          </div>
          <div class="modal-footer">
              <button type="submit" class="btn btn-primary">Save changes</button>
              <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
          </div>
          </form>
      </div>
  </div>
</div>

@endsection

@section('script')
<script src="{{asset('js/sweetalert2.js')}}"></script>
    
<script>
  $('#modalKegiatan').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var name = button.data('name') 
      var ket = button.data('ket')
  
      var modal = $(this)
      modal.find('.modal-title').text(name)
  
      if (ket == 'tambah') {
          modal.find('#formActionKegiatan').attr('action', "{{route('user.renja.kegiatan.store')}}")
          modal.find('#inputHiddenKegiatan').html('')
  
          modal.find('#kegiatan').val('')
          modal.find('#peserta').val('')
      }else{
          var id = button.data('id') 
  
          modal.find('#kegiatan').val(button.data('kegiatan'))
          modal.find('#peserta').val(button.data('peserta'))

          modal.find('#inputHiddenKegiatan').html('<input type="hidden" name="id" value="'+id+'"><input type="hidden" name="_method" value="put">')
          modal.find('#formActionKegiatan').attr('action', "{{route('user.renja.kegiatan.update')}}")
  
      }
  })
</script>
@endsection