@extends(!in_array(\Auth::user()->role, [10, 15]) ? 'layout' : 'layoutfrontdesk')

@section('title', 'Hotel Group | Create Hotel Group')

@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 Hotel Group</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="formhotelgroup" class="form-validate-jquery" action="{{ route('hotel_group.store')}}" method="post" enctype="multipart/form-data">
                @csrf
                <fieldset class="mb-3">
                    <legend class="text-uppercase font-size-sm font-weight-bold">#Data Hotel Group</legend>
                    <div class="form-group row">
                        <label class="col-form-label col-lg-2">Name <span class="text-danger">*</span> </label>
                        <div class="col-lg-10">
                            <input type="text" id="nama" name="nama" class="form-control border-teal border-1" placeholder="Name" required>
                        </div>
                    </div>

                    <div class="form-group row mb-4">
                        <label class="col-form-label col-lg-2">SA Group <span class="text-danger">*</span> </label>
                        <div class="col-lg-10">
                            <select class="form-control form-control-select2" name="sa_group_id" id="sa_group_id" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
                                <option value="">--Select SA Group--</option>
                                @foreach ($sagroups as $sagroup)
                                    <option value="{{$sagroup->id}}">{{$sagroup->nama}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- <legend class="font-weight-bold">#Address</legend>
                    <div class="form-group row mb-3">
						<input type="hidden" id="jumlahalamat" value="1">
                        <label class="col-form-label col-lg-2">Name <span class="text-danger">*</span> </label>
                        <div class="col-lg-3">
                            <input type="text" id="namaalamat1" name="nama_alamat[]" class="form-control border-teal border-1" required>
                        </div>
                        <label class="col-form-label col-lg-1">Address <span class="text-danger">*</span> </label>
                        <div class="col-lg-4">
                            <input type="text" id="alamatalamat1" name="alamat_alamat[]" class="form-control border-teal border-1" required>
                        </div>
                        <div class="col-lg-1">
                            <button type="button" onclick="tambahAlamat()" class="btn btn-success">
                                <i class="fas fa-plus-circle"></i>
                            </button>
                        </div>
                    </div>

                    <div id="m_alamat">

                    </div>


                    <legend class="font-weight-bold">#Contact</legend>
                    <div class="form-group row mb-3">
						<input type="hidden" id="jumlahkontak" value="1">
                        <label class="col-form-label col-lg-2">Name <span class="text-danger">*</span> </label>
                        <div class="col-lg-3">
                            <input type="text" id="namakontak1" name="nama_kontak[]" class="form-control border-teal border-1" required>
                        </div>

                        <label class="col-form-label col-lg-1">Contact <span class="text-danger">*</span> </label>
                        <div class="col-lg-4">
                            <input type="text" id="kontakkontak1" name="kontak_kontak[]" class="form-control border-teal border-1" required>
                        </div>
                        <div class="col-lg-1">
                            <button type="button" onclick="tambahKontak()" class="btn btn-success">
                                <i class="fas fa-plus-circle"></i>
                            </button>
                        </div>
                    </div>

                    <div id="m_kontak">

                    </div>


                    <legend class="font-weight-bold">#PIC</legend>
                    <div class="form-group row mb-3">
						<input type="hidden" id="jumlahpic" value="1">
                        <label class="col-form-label col-lg-2">Name <span class="text-danger">*</span> </label>
                        <div class="col-lg-3">
                            <input type="text" id="namapic1" name="nama_pic[]" class="form-control border-teal border-1" required>
                        </div>
                        <label class="col-form-label col-lg-1">Contact <span class="text-danger">*</span> </label>
                        <div class="col-lg-4">
                            <input type="text" id="kontakpic1" name="kontak_pic[]" class="form-control border-teal border-1" required>
                        </div>
                        <div class="col-lg-1">
                            <button type="button" onclick="tambahPIC()" class="btn btn-success">
                                <i class="fas fa-plus-circle"></i>
                            </button>
                        </div>
                    </div>

                    <div id="m_pic">

                    </div>

                    <legend class="font-weight-bold">#Logo</legend>
                    <div class="form-group row">
                        <label class="col-form-label col-lg-2">Logo</label>
                        <div class="col-lg-10">
                            <input type="file" name="logo_groups_hotel" id="logo_groups_hotel" class="form-control mb-2 border-teal border-1" onchange="preview()">
                            <img id="frame" width="120px" height="120px" src="{{asset('global_assets/images/placeholders/placeholder.jpg')}}" style="object-fit: cover" class="mb-1" />
                        </div>
                    </div> --}}


                </fieldset>
                <div class="text-right">
                    <a href="{{ url('/hotel_group')}}" class="btn btn-light">Back <i class="icon-undo"></i></a>
                    <button type="submit" id="btn_submit" class="btn btn-primary submitBtn">Save <i class="icon-paperplane ml-2"></i></button>
                </div>
            </form>
        </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 type="text/javascript">

    //Preview logo_groups_hotel
    function preview() {
        frame.src=URL.createObjectURL(event.target.files[0]);
    }

    function tambahAlamat(){
        var ids = $('#jumlahalamat').val()
        ids = parseInt(ids)+1;
        console.log($('#jumlahalamat').val())
        let html = `
        <div class="form-group row" id="rowalamat_${ids}">
            <div class="col-lg-2">
                &nbsp;
            </div>

            <div class="col-lg-3">
                <input type="text" id="namaalamat${ids}" name="nama_alamat[]" class="form-control border-teal border-1">
            </div>

            <div class="col-lg-1">
                &nbsp;
            </div>
            <div class="col-lg-4">
                <input type="text" id="alamatalamat${ids}" name="alamat_alamat[]" class="form-control border-teal border-1">
            </div>
            <div class="col-lg-1">
                <button type="button" onclick="deleteAlamat(${ids})" class="btn btn-danger">
                    <i class="fas fa-times-circle"></i>
                </button>
            </div>
        </div>
        `

        $('#m_alamat').append(html);
        $('#jumlahalamat').val(ids)
    }

    function deleteAlamat(ids){
        $('#rowalamat_'+ids).remove();

        var idx = $('#jumlahalamat').val()
        idmin = parseInt(idx)-1

        $('#jumlahalamat').val(idmin)
        console.log($('#jumlahalamat').val())
    }

    function tambahKontak(){
        var ids = $('#jumlahkontak').val()
        ids = parseInt(ids)+1;
        console.log($('#jumlahkontak').val())
        let html = `
        <div class="form-group row" id="rowkontak_${ids}">

            <div class="col-lg-2">
                &nbsp;
            </div>
            <div class="col-lg-3">
                <input type="text" id="namakontak${ids}" name="nama_kontak[]" class="form-control border-teal border-1">
            </div>

            <div class="col-lg-1">
                &nbsp;
            </div>
            <div class="col-lg-4">
                <input type="text" id="kontakkontak${ids}" name="kontak_kontak[]" class="form-control border-teal border-1">
            </div>
            <div class="col-lg-1">
                <button type="button" onclick="deleteKontak(${ids})" class="btn btn-danger">
                    <i class="fas fa-times-circle"></i>
                </button>
            </div>
        </div>
        `

        $('#m_kontak').append(html);
        $('#jumlahkontak').val(ids)
    }

    function deleteKontak(ids){
        $('#rowkontak_'+ids).remove();

        var idx = $('#jumlahkontak').val()
        idmin = parseInt(idx)-1

        $('#jumlahkontak').val(idmin)
        console.log($('#jumlahkontak').val())
    }

    function tambahPIC(){
        var ids = $('#jumlahpic').val()
        ids = parseInt(ids)+1;
        console.log($('#jumlahpic').val())
        let html = `
        <div class="form-group row" id="rowpic_${ids}">

            <div class="col-lg-2">
                &nbsp;
            </div>
            <div class="col-lg-3">
                <input type="text" id="namapic${ids}" name="nama_pic[]" class="form-control border-teal border-1">
            </div>
            <div class="col-lg-1">
                &nbsp;
            </div>
            <div class="col-lg-4">
                <input type="text" id="kontakpic${ids}" name="kontak_pic[]" class="form-control border-teal border-1">
            </div>
            <div class="col-lg-1">
                <button type="button" onclick="deletePIC(${ids})" class="btn btn-danger">
                    <i class="fas fa-times-circle"></i>
                </button>
            </div>
        </div>
        `

        $('#m_pic').append(html);
        $('#jumlahpic').val(ids)
    }

    function deletePIC(ids){
        $('#rowpic_'+ids).remove();

        var idx = $('#jumlahpic').val()
        idmin = parseInt(idx)-1

        $('#jumlahpic').val(idmin)
        console.log($('#jumlahpic').val())
    }


    $(document).on('submit', '#formhotelgroup', function(e) {

        var has_empty = false

        console.log(logo)

        $('#formhotelgroup').find('input[type!="hidden"]').not('input[id=logo]').each(function () {
            if ( !$(this).val() ) {
                has_empty = true;
                // return false;
            }
        });

        console.log(has_empty)
        if (has_empty) {
            new PNotify({
                title: 'Error',
                text: 'Something wrong, check your input.',
                icon: 'icon-blocked',
                type: 'error'
            });
            e.preventDefault()
            return false
        } else {
            $('#btn_submit').prop('disabled', true)
            $('#formhotelgroup').submit()
        }
    })

    // 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',
    });

    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: {
                        sa_group_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">
        $( 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