@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>

            
          
            <form id="formStore" action="{{ $config['form']->action }}" enctype="multipart/form-data">
                @method($config['form']->method)
                @csrf
                <div class="row justify-content-center">
                    <div class="col-sm-12 col-lg-6">
                        
                        <input type="hidden" name="id" value="{{$data->id ?? ''}}" id="input-id">
                        <input type="hidden" name="survey_id" value="{{$survey_id}}">
                        <input type="hidden" name="toko_id" value="{{$toko_id}}">
                        <div class="card">
                            <div class="card-header justify-content-between">
                                <div class="header-title">
                                    <div class="row">
                                    <div class="col-sm-6 col-lg-6">
                                        <h4 class="card-title">{{ $config['title'] }}</h4>
                                    </div>
                                    <div class="col-sm-6 col-lg-6">
                                        
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <div id="errorCreate" class="mb-3" style="display:none;">
                                        <div class="alert alert-danger" role="alert">
                                            <div class="alert-icon"><i class="flaticon-danger text-danger"></i></div>
                                            <div class="alert-text">
                                            </div>
                                        </div>
                                    </div>
                                    <label class="form-label" for="rekening_id">Rekening Sub Sub Rincian Objek <span class="text-danger">*</span>:</label>
                                    <select name="rekening_id" class="form-control" id="rekening_id">
                                        @if(isset($data->item->rekening_id))
                                            <option value="{{$data->rekening->id}}">{{$data->rekening->name}}</option>
                                        @endif
                                    </select>

                                    <label class="form-label" for="merek_id">Merek <span class="text-danger">*</span>:</label>
                                    <input type="text" name="merek_id" value="{{ $data->item->merk->nama ?? ''}}" class="form-control">
                                    

                                    <label class="form-label" for="harga">Harga<span class="text-danger">*</span> :</label>
                                    @if(isset($data->harga))
                                        <input type="text" class="form-control" value="{{ number_format($data->harga, 0, ',', '.')  }}" name="harga" id="harga">
                                    @else
                                        <input type="text" class="form-control" value="" name="harga" id="harga">
                                    @endif
                                        
                                    <label class="form-label" for="nama">Nama <span class="text-danger">*</span> :</label>
                                    <input type="text" class="form-control" value="{{ $data->item->nama ?? '' }}" name="nama" id="nama">
                                    
                                    <label class="form-label" for="deskripsi">Deskripsi :</label>
                                    <textarea name="deskripsi" class="form-control" id="" cols="5" rows="5">{{ $data->item->deskripsi ?? '' }}</textarea>
                                    
                                    <label class="form-label" for="klasifikasi">Klasifikasi <span class="text-danger">*</span>:</label>
                                    <select name="klasifikasi" class="form-control" id="klasifikasi">
                                        <option value="Fisik" >Fisik</option>
                                        <option value="Non Fisik" >Non Fisik</option>
                                    </select>
                                    
                                    <label class="form-label" for="jenis_satuan_id">Jenis Satuan <span class="text-danger">*</span>:</label>
                                    <select name="jenis_satuan_id" class="form-control" id="jenis_satuan_id">
                                        @if(isset($data->item->jenis_satuan_id))
                                            <option value="{{$data->item->jenis_satuan_id}}">{{$data->item->jenissatuan->jenis_satuan}}</option>
                                        @endif
                                    </select>
        
                                    <label class="form-label" for="satuan_id_1">Satuan 1 <span class="text-danger">*</span>:</label>
                                    <select name="satuan_id_1" class="form-control" id="satuan_id_1">
                                        @if(isset($data->item->satuan_id_1))
                                            <option value="{{$data->item->satuan_id_1}}">{{$data->item->satuan1->uraian}}</option>
                                        @endif
                                    </select>

                                    <label class="form-label" for="satuan_id_2">Satuan 2 :</label>
                                    <select name="satuan_id_2" class="form-control" id="satuan_id_2">
                                        @if(isset($data->item->satuan_id_2))
                                            <option value="{{$data->item->satuan_id_2}}">{{$data->item->satuan2->uraian}}</option>
                                        @endif
                                    </select>

                                    <label class="form-label" for="satuan_id_3">Satuan 3 :</label>
                                    <select name="satuan_id_3" class="form-control" id="satuan_id_3">
                                        @if(isset($data->item->satuan_id_3))
                                            <option value="{{$data->item->satuan_id_3}}">{{$data->item->satuan3->uraian}}</option>
                                        @endif
                                    </select>
                                    
                                    <label class="form-label" for="spesifikasi">Spesifikasi</label>
                                        
                                    <table id="dt" class="table table-sm table-bordered" width="100%">
                                        <thead>
                                            <tr>
                                                <th>Key</th>
                                                <th>Value</th>
                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr>
                                                <th colspan="2" class="text-end">
                                                    <div class="btn-group">
                                                        <button class="btn btn-light" type="button" id="btn-remove"><i class="fa fa-minus"></i></button>
                                                        <button class="btn btn-light" type="button" id="btn-add"><i class="fa fa-plus"></i></button>
                                                    </div>
                                                </th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                                <br>
                                <div class="btn-group float-end" role="group" aria-label="Basic outlined example">
                                    <a onclick="history.back()" class="btn btn-sm btn-outline-primary"><i
                                        class="fa-solid fa-rotate-left"></i> Back</a>
                                    <button type="submit" class="btn btn-sm btn-primary">Save <i
                                        class="fa-solid fa-floppy-disk"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </form>
        </div> 
    </div>
