@extends('layouts.app')
@section('content')
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">Edit Data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{route('PedomanController.update', ['id' => $pedoman->id])}}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-12">
                        <label for="">Nama Pedoman</label>
                        <input type="text" class="form-control" name="nama" value="{{$pedoman->nama}}">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="createModalDetail" tabindex="-1" aria-labelledby="createModalDetailLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createModalDetailLabel">Isi</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{route('PedomanDetailController.store')}}" method="POST">
                @csrf
                <input type="hidden" name="pedoman_id" value="{{$pedoman->id}}">
                <div class="modal-body">
                    <div class="row">
                        @if($pedoman->jenis == 'Administrasi Umum')
                        <div class="form-group col-12">
                            <label for="jenisid">Bidang</label>
                            <select class="custom-select" name="bidang" required>
                                @foreach($bidang as $item)
                                    <option value="{{$item->id}}">{{$item->nama}}</option>
                                @endforeach
                            </select>
                        </div>
                        @endif
                        <div class="form-group col-12">
                        <label for="">isi</label>
                        <textarea class="form-control" name="isi" rows="4"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editModalDetail" tabindex="-1" aria-labelledby="editModalDetailLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalDetailLabel">Edit</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{route('PedomanDetailController.update')}}" method="POST">
                @csrf
                <input type="hidden" name="id" id="editIdId">
                <div class="modal-body">
                    <div class="row">
                        @if($pedoman->jenis == 'Administrasi Umum')
                        <div class="form-group col-12">
                            <label for="jenisid">Bidang</label>
                            <select class="custom-select" id="editBidangId" name="bidang" required>
                                @foreach($bidang as $item)
                                    <option value="{{$item->id}}">{{$item->nama}}</option>
                                @endforeach
                            </select>
                        </div>
                        @endif
                        <div class="form-group col-12">
                        <label for="">Isi</label>
                        <textarea class="form-control" name="isi" rows="4" id="editIsiId"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="hapusModalDetail" tabindex="-1" aria-labelledby="hapusModalDetailLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="hapusModalDetailLabel">Hapus</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{route('PedomanDetailController.destroy')}}" method="POST">
                @csrf
                <input type="hidden" name="id" id="hapusIdId">
                <div class="modal-body">

                    <div class="row">
                        <div class="form-group col-12">
                        <label for="">Isi</label>
                        <textarea class="form-control" name="isi" rows="4" id="hapusIsiId" readonly></textarea>
                        </div>
                    </div>

                    <div>
                      <div class="font-weight-bold">Yakin ingin hapus isi ini ?</div>
                    </div>
            
                  </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger">Hapus</button>
                </div>
            </form>
        </div>
    </div>
</div>

<section class="content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="float-left">Pedoman Detail</h1>
                <button class="btn btn-warning float-right" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil-alt" aria-hidden="true"></i> Edit</button>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="card">
        <div class="card-body">
            <table class="table table-bordered table-md">
                <tbody>
                    <tr>
                        <th width="20%">Nama</th>
                        <td>{{$pedoman->nama}}</td>
                    </tr>
                    <tr>
                        <th>Jenis</th>
                        <td>{{$pedoman->jenis}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<section class="content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="float-left">List Pedoman</h1>
                <button class="btn btn-primary float-right" data-toggle="modal" data-target="#createModalDetail">+ Baru</button>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="card">
        <div class="card-body">
            <table class="table table-bordered table-md">
                <thead>
                    <tr>
                        <th width="100px;">Opsi</th>
                        <th width="50px;">No</th>
                        <th>Isi List Pedoman</th>
                        @if($pedoman->jenis == 'Administrasi Umum')
                        <th>Bidang</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @foreach ($pedoman->detail as $key => $item)
                    <tr>
                        <td>
                            <button class="btn btn-sm btn-warning btnEditIsi"
                                data-id="{{$item->id}}"
                                data-isi="{{$item->isi}}"
                                @if($pedoman->jenis == 'Administrasi Umum')
                                data-bidang="{{$item->bidang_id}}"
                                @endif
                            ><i class="fa fa-pencil-alt" aria-hidden="true"></i></button>
                            <button class="btn btn-sm btn-danger btnHapusIsi"
                            data-id="{{$item->id}}"
                            data-isi="{{$item->isi}}"
                            ><i class="fa fa-trash-alt" aria-hidden="true"></i></button>
                        </td>
                        <td class="text-center">{{$key+1}}</td>
                        <td>{!! nl2br($item->isi) !!}</td>
                        @if($pedoman->jenis == 'Administrasi Umum')
                        <td>{{$item->bidang->nama}}</td>
                        @endif
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</section>

@endsection

@section('js')
<script>
    $(document).ready(function(){
        $(document).on('click','.btnEditIsi', function(){
            let that = $(this);
            $('#editIdId').val(that.data('id'));
            $('#editIsiId').val(that.data('isi'));
            @if($pedoman->jenis == 'Administrasi Umum')
            $("#editBidangId option[value="+that.data('bidang')+"]").attr("selected","selected");
            @endif
            $('#editModalDetail').modal('show');
        });

        $(document).on('click','.btnHapusIsi', function(){
            let that = $(this);
            $('#hapusIdId').val(that.data('id'));
            $('#hapusIsiId').val(that.data('isi'));
            $('#hapusModalDetail').modal('show');
        });
    });
</script>
@endsection