@extends('layout')

@section('title', 'Invoice | Create Invoice')

@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 Invoice</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="{{ route('invoices.store')}}" 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">No.Invoice<span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <input type="text" name="no_invoice" id="no_invoice" class="form-control" value="{{$template}}">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-form-label col-lg-2">Property<span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <select name="hotel_id" id="hotel_id" class="form-control form-control-select2" required onchange="getHotelMarket(this.value)">
                                    <option value="">-- Select Property --</option>
                                    @foreach ($hotels as $hotel)
                                    <option value="{{$hotel->id}}">{{$hotel->company_name}}: {{$hotel->hotel_name}} - {{$hotel->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">
                            </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">Marketing<span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <select name="marketing_id" id="marketing_id" class="form-control form-control-select2">
                                    <option value="">-- Select Marketing --</option>
                                    @foreach ($marketings as $marketing)
                                    <option value="{{$marketing->id}}">{{$marketing->nama}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

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

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

                         {{-- DIUBAH JADI DATERANGE dan nanti masuknya hari --}}
                         <div class="form-group row" id="period_con">
                            <label class="col-form-label col-lg-2">Period<span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                {{-- <input type="number" name="duration" id="duration" class="form-control" placeholder="Duration(*days)..."> --}}
                                <input type="text" name="date_range" id="date_range" class="form-control daterange-single" autocomplete="off" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-form-label col-lg-2">Jatuh Tempo<span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                {{-- <input type="number" name="duration" id="duration" class="form-control" placeholder="Duration(*days)..."> --}}
                                <input type="text" name="jatuh_tempo" id="jatuh_tempo" class="form-control" autocomplete="off" required>
                            </div>
                        </div>

                        {{-- <div class="form-group row">
                            <label class="col-form-label col-lg-2">Price<span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <input type="text" name="price" id="price" class="form-control format_mask" placeholder="Price...">
                            </div>
                        </div> --}}

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

                        <!-- Area review -->
                        <div class="form-group row">
                            <div class="col-lg-2">&nbsp;</div>
                            <div class="col-lg-10" id="review-area">

                            </div>
                        </div>
                        <!-- Area review -->

                        <!--FieldSet Detail Invoice-->
                        <fieldset id="fieldset_detail" class="mb-3 table-responsive scroll-horizontal" style="width: 100%; display:none;">
                            <table class="table table-bordered table-hover">
                                <thead style="text-align: center">
                                    <tr>
                                        <th style="width: 40%">Description</th>
                                        <th style="width: 40%">Price</th>
                                        <th style="width: 20%">
                                            <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#modal_add_stock" onclick="addItem()"><i class="icon-add mr-2"></i>Add Detail</button>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="item-fieldset">

                                </tbody>
                                <tbody>
                                    <tr>
                                        <td style="text-align: right">Total :</td>
                                        <td id="total_amount_review" style="text-align: right">0</td>
                                        <td></td>
                                    </tr>
                                    {{-- <tr>
                                        <td colspan="3" style="text-align: center">
                                            <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#modal_add_stock" onclick="addItem()">Add Detail</button>
                                        </td>
                                    </tr> --}}
                                </tbody>
                            </table>
                        </fieldset>
                        <!--FieldSet Detail Invoice-->

					</fieldset>
					<div class="text-right">
						<a href="{{ route('invoices.index') }}" 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 -->
@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/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 getHotelMarket(param){
            $('#invoice_type').val(null).trigger('change')
            if (param) {
                $.ajax({
                    type: "get",
                    url: "{{url('get-data-hotel')}}",
                    data: {id:param},
                    dataType: "json",
                    success: function (response) {
                        let id_ini = response.user.id;
                        let address_ini = response.address;
                        $('#marketing_id').val(id_ini).select2()
                        $('#address').val(address_ini)
                        $('#address_option').val(1).select2()
                    }
                });
            }else{
                $('#marketing_id').val(null).select2()
            }
        }

        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)
            }
        }

        function selectInvoiceType(type) {
            var hotel_id = $('#hotel_id').val()
            $('#period_con').show()
            $('#period_con input').prop('required', true)
            console.log(type)
            switch (type) {
                case '1'://DP
                    idx = 0;
                    console.log('test')
                    $('#fieldset_detail').hide()
                    $('#period_con').hide()
                    $('#period_con input').prop('required', false)
                    $('#item-fieldset').html(null);

                    $.ajax({
                        type: "get",
                        url: "{{url('get-data-hotel')}}",
                        data: {id:hotel_id},
                        dataType: "json",
                        success: function (data) {
                            let charge = data.min_charge * 2;
                            var text   = 'Total Tagihan DP 2 Bulan';
                            console.log(charge)

                            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').prepend(html_item);
                            recalculate()
                            idx++;
                        }
                    });

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

                    break;

                case '2'://MONTHLY
                    idx = 0;
                    $('#fieldset_detail').hide()
                    $('#item-fieldset').html(null);

                    var daterange = $('#date_range').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*occ/100
                            // console.log("test:"+charge <= min)
                            // if (charge <= min) {
                            //     charge = min
                            // }

                            // var text   = `Monthly: ${room} Room x 2,000 x ${occ}%`;

                            // console.log(charge)

                            // 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="text"  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').prepend(html_item);
                            // recalculate()
                            // idx++;
                        }
                    });

                    recalculate()

                    break;

                case '3'://MANUAL
                    idx = 0;
                    $('#item-fieldset').html(null);
                    $('#period_con').show()
                    $('#fieldset_detail').show()
                    recalculate()

                    // $('#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'
                    //     }
                    // });

                    break;

                default://RESET
                    idx = 0;

                    // $('#period_con').hide()
                    $('#fieldset_detail').hide()
                    recalculate()

                    break;
            }
        }

        function recalculate() {
            let nominal = 0;
            $('.masked').each(function(index){
                nominal += Number((this.value).replaceAll(",","")) ;
            });

            $('#total_amount_review').html(ribuanWithComma(nominal))
        }

        function addItem() {
            let html_item = `<tr id="row_item_${idx}">
                                <td>
                                    <input id="desc${idx}" type="text" class="form-control"  name="description[${idx}]"/>
                                </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}]" onchange="recalculate()" required/>
                                </td>
                                <td style="text-align: center">
                                    <a href="#/"
                                        class="delbutton text-danger"
                                        onclick="deleteItem(${idx})"
                                        data-id="${idx}"
                                        title="Delete"
                                    >
                                        <i class="fa fa-times"></i>
                                    </a>
                                </td>
                            </tr>`;
            $('#item-fieldset').prepend(html_item);
            recalculate()
            idx++;
        }

        $('#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++;
                    }
                });

            }
        })

        function deleteItem(param) {
            $('#row_item_'+param).remove()
            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();
		        }
		    }
		}();


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

		document.addEventListener('DOMContentLoaded', function() {
		    FormValidation.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
            })

		});

        // window.addEventListener("beforeunload", function (e) {
        //     var confirmationMessage = 'Perhatian!'
        //                             + 'Jika anda meninggalkan halaman ini, data yang belum disimpan akan hilang.';

        //     (e || window.event).returnValue = confirmationMessage;
        //     return confirmationMessage;
        // });

	</script>
@endsection