@include('master.header')
<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0">{{$config['title']}}</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                @foreach($config['breadcrumbs'] ?? array() as $item)
                                <li class="breadcrumb-item"><a
                                        href="{{ $item['url'] ?? '#' }}">{{ $item['title'] ?? '' }}</a></li>
                                @endforeach
                            </ol>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-md-8 col-sm-12">
                  @foreach($survey_item as $row)
                        <div class="card border-info mb-3">
                            <div class="card-header">
                                <h4>Items</h4>

                            </div>
                            <div class="card-body row justify-content-between">
                                <div class="col-6">
                                    <h5><b>Nama</b></h5>
                                    <p style="color:#000">{{$row->item->nama}}</p>
                                </div>
                                <div class="col-6">
                                    <h5><b>Merk</b></h5>
                                    <p style="color:#000">{{$row->item->merk->nama}}</p>
                                </div>
                                <div class="col-6">
                                    <h5><b>Satuan 1</b></h5>
                                    <p style="color:#000">{{$row->item->satuan1->uraian}}</p>
                                </div>
                                <div class="col-6">
                                    <h5><b>Harga</b></h5>
                                    <p style="color:#000">{{number_format($row->harga)}}</p>
                                </div>
                                <div class="col-6">
                                    <h5><b>Satuan 2</b></h5>
                                    <p style="color:#000">{{$row->item->satuan2->uraian ?? ''}}</p>
                                </div>
                                <div class="col-6">
                                    <h5><b>Toko</b></h5>
                                    <p style="color:#000">{{$row->toko->nama}}</p>
                                </div>
                                <div class="col-6">
                                    <h5><b>Satuan 3</b></h5>
                                    <p style="color:#000">{{$row->item->satuan3->uraian ?? ''}}</p>
                                </div>
                                <div class="col-6">
                                    <h5><b>Jenis Satuan</b></h5>
                                    <p style="color:#000">{{$row->item->jenissatuan->jenis_satuan ?? ''}}</p>
                                </div>
                                <div class="col-6">
                                    <h5><b>Spesifikasi</b></h5>
                                                                         <p style="color:#000">{!! $spesifikasi !!}</p>
                                </div>
                                
                            </div>
                            <div class="row justify-content-end">
                                <div class="col-4">
                                    <button data-id="{{$row->id}}" data-itemid="{{$row->item_id}}" data-bs-toggle="modal" data-bs-target="#editModal" class="btn btn-sm btn-primary btn-data me-3 mb-3 float-end">
                                    Aksi
                                    </button>
                                </div>
                            </div>
                        </div>
                  @endforeach
                </div>
            </div>
          <a href="{{route('surveyor.tambah', [$survey_id, $toko_id])}}" class="btn btn-primary position-fixed bottom-0 end-0 me-2 mb-2 rounded-circle" style="z-index:99"><i class="bx bx-plus"></i></a>
            <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">Tambah Survey Item</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body row justify-content-center" id="modal-edit">
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>
@include('master.footer')
    
    <script>
        $(document).ready(function () {
                
            var json = [];
            var dt = $('#dt').DataTable({
                data : json,
                orderable : false,
                info : false,
                paging : false,
                searching : false,
                columns : [
                    {
                        data : 'spesifikasi',
                        name : 'spesifikasi',
                        render : function(data, type, row, meta){
                            let key = Object.keys(data)[0];
                            key = (key != undefined) ? key: ``;
                            return `<input class="form-control" name="spesifikasi[${meta.row}][key]" value="${key}" required="required">`;
                        }
                    },
                    {
                        data : 'spesifikasi',
                        name : 'spesifikasi',
                        render : function(data, type, row, meta){
                            let value = Object.values(data)[0];
                            value = (value != undefined) ? value: ``;
                            return `<input class="form-control" name="spesifikasi[${meta.row}][value]" value="${value}" required="required">`;
                        }
                    },
                ],
                rowCallback : function(row, data){
                    $(row).find('input').on({
                        keyup : function(){
                            let str = $(this).val();
                            str = String(str).toCamelCase();
                            str = str.charAt(0).toUpperCase() + str.slice(1);
                            $(this).val(str);
                        }
                    });
                },
                initComplete : function(settings){
                    let api = this.api();
                    $('#btn-add').click(function(e){
                        e.preventDefault();
                        api.row.add({
                            'spesifikasi' : { }
                        }).draw();
                    });
                    $('#btn-remove').click(function(e){
                        e.preventDefault();
                        api.row(':last').remove().draw();
                    });
                }
            });
            
            $('.btn-data').click(function(e){
                let id = $(this).data('id');
                let item_id = $(this).data('itemid');
                let link = `{{ route("surveyor.ubah", [':id', ':item_id']) }}`;
                link = link.replace(':id', id);
                link = link.replace(':item_id', item_id);

                let html =`<div class="col-6 d-grid gap-2">
                            <a class="btn btn-warning" href="${link}">Edit</a>
                        </div>
                        <div class="col-6 d-grid gap-2">
                            <a href="#" class="btn btn-danger btn-delete" data-id="${id}" data-itemid="${item_id}">Hapus</a>
                        </div>`;
                $('#modal-edit').html(html);

                $('.btn-delete').click(function(){
                    let id = $(this).data('id'),
                    item_id = $(this).data('itemid'),
                    url = `{{ route("surveyor.hapus", [':id', ':item_id']) }}`;
                    url = url.replace(':id', id);
                    url = url.replace(':item_id', item_id);
                    Swal.fire({
                        title   : "Anda Yakin ?",
                        text    : "Data tidak dapat dikembalikan setelah di hapus!",
                        icon    : "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Ya, Hapus!",
                        cancelButtonText: "Tidak, Batalkan",
                    }).then((result) => {
                        if (result.value) {
                        $.ajax({
                            url: url,
                            type: "POST",
                            data: {
                                _token  : '{{ csrf_token() }}',
                                _method : 'DELETE'
                            },
                            error   : function(response){
                            toastr.error(response, 'Failed !');
                            },
                            success : function(response) {
                            if (response.status === "success") {
                                toastr.success(response.message, 'Success !');
                                setTimeout(function() {
                                    location.reload();
                                }, 1000);
                            } else {
                                toastr.error((response.message ? response.message : "Please complete your form"), 'Failed !');
                            }
                            }
                        });
                        }
                    });
                });
            });
            
            
            
            $('.feature-all').on({
               click: function () {
                  let checked = $(this).prop("checked");
                  $(this).closest('table').find('.function-item').prop('checked', checked).trigger('change');
               }
            });
            $('.function-item').change(function () {
               let checked = $(this).closest('td').find('.function-item').length == $(this).closest('td').find('.function-item:checked').length;
               let checked_menu = $(this).closest('td').find('.function-item:checked').length > 0;
               $(this).closest('tr').find('.function-all').prop('checked', checked).trigger('change');
               $(this).closest('tr').find('.menu-item').prop('checked', checked_menu).trigger('change');
            });
            $('.function-all').on({
               click: function () {
                  let checked = $(this).prop("checked");
                  $(this).closest('tr').find('.function-item').prop('checked', checked).trigger('change');
               },
               change: function () {
                  let checked = $(this).closest('table').find('.function-all').length == $(this).closest('table').find('.function-all:checked').length;
                  $(this).closest('table').find('.feature-all').prop('checked', checked).trigger('change');
               }
            });
            $('.function-item').trigger('change');

            
         });
      </script>
   </body>
</html>