@include('master.footer')
    <script>
        (function($) {

        var Defaults = $.fn.select2.amd.require('select2/defaults');

        $.extend(Defaults.defaults, {
        dropdownPosition: 'auto'
        });

        var AttachBody = $.fn.select2.amd.require('select2/dropdown/attachBody');

        var _positionDropdown = AttachBody.prototype._positionDropdown;

        AttachBody.prototype._positionDropdown = function() {

        var $window = $(window);

            var isCurrentlyAbove = this.$dropdown.hasClass('select2-dropdown--above');
            var isCurrentlyBelow = this.$dropdown.hasClass('select2-dropdown--below');

            var newDirection = null;

            var offset = this.$container.offset();

            offset.bottom = offset.top + this.$container.outerHeight(false);
            
            var container = {
                height: this.$container.outerHeight(false)
            };

        container.top = offset.top;
        container.bottom = offset.top + container.height;

        var dropdown = {
        height: this.$dropdown.outerHeight(false)
        };

        var viewport = {
        top: $window.scrollTop(),
        bottom: $window.scrollTop() + $window.height()
        };

        var enoughRoomAbove = viewport.top < (offset.top - dropdown.height);
        var enoughRoomBelow = viewport.bottom > (offset.bottom + dropdown.height);

        var css = {
        left: offset.left,
        top: container.bottom
        };

        // Determine what the parent element is to use for calciulating the offset
        var $offsetParent = this.$dropdownParent;

        // For statically positoned elements, we need to get the element
        // that is determining the offset
        if ($offsetParent.css('position') === 'static') {
        $offsetParent = $offsetParent.offsetParent();
        }

        var parentOffset = $offsetParent.offset();

        css.top -= parentOffset.top
        css.left -= parentOffset.left;

        var dropdownPositionOption = this.options.get('dropdownPosition');

            if (dropdownPositionOption === 'above' || dropdownPositionOption === 'below') {

                newDirection = dropdownPositionOption;

        } else {
                
            if (!isCurrentlyAbove && !isCurrentlyBelow) {
                    newDirection = 'below';
                }

                if (!enoughRoomBelow && enoughRoomAbove && !isCurrentlyAbove) {
                newDirection = 'above';
                } else if (!enoughRoomAbove && enoughRoomBelow && isCurrentlyAbove) {
                newDirection = 'below';
                }

        }

        if (newDirection == 'above' ||
            (isCurrentlyAbove && newDirection !== 'below')) {
        css.top = container.top - parentOffset.top - dropdown.height;
        }

        if (newDirection != null) {
        this.$dropdown
            .removeClass('select2-dropdown--below select2-dropdown--above')
            .addClass('select2-dropdown--' + newDirection);
        this.$container
            .removeClass('select2-container--below select2-container--above')
            .addClass('select2-container--' + newDirection);
        }

        this.$dropdownContainer.css(css);

        };

        })(window.jQuery);
    </script>
    <script>
        $(document).ready(function () {
            var harga = document.getElementById('harga');
            harga.addEventListener('keyup', function(e)
            {
                harga.value = formatNumber(this.value);
            });
            
            harga.addEventListener('keydown', function(event)
            {
                limitCharacter(event);
            });
            
            
            function formatNumber(bilangan, prefix)
            {
                var number_string = bilangan.replace(/[^,\d]/g, '').toString(),
                    split	= number_string.split(','),
                    sisa 	= split[0].length % 3,
                    rupiah 	= split[0].substr(0, sisa),
                    ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
                    
                if (ribuan) {
                    separator = sisa ? '.' : '';
                    rupiah += separator + ribuan.join('.');
                }
                
                rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
                return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
            }
            
            function limitCharacter(event)
            {
                key = event.which || event.keyCode;
                if ( key != 188 // Comma
                    && key != 8 // Backspace
                    && key != 17 && key != 86 & key != 67 // Ctrl c, ctrl v
                    && (key < 48 || key > 57) // Non digit
                    // Dan masih banyak lagi seperti tombol del, panah kiri dan kanan, tombol tab, dll
                    ) 
                {
                    event.preventDefault();
                    return false;
                }
            }
            @php
                $spesifikasi = [];
                if( isset($data->item->spesifikasi) ){
                    $array = json_decode($data->item->spesifikasi);
                    foreach($array AS $key => $value){
                        array_push($spesifikasi, ['spesifikasi'=>[$key=>$value]]);
                    }
                }

                echo "let json = " . json_encode($spesifikasi) . ';';
            @endphp
            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();
                    });
                }
            });
            $('#rekening_id').select2({
                width: '100%',
                theme: "bootstrap-5",
                selectionCssClass: "select2--small",
                dropdownCssClass: "select2--small",
                dropdownPosition: 'below',
                allowClear: true,
                placeholder: 'Pilih Data',
                ajax: {
                    url: "{{route('item.rekening')}}",
                    dataType: 'json',
                    delay: 250,
                    data: function(e) {
                        return {
                            q: e.term || '',
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    text: item.name,
                                    id: item.id
                                }
                            })
                        };
                    },
                    cache: true
                }
            });
            
            $('#satuan_id_1, #satuan_id_2, #satuan_id_3').select2({
                width: '100%',
                theme: "bootstrap-5",
                selectionCssClass: "select2--small",
                dropdownCssClass: "select2--small",
                allowClear: true,
                dropdownPosition: 'below',  
                placeholder: 'Pilih Satuan',
                ajax: {
                    url: "{{route('item.satuan')}}",
                    dataType: 'json',
                    delay: 250,
                    data: function(e) {
                        return {
                            q: e.term || '',
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    text: item.name,
                                    id: item.id
                                }
                            })
                        };
                    },
                    cache: true
                }
            });
            $('#jenis_satuan_id').select2({
                width: '100%',
                theme: "bootstrap-5",
                selectionCssClass: "select2--small",
                dropdownCssClass: "select2--small",
                dropdownPosition: 'below',  
                allowClear: true,
                placeholder: 'Pilih Jenis Satuan',
                ajax: {
                    url: "{{route('item.jenis_satuan')}}",
                    dataType: 'json',
                    delay: 250,
                    data: function(e) {
                        return {
                            q: e.term || '',
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    text: item.name,
                                    id: item.id
                                }
                            })
                        };
                    },
                    cache: true
                }
            });
            
            
            $('.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');

            $("#formStore").submit(function (e) {
               e.preventDefault();
               let form = $(this);
               let btnSubmit = form.find("[type='submit']");
               let btnSubmitHtml = btnSubmit.html();
               let url = form.attr("action");
               let data = new FormData(this);
               $.ajax({
                  cache: false,
                  processData: false,
                  contentType: false,
                  type: "POST",
                  url: url,
                  data: data,
                  beforeSend: function () {
                     btnSubmit.addClass("disabled").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...').prop("disabled", "disabled");
                  },
                  success: function (response) {
                     let errorCreate = $('#errorCreate');
                     errorCreate.css('display', 'none');
                     errorCreate.find('.alert-text').html('');
                     btnSubmit.removeClass("disabled").html(btnSubmitHtml).removeAttr("disabled");
                     if (response.status === "success") {
                        toastr.success(response.message, 'Success !');
                        setTimeout(function () {
                           if (response.redirect === "" || response.redirect === "reload") {
                              location.reload();
                           } else {
                              location.href = response.redirect;
                           }
                        }, 1000);
                     } else {
                        toastr.error((response.message ? response.message : "Please complete your form"), 'Failed !');
                        if (response.error !== undefined) {
                           errorCreate.removeAttr('style');
                           $.each(response.error, function (key, value) {
                              errorCreate.find('.alert-text').append('<span style="display: block">' + value + '</span>');
                           });
                        }
                     }
                  },
                  error: function (response) {
                     btnSubmit.removeClass("disabled").html(btnSubmitHtml).removeAttr("disabled");
                     toastr.error(response.responseJSON.message, 'Failed !');
                  }
               });
            });
            
         });
     </script>
   </body>
</html>