@extends('layouts.main')

@section('title', 'Master Spesifikasi Item - Asset Management')

@section('pagetitle', 'Master Spesifikasi Item')

@section('css')
<link rel="stylesheet" type="text/css" href="{{url('global_assets/plugins/select2/css/select2-bootstrap.min.css')}}">
<style>
    .select2-container {
        border-bottom: 1px solid #0aa93e;
        padding-bottom: 5px;
    }
</style>
@stop

@section('content') 
<!-- BEGIN PAGE BASE CONTENT -->
<div class="card {{($data=='')?'hidden':''}}" id="spekitem-form">
    <div class="card-header header-elements-inline">
        <h5 class="card-title">Form Spesifikasi Item</h5>
    </div>

    <div class="card-body">
        <!-- BEGIN FORM-->
        <form action="{{route('master::spekitem-simpan')}}" method="post" class="form-horizontal">
            <fieldset class="mb-3">
                <input type="text" class="hidden" name="_token" value="{{csrf_token()}}">
                <input type="text" class="hidden" name="tipe" value="{{($data=='')?'0':'1'}}">
                <input type="text" class="hidden" name="kode" value="{{($data=='')?'':$data->id }}">

                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Nama</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control input-circle" name="nama" placeholder="Masukkan Nama" value="{{$data->name or ''}}">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Satuan</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control input-circle" name="satuan" placeholder="Masukkan Satuan" value="{{$data->satuan or ''}}">
                    </div>
                </div>
            </fieldset>

            <div class="text-right">
                <button type="submit" class="btn btn-primary legitRipple">Simpan</button> 
                <a href="{{route('master::spekitem-link')}}">
                    <button type="button" class="btn btn-light legitRipple">Kembali</button></a>
            </div>
        </form>
        <!-- END FORM-->
    </div>
</div>

<!-- BEGIN EXAMPLE TABLE PORTLET-->
<div class="card {{($data=='')?'':'hidden'}}" id="spekitem-data">
    <div class="card-header header-elements-inline">
        <h5 class="card-title">List Spesifikasi Item</h5>
    </div>

    <div class="card-body">
        @if (Session::has('error'))
            <div class="alert alert-danger alert-styled-right alert-dismissible">
                <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                {{ Session::get('error', 'Error') }}
            </div>
        @endif
        @if (Session::has('success'))
            <div class="alert alert-success alert-styled-right alert-arrow-right alert-dismissible">
                <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                {{ Session::get('success', 'Success') }}
            </div>
        @endif
        <button type="button" id="tambah-btn" class="btn btn-success legitRipple"> 
            <i class="fa fa-plus"></i> Tambah Baru
        </button>

        <table class="table datatable-basic" id="tabel">
            <thead>
                <tr>                                    
                    <th>Nama</th>
                    <th>Satuan</th>
                    <th>Menu</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    </div>
</div>
<!-- END EXAMPLE TABLE PORTLET-->
<!-- END PAGE BASE CONTENT -->
<!-- /form inputs -->
<div id="modal_default" class="modal fade" tabindex="-1" style="display: none;" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="form-kelompok">
                <div class="modal-header">
                    <h5 class="modal-title">Set Kelompok</h5>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <div class="col-lg-12">
                            <input type="hidden" name="spek_id">
                            <select class="form-control select2" id="kelompok" name="kelompok[]" multiple="multiple" style="width: 100%;">
                                <option value="">Pilih Kelompok</option>
                                @foreach($kelompok as $row)
                                <option value="{{$row->id}}">{{$row->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn bg-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi Hapus data -->
<div class="modal fade" id="konfirmasiModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Apakah anda yakin akan menghapus data tersebut?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tidak</button>
        <a href="" class="btn btn-primary" id="linkHapus">Ya</a>
        </div>
    </div>
    </div>
</div>

@endsection
@section('js')
<script type="text/javascript" src="{{url('global_assets/plugins/select2/js/select2.full.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/plugins/datatables/datatables.min.js')}}" type="text/javascript"></script>
<script>
$(document).ready(function () {
//    alert('aa');
    // $('#modal_default').modal('show');

    $(".select2").select2({
        // allowClear: true,
        tags: true,
        placeholder: "Pilih Kelompok"
    });

    var table = $('#tabel').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "{{ route('master::spekitem-data') }}",
        "columns": [
            {data: 'name'},
            {data: 'satuan'},
            {data: 'menu', orderable: false, searchable: false}
        ],
        "order": [[0, 'asc']],
        "autoWidth": false,
        "dom": '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
        "pagingType": "simple_numbers",
        "language": {
            search: '<span>Filter:</span> _INPUT_',
            searchPlaceholder: 'Type to filter...',
            lengthMenu: '<span>Show:</span> _MENU_',
            paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
        }
    });

    $(table.table().container()).on('click', 'tbody td .btn-kelompok', function () {
        var nTr = $(this).parents('tr')[0];
        var dt = table.row(nTr);
        var sData = dt.data();
        if (sData.kelompok) {
            var kelompok_str = sData.kelompok;
            if (kelompok_str.indexOf(',') > -1) {
                kelompok_arr = kelompok_str.split(',');
                console.log(kelompok_arr);
                $('#modal_default').find('select#kelompok').val(kelompok_arr).trigger('change');
            }else if(kelompok_str.length > 0){
                kelompok_arr = kelompok_str;
                console.log(kelompok_arr);
                $('#modal_default').find('select#kelompok').val(kelompok_arr).trigger('change');
            }
        }else{
            $('#modal_default').find('select#kelompok').val("").trigger('change');
        }
        
        $('#modal_default').find('input[name=spek_id]').val(sData.id);
        $('#modal_default').modal('show');
    });

    $("#tambah-btn").click(function () {
        $("#spekitem-form").removeClass('hidden');
        $("#spekitem-data").addClass('hidden');
    });

    $('#form-kelompok').submit(function () {
        $.ajax({
            type: "POST",
            url: "{{route('master::spekitem-kelompok-simpan')}}",
            data: $(this).serialize(),
            success: function (response) {
                // Solid primary
                // $('#pnotify-solid-primary').on('click', function () {
                    new PNotify({
                        title: response.title,
                        text: response.message,
                        addclass: 'bg-primary border-primary'
                    });
                    table.ajax.reload();
                    $('#modal_default').modal('hide');
                // });
            }
        });
        return false;
    });

    $(document).on("click", "#buttonModal", function () {
        var id = $(this).attr('data-id');
        console.log(id);
        $("#linkHapus").prop("href", "https://asset.pdam-sby.go.id/master/SpekItem/Hapus/"+id);
    });
});

    
</script>
@endsection