@extends('layout')

@section('title', 'Biaya Tambahan Layanan Payment Gateway')

@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">Config Payment Gateway Service Fee -</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">
            <!-- Hover rows -->
            <div class="card">
                <table class="table datatable-basic table-hover">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Name</th>
                            <th>Value</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($biayalayanans) == 0)
                            <tr>
                                <td colspan="4" class="text-center">No data available in table</td>
                            </tr>
                        @else
                            @php
                            $i = 1;
                            @endphp
                            @foreach ($biayalayanans as $biayalayanan)
                                <tr>
                                    <td>{{$i}}</td>
                                    <td>{{@$biayalayanan->methods->name}}</td>
                                    <td>{{ribuan(@$biayalayanan->biaya_layanan)}}</td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-primary btn-icon editbutton" title="Ubah"
                                            data-nama="{{@$biayalayanan->methods->name}}" data-value="{{@$biayalayanan->biaya_layanan}}"
                                            data-uri="biayalayanan/{{@$biayalayanan->id}}">
                                            <i class="icon-pencil7"></i>
                                        </button>
                                    </td>
                                </tr>
                            @php
                            $i++;
                            @endphp
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
            <!-- /hover rows -->
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header header-elements-inline">
                </div>
                <div class="card-body">
                    <form class="form-validate-jquery" action="{{ route('biayalayanan.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">Change Payment Gateway Service Fee
                            </legend>
                            <input type="hidden" name="_method" id="method" value="post">

                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Name</label>
                                <div class="col-lg-9">
                                    <input type="text" id="nama" name="nama"
                                        class="form-control border-teal border-1" disabled>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Value</label>
                                <div class="col-lg-9">
                                    <input type="text" id="value" name="value"
                                        class="form-control border-teal border-1" disabled>
                                </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" id="button-submit" style="display: none">
                                Submit
                                <i class="icon-paperplane ml-2"></i>
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </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> {{ __('global.alerthapus') }} </h2>
                </div>

                <div class="modal-footer">
                    <a type="button" class="btn btn-link" data-dismiss="modal"> {{ __('global.cancel') }}</a>
                    <button type="submit" class="btn bg-danger"> {{ __('global.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('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
<script src="{{asset('assets/js/app.js')}}"></script>
<script>
    //Popup
    $('[data-popup="lightbox"]').fancybox({
        padding: 3
    });

    //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: 100,
                    targets: [ 0, 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();
            }
        }
    }();

    var FormValidation = function () {

        // Validation config
        var _componentValidation = function () {
            if (!$().validate) {
                console.warn('Warning - validate.min.js is not loaded.');
                return;
            }

            // Initialize
            var validator = $('.form-validate-jquery').validate({
                ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
                errorClass: 'validation-invalid-label',
                //successClass: 'validation-valid-label',
                validClass: 'validation-valid-label',
                highlight: function (element, errorClass) {
                    $(element).removeClass(errorClass);
                },
                unhighlight: function (element, errorClass) {
                    $(element).removeClass(errorClass);
                },
                // success: function(label) {
                //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
                //},

                // Different components require proper error label placement
                errorPlacement: function (error, element) {

                    // Unstyled checkboxes, radios
                    if (element.parents().hasClass('form-check')) {
                        error.appendTo(element.parents('.form-check').parent());
                    }

                    // Input with icons and Select2
                    else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
                        error.appendTo(element.parent());
                    }

                    // Input group, styled file input
                    else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
                        error.appendTo(element.parent().parent());
                    }

                    // Other elements
                    else {
                        error.insertAfter(element);
                    }
                },

            });

            // Reset form
            $('#reset').on('click', function () {
                validator.resetForm();
            });
        };

        // Return objects assigned to module
        return {
            init: function () {
                _componentValidation();
            }
        }
    }();

    // Initialize module
    // ------------------------------

    document.addEventListener('DOMContentLoaded', function () {
        DatatableBasic.init();
        FormValidation.init();
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {

        $('.form-control-select2').select2();

        // Default style
        @if (session('error'))
            new PNotify({
                title: '{{__("global.error")}}',
                text: '{{ session('error') }}.',
                icon: 'icon-blocked',
                type: 'error'
            });
        @endif
        @if (session('success'))
            new PNotify({
                title: '{{__("global.success")}}',
                text: '{{ session('success') }}.',
                icon: 'icon-checkmark3',
                type: 'success'
            });
        @endif

    });
</script>
<script type="text/javascript">
    //Preview logo_groups_hotel
    function preview() {
        frame.src = URL.createObjectURL(event.target.files[0]);
    }

    $('.editbutton').on('click', function(){
        var nama = $(this).data('nama');
        var value = $(this).data('value');
        var uri = $(this).data('uri');

        $('#myform').attr("action", uri);
        $('#method').val("put");
        $('#nama').val(nama);
        $('#value').val(value);
        $('#formtitle').html('Ubah Biaya');

        // $('#nama').prop('disabled', false);
        $('#value').prop('disabled', false);
        $('#button-submit').show();
    });

    $('.resetbutton').on('click', function(){

        $('#myform').attr("action", "{{route( 'biayalayanan.store' )}}");
        $('#method').val("post");
        $('#nama').val("");
        $('#value').val("");
        $('#woonotif_instance').val("");
        $('#formtitle').html('Ubah Biaya');

        // $('#nama').prop('disabled', true);
        $('#value').prop('disabled', true);
        $('#button-submit').hide();
    });

    $('.filter-daterange').daterangepicker({
        showDropdowns: true,
        applyClass: 'btn-primary',
        cancelClass: 'btn-light',
        locale: {
            format: 'YYYY-MM-DD'
        }
    });
</script>
@endsection