@extends('layout')

@section('title', 'Rekap Pembayaran | Create Rekap Pembayaran')

@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">
				<h4>Create Rekap Pembayaran</h4>
				<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">

		<!-- Hover rows -->
		<div class="card">
			<div class="card-header header-elements-inline">
			</div>
			<div class="card-body">
				<form id="submit_form" class="form-validate-jquery" action="{{ url('rekap-pembayarans') }}" method="post" enctype="multipart/form-data">
					@csrf
					<fieldset class="mb-3">
						<legend class="text-uppercase font-size-sm font-weight-bold">Data Invoice</legend>

                        <div class="form-group row">
                            <label class="col-form-label col-lg-2">Client<span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <select name="prop_id" id="prop_id" class="form-control form-control-select2" required onchange="getHotelInvoice(this.value)">
                                    <option value="">-- Select Client --</option>
                                    @foreach ($customers as $custom)
                                    <option value="{{$custom->id}}">{{$custom->nama}} - {{$custom->telp}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-form-label col-lg-2">Address<span class="text-danger">*</span></label>
                            <div class="col-lg-7">
                                <input type="text" name="address" id="address" class="form-control mb-2" value="" placeholder="Insert Address" required>
                            </div>
                            <div class="col-lg-3">
                                <select name="address_option" id="address_option" class="form-control form-control-select2 mb-2" onchange="getHotelAddress(this.value)">
                                    <option value="1">Property Address</option>
                                    <option value="2">Client Address</option>
                                    <option value="3">Custom Address</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-form-label col-lg-2">Payment Type<span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <select name="jenis_pembayaran" id="jenis_pembayaran" class="form-control form-control-select2" required>
                                    <option value="">-- Select Payment Type --</option>
                                    @foreach (config('custom.jenis_pembayarans') as $key=>$type)
                                        <option value="{{$key}}">{{$type}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- Container Detail -->
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th style="white-space: nowrap;" class="d-none"></th>
                                    <th style="white-space: nowrap;">Active date</th>
                                    <th style="white-space: nowrap;">No invoice</th>
                                    <th style="white-space: nowrap; text-align: right">Price</th>
                                </tr>
                            </thead>
                            <tbody id="invoice_items">
                                <tr>
                                    <td colspan="8" style="text-align: center">
                                        <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#modal_add_items">Select Invoice</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- Container Detail -->

					</fieldset>
					<div class="text-right">
						<a href="{{ url('rekap-pembayarans') }}" class="btn btn-light">Back <i class="icon-undo"></i></a>
						<button type="submit" class="btn btn-primary submitBtn">Save <i class="icon-paperplane ml-2"></i></button>
					</div>
				</form>
			</div>

		</div>
		<!-- /hover rows -->

	</div>
	<!-- /content area -->


    <!-- Alert Modal -->
	<div id="alert_modal" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-warning" align="center">
                    <h6 class="modal-title">
                       &nbsp;<h3>Alert!</h3>
                    </h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

                <div class="modal-body" align="center" id="text-alert">
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn bg-warning" data-dismiss="modal">Close</button>
                </div>

			</div>
		</div>
	</div>
	<!-- /Alert Modal -->

    <div id="modal_add_items" class="modal fade">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary" align="center">
                    <h5 class="modal-title">Invoice list</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <form action="#" id="selectedForm">
                    <div class="modal-body">
                        <table class="table datatable-basic table-hover">
                            <thead>
                                <tr>
                                    <th class="text-center">Actions</th>
                                    <th style="white-space: nowrap;">No Invoice</th>
                                    <th style="white-space: nowrap;">Marketing</th>
                                    <th style="white-space: nowrap;">Property</th>
                                    <th style="white-space: nowrap; text-align: right">Price</th>
                                    <th style="white-space: nowrap; text-align: right">Payment</th>
                                    <th style="white-space: nowrap; text-align: right">Remaining</th>
                                    <th style="white-space: nowrap;">Duration</th>
                                    <th style="white-space: nowrap;">Active Date</th>
                                    <th style="white-space: nowrap;">End Date</th>
                                </tr>
                            </thead>
                            <tbody id="tablform">
                                {{-- @if(!$invoices->isEmpty())
                                    @php ($i = 1)
                                        @foreach($invoices as $invoice)
                                            <tr>
                                                <td class="d-none">{{ $loop->iteration }}</td>
                                                <td align="center">
                                                    <input type="radio" id="item_{{ $invoice->id }}" name="temp_inv_id" value="{{ $invoice->id }}" style="transform: scale(1.5)" class="radio_item">
                                                </td>
                                                <td>{{$invoice->no_invoice}}</td>
                                                <td><div class="datatable-column-width">{{@$invoice->user->nama}}</div></td>
                                                <td><div class="datatable-column-width">{{@$invoice->hotel->hotel_name}}</div></td>
                                                <td><div class="datatable-column-width" style="text-align: right">{{ribuanWithComma(@$invoice->invoice_details->sum('price'))}}</div></td>
                                                <td><div class="datatable-column-width" style="text-align: right">{{ribuanWithComma(@$invoice->payment_nominal)}}</div></td>
                                                <td><div class="datatable-column-width" style="text-align: right">{{ribuanWithComma(@$invoice->invoice_details->sum('price') - @$invoice->payment_nominal)}}</div></td>
                                                <td><div class="datatable-column-width">{{@$invoice->duration}} Day</div></td>
                                                <td><div class="datatable-column-width">{{ dateFormat(@$invoice->active_date,'d-m-Y') }}</div></td>
                                                <td><div class="datatable-column-width">{{ dateFormat(@$invoice->end_date,'d-m-Y') }}</div></td>
                                                <td><div class="datatable-column-width">{{ $invoice->invoice_type != null ? config('custom.jenis_invoice')[@$invoice->invoice_type] : '-'}}</div></td>
                                                <td><div class="datatable-column-width">{{config('custom.status_invoice')[@$invoice->invoice_status]}}</div></td>
                                            </tr>
                                        @php ($i++)
                                    @endforeach
                                @endif --}}
                            </tbody>
                        </table>
                        <div align='right'>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@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/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/tables/datatables/datatables.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/custom.js')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/form_checkboxes_radios.js')}}"></script>
	<script type="text/javascript">

        // GLOBAL VAR
        let idx = 0;

        function ribuanWithComma(val){
            return val.toLocaleString('US')
        }

		$(document).ready(function (e) {

			$('#input_telp, #input_fax, #nomor_whatsapp_transfer_bukti').on('input', function (event) {
				this.value = this.value.replace(/[^0-9]/g, '');
			});

			$('.submitBtn').click(function(){
				let input = $('#submit_form').find(':input[required]:visible').not(':input[type=submit],:hidden')
				console.log(input.length)
				var jumlah_input_req = input.length;
				// if(input.val()){
				// 	$(".submitBtn").attr("disabled", true);
				// 	$('#submit_form').submit()
				// }
				var input_keisi = 0;

				input.each(function() {
					if(this.value == "") {
						// alert("You must fill in all items on the form");
						new PNotify({
							title: 'Error',
							text: 'Data is incomplete, please check all field first before submitting.',
							icon: 'icon-blocked',
							type: 'error'
						});
						return false;
						e.preventDefault()
					} else {
						input_keisi += 1;
					}
				})
				console.log(input_keisi)
				if (jumlah_input_req == input_keisi) {
					$(".submitBtn").attr("disabled", true);
					$('#submit_form').submit()
				}
			})

            // Button class options
			$('#inpDatePicker').daterangepicker({
				applyClass: 'btn-success',
				cancelClass: 'btn-danger',
          		minDate: "{{ date('d-m-Y') }}",
                startDate: "{{ date('d-m-Y') }}",
                endDate: "{{ date('d-m-Y') }}",
				locale: {
					format: 'DD-MM-YYYY'
				}
			})

            // Basic initialization
            $('#date_range').daterangepicker({
                applyClass: 'btn-primary',
                cancelClass: 'btn-light',
                // minDate: "{{ date( 'd-m-Y' ) }}",
                startDate: "{{ date( 'd-m-Y' ) }}",
                endDate: "{{ date('d-m-Y' ) }}",
                locale: {
                format: 'DD-MM-YYYY'
                }
            });

            // Basic initialization
            $('#jatuh_tempo').daterangepicker({
                singleDatePicker:true,
                applyClass: 'btn-primary',
                cancelClass: 'btn-light',
                startDate: "{{ date( 'd-m-Y' ) }}",
                locale: {
                format: 'DD-MM-YYYY'
                }
            });
		});

        function getHotelInvoice(params) {
            $('#selectedForm tbody').html(null)
            $.ajax({
                type: "get",
                url: "{{url('/get-invoices')}}",
                data: {id:params},
                dataType: "json",
                success: function (response) {
                    console.log(response)

                    $.each(response, function (a, val) {
                        var html = `
                            <tr>
                                <td align="center">
                                    <input type="radio" id="item_${val.id}" name="temp_inv_id" value="${val.id}" style="transform: scale(1.5)" class="radio_item">
                                </td>
                                <td>${val.no_invoice}</td>
                                <td>${val.user.nama}</td>
                                <td>${val.hotel.hotel_name}</td>
                                <td style="text-align: right">${ribuanWithComma(Number(val.pricedet))}</td>
                                <td style="text-align: right">${ribuanWithComma(val.payment_nominal)}</td>
                                <td style="text-align: right">${ribuanWithComma(Number(val.pricedet))}</td>
                                <td>${val.duration}</td>
                                <td>${val.active_date}</td>
                                <td>${val.end_date}</td>
                            </tr>
                        `;

                        $('#selectedForm tbody').append(html)
                    });
                }
            });
        }

        function getHotelAddress(param){
            // $('#invoice_type').val(null).trigger('change')
            var hotel_id = $('#hotel_id').val()
            if (param) {
                $.ajax({
                    type: "get",
                    url: "{{url('get-data-hotel-address')}}",
                    data: {id:hotel_id,type:param},
                    dataType: "json",
                    success: function (response) {
                        if ($.isEmptyObject(response)) {
                            $('#address').val(null);
                        } else {
                            $('#address').val(response);
                        }
                    }
                });
            }else{
                $('#address').val(null)
            }
        }

        $('#date_range').on('apply.daterangepicker', (e, picker) => {
            var condition = $('#invoice_type').val()
            if (condition == 2) {
                var daterange = $('#date_range').val()
                var hotel_id = $('#hotel_id').val()
                $.ajax({
                    type: "get",
                    url: "{{url('get-data-hotel-system')}}",
                    data: {
                            id:hotel_id,
                            daterange:daterange
                        },
                    dataType: "json",
                    success: function (res) {
                        console.log(res.data.occ)
                        // let occ    = res.data.occ;
                        let room   = res.data.room;
                        let min    = res.data.min_charge;

                        if (res.data.domain) {
                            $('#invoice_type').val(null).trigger('change')
                            callModalAlert("Please Input Domain Hotely on Detail Property")
                        }

                        var charge    = room*2000
                        // if (charge <= min) {
                        //     charge = min
                        // }
                        console.log(charge)
                        // var text   = `Monthly: ${room} Room x 2,000 x ${occ}%`;
                        var text   = `Monthly: ${room} Room Sales x 2,000`;


                        let html_item = `<tr id="row_item_${idx}">
                            <td>
                                <input id="desc${idx}" type="text" class="form-control"  name="description[${idx}]" value="${text}"/>
                            </td>
                            <td>
                                <input id="price_item${idx}" type="number"  class="form-control masked" style="text-align:right; min-width:200px; width:100%;" name="price_item[${idx}]" value="${ribuanWithComma(charge)}" onchange="recalculate()" required/>
                            </td>
                            <td style="text-align: center">

                            </td>
                        </tr>`;

                        $('#fieldset_detail').show()
                        $('#item-fieldset').html(html_item);
                        recalculate()
                        idx++;
                    }
                });

            }
        })

        $(document).on("input", ".masked", function () {
            // $(this).mask("#,##0", {reverse: true})
        });

        // Accessibility labels
        $('.pickadate-accessibility').pickadate({
            labelMonthNext: 'Go to the next month',
            labelMonthPrev: 'Go to the previous month',
            labelMonthSelect: 'Pick a month from the dropdown',
            labelYearSelect: 'Pick a year from the dropdown',
            selectMonths: true,
            selectYears: true,
            format: 'yyyy-mm-dd',
        });

        function callModalAlert(text) {
            $('#text-alert').html("<h3>"+text+"</h3>")
            $('#alert_modal').modal('show')
        }

		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: 'This field is required.'
		                },
		                email: {
		                    required: 'This field is required.'
		                },
		                no_telp: {
		                    required: 'This field is required.'
		                },
		                hotelname: {
		                    required: 'This field is required.'
		                },
		                password: {
		                    required: 'This field is required.'
		                },
		                role: {
		                    required: 'This field is required.'
		                },
		                cabang_id: {
		                    required: 'This field is required.'
		                },
		            },
		        });

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

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

        var table_stock = '';
        $(document).on('change', '.radio_stock', function(){
            table_stock.$('.radio_stock').prop('checked', false)
            $(this).prop('checked', true)
        })

        $('#modal_add_stock').on('shown.bs.modal', function() {
            table_stock.order([2, 'asc']).draw(); // Assuming the "Description" column is at index 2
        });

        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, {
                    scrollX: true,
                    // responsive: true,
                    // autoWidth: false,
                    columnDefs: [{
                        orderable: false,
                        width: 150,
                        targets: [ 0 ]
                    }],
                    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
                table_stock = $('.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() {
		    FormValidation.init();
            DatatableBasic.init();
		});
	</script>
	<script type="text/javascript">

		function preview() {
			$("#frame").removeAttr('style');
			$("#frame").attr('style', 'min-width:120px; max-width: 70%');
			frame.src=URL.createObjectURL(event.target.files[0]);
		}

		$( document ).ready(function() {

			var $select = $('.form-control-select2').select2();

			// 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
			@if ($errors->any())
				@foreach ($errors->all() as $error)
					new PNotify({
						title: 'Error',
						text: '{{ $error }}.',
						icon: 'icon-blocked',
						type: 'error'
					});
				@endforeach
			@endif

            $('.format_mask').on('input', function(){
                $('.format_mask').mask("#,##0", {reverse: true});//set separator number
            })

		});

        let last_idx = 0;
        $("#selectedForm").submit(function(e){
            e.preventDefault()
            const serialize = $(this).serializeArray()

            console.log('serialize:', serialize)

            const inv_id = serialize.find(s => s.name === 'temp_inv_id').value

            $.ajax({
                type: 'GET',
                url: `{{ url('/selected-invoices/')}}/${inv_id}`,
                success: function (data) {
                    console.log('data:', data)
                    const { coa, stock } = data

                    var item = data.item;
                    var dataprice = data.price;

                    console.log()

                    last_idx++
                    let html_item = `<tr id="row_item_${last_idx}">
                                        <input type="hidden" name="invoices_id[]" value="${inv_id}" />
                                        <input type="hidden" name="invoices_price[]" value="${dataprice}" />
                                        <td>${item?.active_date}</td>
                                        <td>${item?.no_invoice}</td>
                                        <td>${ribuanWithComma(dataprice)}</td>
                                        <td style="text-align: center">
                                            <a href="#/"
                                                class="delbutton text-danger"
                                                data-id="${last_idx}"
                                                title="Delete"
                                            >
                                                <i class="fa fa-times"></i>
                                            </a>
                                        </td>
                                    </tr>`;

                    $('#invoice_items').prepend(html_item);

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

                    $('#modal_add_items').modal('hide')
                }
            });

            return false;
        });

        $(document).on("click", ".delbutton", function () {
            let id = $(this).attr('data-id');
            $('#row_item_'+id).remove();
        });

	</script>
@endsection