@extends(\Auth::user()->role != 10 ? 'layout' : 'layoutfrontdesk')

@section('title', 'Split Bill | Detail Split Bill')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}
</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">Data Split Bill -</span> {{@$splitbill->invoice->no_invoice}}</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="card">
        <div class="card-body">

                <fieldset class="mb-3">
                    <div class="row">
                        <div class="col-md-12">

                            <div class="form-group row">
                                <label class="col-form-label col-lg-4">No. Invoice</label>
                                <div class="col-lg-7">
                                    <label class="col-form-label">{{@$splitbill->invoice->no_invoice}}</label>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-lg-4">Nama</label>
                                <div class="col-lg-7">
                                    <label class="col-form-label">{{$splitbill->keterangan ? $splitbill->keterangan : '-- belum ada nama --' }}</label>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-lg-4">Total</label>
                                <div class="col-lg-7">
                                    <label class="col-form-label">Rp {{ribuan($splitbill->total)}}</label>
                                </div>
                            </div>

                        </div>

                    </div>
                </fieldset>


            <table class="table datatable-basic table-hover">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>Date</th>
                        <th>Qty</th>
                        <th>Description</th>
                        <th>Room No.</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                    $i = 1;
                    @endphp
                    @if(!$splitbill->splitbill_detail->isEmpty())
                        @foreach ($splitbill->splitbill_detail as $detail)
                        <tr>
                            <td>{{$i}}</td>
                            <td>{{$detail->date}}</td>
                            <td>{{$detail->qty}}</td>
                            <td>{{$detail->description}}</td>
                            <td>{{$detail->room_no}}</td>
                            <td>{{$detail->total}}</td>
                        </tr>
                        @php
                        $i++
                        @endphp
                        @endforeach
                    @else
                    <tr>
                        <td align="center" colspan="5">Data Kosong</td>
                    </tr>
                    @endif


                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 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 id="closemodal" 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">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn bg-danger">Hapus</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Images modal -->
<div id="modal_add_images" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title font-weight-semibold">Carton Images</h2>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

                <div class="modal-body">

                    <div id="card-img-body" class="row">

                    </div>
                </div>

        </div>
    </div>
</div>
<!-- /horizontal form modal -->

@endsection

@section('js')
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/validation/validate.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/buttons/ladda.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
<script src="{{asset('global_assets/js/main/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/loaders/blockui.min.js')}}"></script>

<script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>

<script type="text/javascript">

//modal delete
    $(document).on("click", ".delbutton", function () {
        $("#modal_add_files").modal('hide');
        var url = $(this).data('uri');
        $("#delform").attr("action", url);
    });

    $('#modal_add_images').on("hidden.bs.modal", function () {
        $("#card-img-body").empty();
    });


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: 50,
                targets: [ 7 ]
            }],
            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"p>',
            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;' }
            },
            //initComplete: function(){
                //	$('div.bulk_action').html('<button type="button" id="checked_action" class="btn btn-light float-left" onclick="handleMoveItem()">Move Item</button>')
                //}
            });

            // 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);
                        }
                    },
                    messages: {
                        nama: {
                            required: 'Mohon diisi.'
                        },
                        email: {
                            required: 'Mohon diisi.'
                        },
                        telp: {
                            required: 'Mohon diisi.'
                        },
                        username: {
                            required: 'Mohon diisi.'
                        },
                        password: {
                            required: 'Mohon diisi.'
                        },
                        role: {
                            required: 'Mohon diisi.'
                        },
                    },
                });

                // 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() {

    var CardsContent = function() {

        // Lightbox
        var _componentFancybox = function() {
            if (!$().fancybox) {
                console.warn('Warning - fancybox.min.js is not loaded.');
                return;
            }

            // Image lightbox
            $('[data-popup="lightbox"]').fancybox({
                padding: 3
            });
        };

        return {
            init: function() {
                _componentFancybox();
            }
        }
    }();


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

    document.addEventListener('DOMContentLoaded', function() {
        CardsContent.init();
    });

});


</script>


    <script type="text/javascript">
        var $select = $('.form-control-select2').select2();

        $( document ).ready(function() {
            // 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

        });
    </script>

    @endsection