@extends('user.template')
@section('title', $title)
@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
  thead>tr>th{ border: 1px solid rgb(143, 143, 143); }
  tbody, tbody>tr, tbody>tr>td, tbody>tr>th{ border: 1px solid rgb(143, 143, 143); }
  td, th{padding: 7px; vertical-align: top}
  .text-center{text-align: center}
  .bold{
    font-weight: bold;
  }
</style>
@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">RPJMD</h3>
        <h6 class="font-weight-normal mb-0">{{$title}}</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.rpjmd')}}">RPJMD</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{$rpjmd->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 p-3">
          <table>
            <thead>
              <tr>
                <td colspan="5" class="text-center bold" >RPJMD</td>
              </tr>
              <tr>
                <td colspan="5" class="text-center">Periode {{$rpjmd->periode}}</td>
              </tr>
              <tr>
                <td colspan="5">Sasaran IKU &nbsp;&nbsp;: &nbsp;{{$rpjmd->sasaran_iku}}</td>
              </tr>
              <tr><td>&nbsp;</td></tr>
              <tr class="text-center">
                <th>No</th>
                <th>Misi</th>
                <th>Tujuan</th>
                <th>Sasaran</th>
                <th>Indikator Sasaran</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($datas as $no =>  $data)
                <tr>
                  <td rowspan="{{$data['rowspan']}}" class="text-center">{{$no+1}}</td>
                  <td rowspan="{{$data['rowspan']}}">{{$data['misi']}}</td>
                  <td rowspan="{{$data['rowspan']}}">{{$data['tujuan']}}</td>
                </tr>
                @foreach ($data['sasaran'] as $sr => $sasaran)
                  <tr>
                    <td rowspan="{{$sasaran['rowspan']}}">{{$sasaran['sasaran']}}</td>
                  </tr>
                  @foreach ($sasaran['indikator'] as $indikator)
                    <tr>
                      <td>{{$indikator}}</td>
                    </tr>
                  @endforeach
                @endforeach
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

@if (Auth::user()->entitas_id == 1)
<div class="row p-3">
  <div class="col-12 bg-white mb-3 p-3">
    <a href="" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#importModal">Import & Replace</a> 
    <div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Import and Replace</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form action="{{route('user.rpjmd.import', ['id'=> $rpjmd->id])}}" method="post" enctype="multipart/form-data"> @csrf
          <div class="modal-body">
            <div class="form-group row mb-0">
              <label for="fileImport" class="col-sm-3 col-form-label">File Import</label>
              <div class="col-sm-9">
                <input type="file" name="file" required class="form-control" id="fileImport">
              </div>
            </div>
            <a href="{{asset('Example/rpjmd.xlsx')}}" class="btn btn-success btn-block btn-sm">Download Contoh Format Import</a>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endif

@endsection

@section('script')
<script src="{{asset('js/sweetalert2.js')}}"></script>
@endsection