@extends('layout')

@section('css')
<style type="text/css">
    .datatable-column-width {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
        max-height: 90px;
    }
</style>
@endsection

@section('content')

<!-- Page header -->
<div class="page-header page-header-light">
    <div class="page-header-content header-elements-md-inline">
        <div class="page-title d-flex">
            <h3 class="font-weight-bold"><span class="font-weight-light">Spare Harga Jual -</span> Data</h3>
            <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
        </div>
    </div>
</div>
<!-- /page header -->

<!-- Content area -->
<div class="content">
    
    <div class="row">
        <div class="col-md-6">
            <!-- Hover rows -->
            <div class="card">
                <div class="card-header header-elements-inline">
                    {{-- <a href="{{ route('users.create')}}"><button type="button"
                        class="btn btn-primary rounded-round"><i class="icon-help mr-2"></i> Tambah</button></a> --}}
                    </div>
                    
                    <table class="table datatable-basic table-hover">
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>Dari</th>
                                <th>Sampai</th>
                                <th>Penurunan Tingkat</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                            @if (!$masterspares->isEmpty())
                            @foreach ($masterspares as $masterspare)
                            <tr>
                                <td>
                                    <div class="datatable-column-width">
                                        {{$loop->iteration}}
                                    </div>
                                </td>
                                <td>
                                    <div class="datatable-column-width">
                                        {{ribuan(@$masterspare->range_start)}}
                                    </div>
                                </td>
                                <td>
                                    <div class="datatable-column-width">{{ribuan($masterspare->range_end)}}</div>
                                </td>
                                <td>
                                    <div class="datatable-column-width">{{$masterspare->turunan_tingkat}}</div>
                                </td>
                                <td align="center">
                                    <button type="button" class="btn btn-primary btn-icon editbutton" title="Ubah"
                                    data-range_start="{{$masterspare->range_start}}" data-range_end="{{$masterspare->range_end}}" 
                                    data-turunan_tingkat="{{$masterspare->turunan_tingkat}}" data-uri="sparehargajual/{{$masterspare->id}}" >
                                    <i class="icon-pencil7"></i>
                                </button>
                                <a class="delbutton" data-toggle="modal" data-target="#modal_theme_danger"
                                data-uri="sparehargajual/{{$masterspare->id}}"><button type="button" class="btn btn-danger btn-icon"
                                title="Hapus"><i class="icon-x"></i></button></a>
                                </td>
                        </tr>
                        @endforeach
                        @endif
                        
                        </tbody>
                    </table>
            </div>
            <!-- /hover rows -->
        </div>
        <div class="col-md-6">
            <!-- Hover rows -->
            <div class="card">
                <div class="card-header header-elements-inline">
                </div>
                <div class="card-body">
                    <form class="form-validate-jquery" action="{{route( 'sparehargajual.store' )}}" method="post" id="myform" enctype="multipart/form-data">
                        @csrf
                        <fieldset class="mb-3">
                            <legend class="text-uppercase font-size-sm font-weight-bold" id="formtitle">Tambah Setting Spare Harga Jual
                            </legend>
                            <input type="hidden" name="_method" id="method" value="post">
                            
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Dari (Rp)</label>
                                <div class="col-lg-9">
                                    <input type="number" id="range_start" name="range_start" max="9999999" class="form-control border-teal border-1" placeholder="Dari" required>
                                </div>
                            </div>
                            
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Sampai (Rp)</label>
                                <div class="col-lg-9">
                                    <input type="number" id="range_end" name="range_end" max="9999999" class="form-control border-teal border-1" placeholder="Sampai" required>
                                </div>
                            </div>
                            
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Penurunan Tingkat</label>
                                <div class="col-lg-9">
                                    <input type="number" id="turunan_tingkat" max="100" name="turunan_tingkat" class="form-control border-teal border-1" placeholder="Penurunan Tingkat" required>
                                </div>
                            </div>
                        </fieldset>
                        <div class="text-right">
                            <a type="button" class="btn btn-light resetbutton">Reset <i class="icon-undo"></i></a>
                            <button type="submit" class="btn btn-primary">Simpan <i
                                class="icon-paperplane ml-2"></i></button>
                            </div>
                        </form>
                    </div>
                    
                </div>
                <!-- /hover rows -->
            </div>
        </div>
        
    </div>
    <!-- /content area -->
    
    <!-- Danger modal -->
    <div id="modal_theme_danger" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-danger" align="center">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                
                <form action="" method="post" id="delform">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body" align="center">
                        <h2> Hapus Data? </h2>
                    </div>
                    
                    <div class="modal-footer">
                        <a type="button" class="btn btn-link" data-dismiss="modal">Batal</a>
                        <button type="submit" class="btn bg-danger">Hapus</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /default modal -->
    
    @endsection
    
    @section('js')
    <!-- Theme JS files -->
    <script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/editors/summernote/summernote.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
    
    <script src="{{asset('assets/js/app.js')}}"></script>
    <script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
    
    <script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>
    
    <script>
        //modal delete
        $(document).on("click", ".delbutton", function () {
            var url = $(this).data('uri');
            $("#delform").attr("action", url);
        });
        
        var DatatableBasic = function() {
            
            // Basic Datatable examples
            var _componentDatatableBasic = function() {
                if (!$().DataTable) {
                    console.warn('Warning - datatables.min.js is not loaded.');
                    return;
                }
                
                // Setting datatable defaults
                $.extend( $.fn.dataTable.defaults, {
                    autoWidth: false,
                    columnDefs: [{ 
                        orderable: false,
                        width: 150,
                        targets: [ 3 ]
                    }],
                    dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                    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;' }
                    }
                });
                
                // Basic datatable
                $('.datatable-basic').DataTable();
                
                // Alternative pagination
                $('.datatable-pagination').DataTable({
                    pagingType: "simple",
                    language: {
                        paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
                    }
                });
                
                // Datatable with saving state
                $('.datatable-save-state').DataTable({
                    stateSave: true
                });
                
                // Scrollable datatable
                var table = $('.datatable-scroll-y').DataTable({
                    autoWidth: true,
                    scrollY: 300
                });
                
                // Resize scrollable table when sidebar width changes
                $('.sidebar-control').on('click', function() {
                    table.columns.adjust().draw();
                });
            };
            
            // Select2 for length menu styling
            var _componentSelect2 = function() {
                if (!$().select2) {
                    console.warn('Warning - select2.min.js is not loaded.');
                    return;
                }
                
                // Initialize
                $('.dataTables_length select').select2({
                    minimumResultsForSearch: Infinity,
                    dropdownAutoWidth: true,
                    width: 'auto'
                });
            };
            
            
            //
            // Return objects assigned to module
            //
            
            return {
                init: function() {
                    _componentDatatableBasic();
                    _componentSelect2();
                }
            }
        }();
        
        
        // Initialize module
        // ------------------------------
        
        document.addEventListener('DOMContentLoaded', function() {
            DatatableBasic.init();
        });
    </script>
    <script type="text/javascript">
        $( document ).ready(function() {
            
            $('.form-control-select2').select2();
            
            //$('.summernote').summernote({
                //	height: 200,
                //	toolbar: []
                //});
                
                // Default style
                @if(session('error'))
                new PNotify({
                    title: 'Error',
                    text: '{{ session('error') }}.',
                    icon: 'icon-blocked',
                    type: 'error'
                });
                @endif
                @if ( session('success'))
                new PNotify({
                    title: 'Success',
                    text: '{{ session('success') }}.',
                    icon: 'icon-checkmark3',
                    type: 'success'
                });
                @endif
                
                $('.editbutton').on('click', function(){
                    var range_start = $(this).data('range_start');
                    var range_end = $(this).data('range_end');
                    var turunan_tingkat = $(this).data('turunan_tingkat');
                    var uri = $(this).data('uri');
                    
                    $('#myform').attr("action", uri);				
                    $('#method').val("put");
                    $('#range_start').val(range_start);
                    $('#range_end').val(range_end);
                    $('#turunan_tingkat').val(turunan_tingkat);
                    $('#formtitle').html('Ubah Setting Spare Harga Jual');
                    
                });
                
                $('.resetbutton').on('click', function(){
                    
                    $('#myform').attr("action", "{{route( 'sparehargajual.store' )}}");				
                    $('#method').val("post");
                    $('#range_start').val("");
                    $('#range_end').val("");
                    $('#turunan_tingkat').val("");
                    $('#formtitle').html('Tambah Setting Spare Harga Jual');
                });
                
            });
        </script>
        @endsection