@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 }}" method="POST">
                @method($config['form']->method)
                @csrf
                <div class="row justify-content-center">
                    <div class="col-sm-12 col-lg-6">
                    <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>
                            </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($rekening->id))
                                    <option value="{{ $rekening->id }}">{{$rekening->name}}</option>
                                    @endif
                                </select>
                                
                                <label class="form-label" for="merek_id">Merek <span class="text-danger">*</span>:</label>
                                <select name="merek_id" class="form-control" id="merek_id">
                                    @if(isset($data->merek_id))
                                        <option value="{{ $data->merek_id }}">{{$data->merk->nama}}</option>
                                    @endif
                                </select>

                                <label class="form-label" for="nama">Nama <span class="text-danger">*</span> :</label>
                                <input type="text" class="form-control" value="{{ $data->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->deskripsi ?? '' }}</textarea>
                                
                                <div class="row">
                                    <div class="col-4">
                                        <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>
                                    </div>
                                    <div class="col-8">
                                        <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->jenis_satuan_id))
                                                <option value="{{ $data->jenis_satuan_id }}">{{$data->jenissatuan->jenis_satuan}}</option>
                                            @endif
                                        </select>
                                    </div>
                                </div>
 
                                <div class="row">
                                    <div class="col-4">
                                        <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->satuan_id_1))
                                                <option value="{{ $data->satuan_id_1 }}">{{$data->satuan1->uraian}}</option>
                                            @endif
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <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->satuan_id_2))
                                                <option value="{{ $data->satuan_id_2 }}">{{$data->satuan2->uraian}}</option>
                                            @endif
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <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->satuan_id_3))
                                                <option value="{{ $data->satuan_id_3 }}">{{$data->satuan3->uraian}}</option>
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                
                                <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>
            </form>

            
        </div> 
    </div>
@include('master.footer')
    
    <script>
        $(document).ready(function () {
            @php
                $spesifikasi = [];
                if( isset($data->spesifikasi) ){
                    $array = json_decode($data->spesifikasi);
                    foreach($array AS $key => $value){
                        array_push($spesifikasi, ['spesifikasi'=>[$key=>$value]]);
                    }
                }

                echo "let json = " . json_encode($spesifikasi) . ';';
            @endphp
            $('#rekening_id').select2({
                width: '100%',
                theme: "bootstrap-5",
                selectionCssClass: "select2--small",
                dropdownCssClass: "select2--small",
                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
                }
            });
            $('#merek_id').select2({
                width: '100%',
                theme: "bootstrap-5",
                selectionCssClass: "select2--small",
                dropdownCssClass: "select2--small",
                allowClear: true,
                placeholder: 'Pilih Merek',
                ajax: {
                    url: "{{route('item.merek')}}",
                    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,
                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",
                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');
            $('#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();
                    });
                }
            });
            $("#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>