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

@section('title', 'Shop Transactions | Tambah Shop Transactions')

@section('content')
    <!-- Page header -->
        <div class="page-header {{in_array(\Auth::user()->role, [1,2]) == 1 ? 'page-header-light' : ''}}">
            <div class="page-header-content header-elements-md-inline">
                <div class="page-title d-flex">
                    <h4> Tambah Shop Transaksi</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">
				<div class="row">
					<div class="col-md-12">
						<form id="submitTransaction"
							  class="form-validate-jquery"
							  action="{{route('shop-transactions.store')}}"
							  method="post"
							  enctype="multipart/form-data"
						>
							@csrf
							<fieldset class="mb-3">
								<legend class="text-uppercase font-size-sm font-weight-bold">Data Shop Transaction</legend>

                                @if(Auth::user()->role == 1 || Auth::user()->role == 5)
                                <input type="hidden" name="hotel_id" value="{{ Session::get('hotel_id') }}" />
                                @else
                                    <input type="hidden" name="hotel_id" value="{{ Auth::user()->hotel_id }}" />
                                @endif

                                {{-- @if(Auth::user()->role == 1)
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Hotel</label>
                                    <div class="col-lg-10">
                                        <select name="hotel_id"
                                                id="hotel_id"
                                                class="form-control form-control-select2"
                                                data-container-css-class="border-teal"
                                                data-dropdown-css-class="border-teal"
                                                onchange="getSelectShop(this.value), getSelectKamar(this.value), getSelectTipeMenus(this.value), getSelectMenuList(this.value)"
                                                required
                                        >
                                            <option value="">-- Pilih Hotel --</option>
                                            @foreach($hotels as $hotel)
                                                <option value="{{$hotel->id}}">{{$hotel->nama}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                @else
                                    <input type="hidden" name="hotel_id" value="{{ Auth::user()->hotel_id }}" />
                                @endif --}}


								<div class="form-group row">
									<label class="col-form-label col-lg-2">No Kamar</label>
									<div class="col-lg-10">
										<select name="kamar_id" id="kamar_id"
												class="form-control form-control-select2"
												data-container-css-class="border-teal"
												data-dropdown-css-class="border-teal"
                                                onchange="getSelectTipeMenus(this.value)"
												required
										>
											<option value="">-- Pilih No Kamar --</option>
                                            @foreach($kamars as $kamar)
                                                <option value="{{$kamar->id}}">{{$kamar->no_kamar}}</option>
                                            @endforeach
										</select>
									</div>
								</div>

								<div class="form-group row">
									<label class="col-form-label col-lg-2">Nama</label>
									<div class="col-lg-10">
										<input class="form-control border-teal border-1 " list="dataList" name="nama" id="nama" placeholder="Ketik nama ..." autocomplete="off" required>
										<datalist id="dataList">
										</datalist>
									</div>
								</div>

								<div class="form-group row">
									<label class="col-form-label col-lg-2">Shop</label>
									<div class="col-lg-10">
										<select name="shop_id" id="shop_id"
												class="form-control form-control-select2"
												data-container-css-class="border-teal"
												data-dropdown-css-class="border-teal"
                                                onchange="getSelectTipeMenus(this.value), getSelectMenuList(this.value)"
												required
										>
											<option value="">-- Pilih Shop --</option>
                                            @foreach($shops as $shop)
											    <option value="{{$shop->id}}">{{$shop->nama}}</option>
											@endforeach
										</select>
									</div>
								</div>

                                @if(Auth::user()->role == 1 || Auth::user()->role == 5)
								<div class="form-group row">
									<label class="col-form-label col-lg-2">Tipe Menu</label>
									<div class="col-lg-10">
										<select name="tipe_menu_id" id="tipe_menu_id"
												class="form-control form-control-select2"
												data-container-css-class="border-teal"
												data-dropdown-css-class="border-teal"
                                                onchange="getSelectMenuList(this.value)"
												required
										>
											<option value="">-- Pilih Tipe Menu --</option>
										</select>
									</div>
								</div>
								@else
								<div class="form-group row">
									<label class="col-form-label col-lg-2">Tipe Menu</label>
									<div class="col-lg-10">
										<select name="tipe_menu_id" id="tipe_menu_id"
												class="form-control form-control-select2"
												data-container-css-class="border-teal"
												data-dropdown-css-class="border-teal"
                                                onchange="getSelectMenuList(this.value)"
												required
										>
											<option value="">-- Pilih Tipe Menu --</option>
											@foreach($tipe_menus as $tipe)
											<option value="{{$tipe->id}}">{{$tipe->nama}}</option>
											@endforeach
										</select>
									</div>
								</div>
								@endif

                                @if(Auth::user()->role == 1 || Auth::user()->role == 5)
								<div class="form-group row">
									<label class="col-form-label col-lg-2">Menu List</label>
									<div class="col-lg-10">
										<select name="menu_id" id="menu_id"
												class="form-control form-control-select2"
												data-container-css-class="border-teal"
												data-dropdown-css-class="border-teal"
												required
										>
											<option value="">-- Pilih Menu --</option>
										</select>
									</div>
								</div>
								@else
								<div class="form-group row">
									<label class="col-form-label col-lg-2">Menu List</label>
									<div class="col-lg-10">
										<select name="menu_id" id="menu_id"
												class="form-control form-control-select2"
												data-container-css-class="border-teal"
												data-dropdown-css-class="border-teal"
												required
										>
											<option value="">-- Pilih Menu --</option>
											@foreach($menus as $menu)
											<option value="{{$menu->id}}" data-harga="0">{{$menu->nama}}</option>
											@endforeach
										</select>
									</div>
								</div>
								@endif

								<div class="form-group row">
									<label for="jumlah" class="col-form-label col-lg-2">Jumlah</label>
									<div class="col-lg-4">
										<input type="number" id="jumlah" name="jumlah" class="form-control border-teal border-1 " min="1" value="1" autofocus required>
									</div>
									<label for="total_biaya" class="col-form-label col-lg-1">Total</label>
									<div class="col-lg-4">
										<input type="number" id="total_biaya" name="total_biaya" class="form-control border-teal border-1 " required>
									</div>
								</div>

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

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

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


@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/plugins/pickers/daterangepicker.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.date.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.time.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/pickers/pickadate/legacy.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/form_inputs.js')}}"></script>
    <script src="{{asset('global_assets/js/demo_pages/form_checkboxes_radios.js')}}"></script>

    <script>
        $(document).ready(function () {

                    @if(!in_array(\Auth::user()->role, [1,2,5]))
                    autocompleteNama({{\Auth::user()->hotel_id}});
                    @endif

                //pilih Hotel
                $(document).on("change", "#hotel_id", function () {

                            var id = $(this).find(':selected').val();
                            autocompleteNama(id)
                        });

                /*Auto complete Nama*/
                //Get Option
                function autocompleteNama(hotel_id){
                    $.ajax({
                        type: 'GET',
                        url: "{{ url('/autocomplete-guest/')}}/"+hotel_id,
                        success: function (data) {
                            $('#dataList').html(data);
                        }
                    });
                 }
        });

        function getSelectKamar(hotel_id){
			$.ajax({
				type: 'GET',
				url: "{{ url('/getkamar/')}}/"+hotel_id,
				success: function (data) {
					$('#kamar_id').html(data);
				}
			});
		}

        function getSelectShop(hotel_id){
			$.ajax({
				type: 'GET',
				url: "{{ url('/getshop/')}}/"+hotel_id,
				success: function (data) {
					$('#shop_id').html(data);
				}
			});
		}

        function getSelectTipeMenus(shop_id){
			$.ajax({
				type: 'GET',
				url: "{{ url('/gettipemenus/')}}/"+shop_id,
				success: function (data) {
					$('#tipe_menu_id').html(data);
				}
			});
		}

        function getSelectMenuList(tipemenu_id){
			$.ajax({
				type: 'GET',
				url: "{{ url('/getmenulist/')}}/"+tipemenu_id,
				success: function (data) {
					$('#menu_id').html(data);
				}
			});
		}

        //Set Harga
        $('[name="jumlah"]').on('change', function(){
            // Value Menu
            let value_harga_menu = $('#menu_id').val();
			let harga = parseInt($('#menu_id').find('option[value="'+value_harga_menu+'"]').attr('data-harga'));

			let jumlah = $('#jumlah').val();
            let total = jumlah * harga;
			$('#total_biaya').val(total);
		});

        $('[name="menu_id"]').on('change', function(){
            // Value Menu
            let value_harga_menu = $('#menu_id').val();
            let harga = parseInt($('#menu_id').find('option[value="'+value_harga_menu+'"]').attr('data-harga'));

            let jumlah = $('#jumlah').val();
            let total = jumlah * harga;
            $('#total_biaya').val(total);
        });

        $('[name="tipe_menu_id"]').on('change', function(){
            // Value Menu
            $('#jumlah').val('1');
            $('#total_biaya').val('');
           });

        $('[name="shop_id"]').on('change', function(){
              // Value Menu
              $('#jumlah').val('1');
             $('#total_biaya').val('');
        });
        //--set harga end --
    </script>

    <script type="text/javascript">
        // Initialize module
        // ------------------------------

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

                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.'
                                },
                                hotel_id: {
                                    required: 'Mohon diisi.'
                                },
                                shop_id: {
                                    required: 'Mohon diisi.'
                                },
                                tipe_menu_id: {
                                    required: 'Mohon diisi.'
                                },
                                menu_id: {
                                    required: 'Mohon diisi.'
                                },
                                total_biaya: {
                                    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() {
                    FormValidation.init();
            });
	</script>

    <script type="text/javascript">
        $( 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

        });
    </script>
@endsection