@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 }}</h6>
                </div>
                <div class="col-12 col-xl-3">
                    <button class="btn btn-success btn-block" data-bs-toggle="modal"
                        data-name="Tambah {{ $title }} Baru" data-ket="tambah" href="#modalData">Buat
                        {{ $title }} Baru</button>
                </div>
            </div>
        </div>
    </div>


    @if ($errors->any())
        @foreach ($errors->all() as $error)
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ $error }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endforeach
    @endif

    <div class="row">
        @foreach ($datas as $data)
            <div class="col-md-4 evaluasi{{ $data->id }}">
                <div class="card mb-4">
                    <div class="card-body" style="min-height: 100px;">
                        <p class="card-title"><strong>Periode {{ $data->periode }}</strong></p>
                        <small>Update {{ tanggal_waktu($data->updated_at) }}</small> <br><br>
                    </div>
                    <div class="card-footer" style="background-color: white;">
                        <div class="row">
                            <div class="col-sm-12">
                                <a href="{{ route('user.evaluasi.show', ['id' => $data->id]) }}"
                                    class="btn btn-sm btn-info">Detail</a>
                                @if (Auth::user()->role == 'Pemda')
                                    <button class="btn btn-success btn-sm" data-bs-toggle="modal"
                                        data-name="Edit {{ $title }}" data-ket="edit" href="#modalData"
                                        data-id="{{ $data->id }}" data-periode="{{ $data->periode }}"
                                        data-entitas="{{ isset($evEntitas[$data->id]) ? implode(',', $evEntitas[$data->id]) : '' }}">Edit</button>
                                    <a class="btn btn-danger btn-sm" href="#"
                                        onclick="hapus('{{ route('user.evaluasi.delete', ['id' => $data->id]) }}', 'evaluasi{{ $data->id }}', 'Anda akan menghapus semua data yang ada pada pelaporan ini?')">Hapus</a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="modal fade" id="modalData" 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="formAction" class="form-horizontal"> @csrf
                    <div class="modal-body">
                        <div id="inputHidden"></div>
                        <div class="form-group">
                            <label for="periode" class="font-weight-bold">Periode</label>
                            <input type="text" name="periode" class="form-control" required id="periode"
                                placeholder="Periode">
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <p class="font-weight-bold">Entitas</p>
                                <table class="table table-sm">
                                    @foreach ($entitass as $entitas)
                                        <tr>
                                            <td><input class="entitas form-check-input" name="entitas[]" type="checkbox"
                                                    value="{{ $entitas->id }}" id="entitas{{ $entitas->id }}"
                                                    {{ env('APP_ENV') != 'production' ? 'checked' : '' }}></td>
                                            <td><label class="form-check-label"
                                                    for="entitas{{ $entitas->id }}">{{ $entitas->entitas }}</label></td>
                                        </tr>
                                    @endforeach
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('js/sweetalert2.js') }}"></script>
    <script>
        $('#modalData').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('#formAction').attr('action', "{{ route('user.evaluasi.store') }}")
                modal.find('#inputHidden').html('')

                modal.find('#periode').val('')
                $('.entitas').prop("checked", false);
            } else {
                var id = button.data('id')

                let entitas = String(button.data('entitas'));

                console.log(entitas)
                if (entitas.search(",")) {
                    entitas = entitas.split(',')
                } else {
                    entitas = [entitas];
                }

                modal.find('#periode').val(button.data('periode'))
                $('.entitas').prop("checked", false);
                for (let et = 0; et < entitas.length; et++) {
                    const checkEntitas = entitas[et];
                    $('#entitas' + checkEntitas).prop("checked", true);
                }

                modal.find('#inputHidden').html('<input type="hidden" name="id" value="' + id +
                    '"><input type="hidden" name="_method" value="put">')
                modal.find('#formAction').attr('action', "{{ route('user.evaluasi.update') }}")

            }
        })
    </script>
@endsection