@extends('sidebaradmin')
@section('content')
    <section class="section">
        <a href="#modalAdd" id="add" data-bs-toggle="modal" data-bs-target="#modalAdd" class="btn btn-success mb-3"
            {{-- onclick="$('#modalEdit2 #formEdit').attr('action', '{{ route('users.update', Crypt::encryptString($data->id)) }}')" --}}>
            <i class="bi bi-plus"></i>
            Tambahkan Data</a>
        @include('message')
        {{-- modal ADD --}}
        <!--BorderLess Modal Modal -->
        <div class="modal fade text-left modal-borderless" id="modalAdd" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Tambahkan Data Indikator</h5>
                        <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                            <i data-feather="x"></i>
                        </button>
                    </div>
                    <div class="modal-body">

                        <form action="{{ route('indikator.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label for="name">Nama Data Indikator</label>
                                <input type="text" class="form-control" id="name" name="name"
                                    placeholder="Masukan Nama Data" required>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                    <i class="bx bx-x d-block d-sm-none"></i>
                                    <span class="  center">Close</span>
                                </button>
                                <button type="submit" class="btn btn-primary ml-1">
                                    <i class="bx bx-check d-block d-sm-none"></i>
                                    <span class="  center">Submit</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- modal ADD End --}}


        <div class="card">
            <div class="card-header fw-bold center ">
                Table Data Indikator
            </div>
            <div class="card-body"style="overflow-x:auto;">
                <table class="table" id="table1">
                    <thead>
                        <tr>
                            <th colspan="2">Nama Indikator</th>
                            <th>Action</th>
                            <th colspan="2">list</th>
                            <th>Action</th>

                        </tr>
                    </thead>
                    <tbody>


                        @foreach ($data as $item)
                            <tr>
                                <td ROWSPAN="{{ $item->listData->count() + 1 }}">{{ $item->name }}</td>


                                <td ROWSPAN="{{ $item->listData->count() + 1 }}">
                                    <a data-bs-toggle="modal" data-bs-target="#modalEdit" id="edit"
                                        data-name="{{ $item->name }}"
                                        onclick="$('#modalEdit #formEdit').attr('action', '{{ route('indikator.update', Crypt::encryptString($item->id)) }}')"
                                        class="open-AddBookDialog btn btn-primary edit" href=""><i
                                            class="bi bi-pencil-square"></i></a>
                                    <a href="" class="btn btn-danger"data-bs-toggle="modal"
                                        data-bs-target="#modalDelete"
                                        onclick="$('#modalDelete #formDelete').attr('action', '{{ route('indikator.destroy', Crypt::encryptString($item->id)) }}')"><i
                                            class="bi bi-trash-fill"></i></a>

                                </td>
                                <td ROWSPAN="{{ $item->listData->count() + 1 }}"><a data-bs-toggle="modal"
                                        data-bs-target="#modalAdd-list" id="add"
                                        data-id="{{ $item->id }}"class="open-AddBookDialog btn btn-success edit"
                                        href=""></i>Tambahkan-List</a></td>

                            </tr>
                            @foreach ($item->listData as $item)
                                <tr>

                                    <td>{{ $item->name }}</td>
                                    <td>
                                        @if ($item->jumlah != '')
                                            {{ $item->jumlah }}
                                        @endif
                                        @if ($item->icon == 1)
                                            <img src="{{ asset('assets/images/svg-loaders/x.svg') }}" alt="">
                                        @endif
                                        @if ($item->icon == 2)
                                            <img src="{{ asset('assets/images/svg-loaders/check.svg') }}" alt="">
                                        @endif
                                    </td>
                                    <td>

                                        <a data-bs-toggle="modal" data-bs-target="#modalEdit-list" id="edit-list"
                                            data-name="{{ $item->name }}" data-jumlah="{{ $item->jumlah }}"
                                            data-icon="{{ $item->icon }}" data-id="{{ $item->data_id }}"
                                            onclick="$('#modalEdit-list #formEdit-list').attr('action', '{{ route('listData.update', Crypt::encryptString($item->id)) }}')"
                                            class="open-AddBookDialog btn btn-primary edit" href=""><i
                                                class="bi bi-pencil-square"></i></a>
                                        <a href="" class="btn btn-danger"data-bs-toggle="modal"
                                            data-bs-target="#modalDelete-list"
                                            onclick="$('#modalDelete-list #formDelete-list').attr('action', '{{ route('listData.destroy', Crypt::encryptString($item->id)) }}')"><i
                                                class="bi bi-trash-fill"></i></a>


                                    </td>



                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </section>
    <!-- Basic Tables end -->
    {{-- modal edit --}}
    <div class="modal fade text-left modal-borderless" id="modalEdit" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Data Indicator</h5>
                    <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form id="formEdit" action="" method="post"enctype="multipart/form-data">
                        @csrf
                        @method('put')
                        <div class="form-group">
                            <label for="name">Nama Data Indikator</label>
                            <input type="text" class="form-control" id="name" name="name"
                                placeholder="Masukan Nama data" required>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-primary ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Edit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>



    {{-- modal edit --}}
    {{-- modal delete --}}
    <div class="modal fade text-left modal-borderless" id="modalDelete" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Hapus Data Indikator</h5>
                    <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form id="formDelete" action="" method="post">
                        @csrf
                        @method('delete')
                        <div class="form-group" id="pass">
                            <h5>Apakah anda yakin ingin menghapus item?</h5>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-primary ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Delete</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- modal delete --}}
    {{-- modal list indicator add --}}
    <div class="modal fade text-left modal-borderless" id="modalAdd-list" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Tambahkan Data Indikator</h5>
                    <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form action="{{ route('listData.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="name_add">List</label>
                            <input type="text" class="form-control" id="name_add" name="name_add"
                                placeholder="Masukan Nama Data" required>
                        </div>
                        <div class="form-group">
                            <label for="jumlah_add">Keterangan Jumlah</label>
                            <input type="text" class="form-control" id="jumlah_add" name="jumlah_add"
                                placeholder="Kosongkan jika ingin menggunakan Icon">
                        </div>
                        <div class="form-group">
                            <input type="hidden" class="form-control" id="id" name="id">
                        </div>
                        <div class="form-group">
                            <label for="">Icon</label>
                            <div class="display-row"style="justify-content:start;">

                                <input type="radio" class="btn-check" id="icon" name="icon"
                                    autocomplete="off"value="1">
                                <label class="btn btn-outline-danger m-2" for="icon"><i style="font-size: 24px;"
                                        class="bi bi-x"></i></label><br>
                                <input type="radio" class="btn-check" id="icon2" name="icon"
                                    autocomplete="off" value="2">
                                <label class="btn btn-outline-success m-2" for="icon2"><i style="font-size: 24px;"
                                        class="bi bi-check"></i></label><br>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-primary ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Submit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- modal list indicator add --}}

    {{-- modal list indicator update --}}
    <div class="modal fade text-left modal-borderless" id="modalEdit-list" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Data Indicator</h5>
                    <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form id="formEdit-list" action="" method="post"enctype="multipart/form-data">
                        @csrf
                        @method('put')
                        <div class="form-group">
                            <label for="name_   list">Nama Data Indikator</label>
                            <input type="text" class="form-control" id="name_list" name="name_list"
                                placeholder="Masukan Nama data" required>
                        </div>
                        <div class="form-group">
                            <label for="jumlah">Jumlah</label>
                            <input type="text" class="form-control" id="jumlah" name="jumlah"
                                placeholder="Masukan Jumlah">
                        </div>
                        <div class="form-group">
                            <input type="hidden" class="form-control" id="id" name="id">
                        </div>
                        <div class="form-group">
                            <label for="">Icon</label>
                            <div class="display-row"style="justify-content:start;">

                                <input type="radio" class="btn-check" id="icon3" name="icon"
                                    autocomplete="off"value="1">
                                <label class="btn btn-outline-danger m-2" for="icon3"><i style="font-size: 24px;"
                                        class="bi bi-x"></i></label><br>
                                <input type="radio" class="btn-check" id="icon4" name="icon"
                                    autocomplete="off" value="2">
                                <label class="btn btn-outline-success m-2" for="icon4"><i style="font-size: 24px;"
                                        class="bi bi-check"></i></label><br>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-primary ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Edit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>
    {{-- modal list indicator update --}}
    {{-- modal list indicator delete --}}
    <div class="modal fade text-left modal-borderless" id="modalDelete-list" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title">Hapus list Indikator</h5>
                    <button type="button" class="close rounded-full" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form id="formDelete-list" action="" method="post">
                        @csrf
                        @method('delete')
                        <div class="form-group" id="pass">
                            <h5>Apakah anda yakin ingin menghapus item?</h5>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-danger ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Delete</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- modal list indicator delete --}}

    </div>


    </div>
    </div>

    @push('script-modal')
        <script>
            $(document).on('click', '#edit', function() {
                let name = $(this).data('name')
                let id = $(this).data('id')

                $('.form-group #name').val(name)
                $('.form-group #id').val(id)


            });
            $(document).on('click', '#edit-list', function() {
                let name = $(this).data('name')
                let jumlah = $(this).data('jumlah')
                let id = $(this).data('id')
                let icon = $(this).data('icon')


                if (icon == 2) {
                    $('.form-group #icon4').attr("checked", true)
                }
                if (icon == 1) {
                    $('.form-group #icon3').attr("checked", true)
                }


                $('.form-group #name_list').val(name)
                $('.form-group #jumlah').val(jumlah)
                $('.form-group #id').val(id)


            });
            $(document).on('click', '#add', function() {
                let id = $(this).data('id')
                $('.form-group #id').val(id)


            });
        </script>
    @endpush
@endsection