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

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

@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 Supplier</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_arrange_code" class="form-validate-jquery" action="{{ route('supplier.store')}}" method="post">
                    @csrf
                    <fieldset class="mb-3">
                        <legend class="text-uppercase font-size-sm font-weight-bold">Data Supplier</legend>

                        <input type="hidden" name="hotel_id" id="hotel_id" value="{{ \Session::get('hotel_id') ?? \Auth::user()->hotel_id }}">

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Company <span class="text-danger">*</span></label>
                                    <input type="text" name="company_name" id="company_name" class="form-control" autocomplete="off" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" name="company_title" id="company_title" class="form-control" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Name Contact <span class="text-danger">*</span></label>
                                    <input type="text" name="contact_name" id="contact_name" class="form-control" autocomplete="off" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Account No <span class="text-danger">*</span></label>
                                    <select
                                        name="coa_id"
                                        id="coa_id"
                                        class="form-control form-control-select2 border-teal border-1"
                                        required
                                    >
                                        <option value="">** Select COA **</option>
                                        @foreach($coas as $coa)
                                            <option value="{{$coa->id}}">
                                                ({{$coa->account_no}}) {{$coa->description}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>First Name <span class="text-danger">*</span></label>
                                    <input type="text" name="first_name" id="first_name" class="form-control" autocomplete="off" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Title</label>
                                    <select name="contact_title" id="contact_title" class="form-control form-control-select2" autocomplete="off">
                                        <option value="">-- Select title --</option>
                                        @foreach(config('custom.titles') as $title)
											<option value="{{$title}}">{{$title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>City <span class="text-danger">*</span></label>
                                    <select name="city_id" id="city_id" class="form-control form-control-select2" autocomplete="off" required>
                                        <option value="">-- Select city --</option>
                                        @foreach ($cities as $city)
                                            <option value="{{$city->id}}">{{ $city->city_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Postcode</label>
                                    <input type="text" name="post_code" id="post_code" class="form-control" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Address <span class="text-danger">*</span></label>
                                    <textarea rows="3" name="address" id="address" class="form-control" autocomplete="off" required></textarea>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Country <span class="text-danger">*</span></label>
                                    <select name="country_id" id="country_id" class="form-control form-control-select2" autocomplete="off" required>
                                        <option value="">-- Select country --</option>
                                        @foreach ($countries as $country)
                                            <option value="{{$country->id}}">{{ $country->country_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Telephone <span class="text-danger">*</span></label>
                                    <input type="text" name="telephone" id="telephone" class="form-control" autocomplete="off" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Telefax</label>
                                    <input type="text" name="telefax" id="telefax" class="form-control" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Bank Name</label>
                                    <input type="text" name="bank_name" id="bank_name" class="form-control" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Bank Account No</label>
                                    <input type="text" name="bank_acct_no" id="bank_acct_no" class="form-control" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>p.p</label>
                                    <input type="text" name="atas_nama_bank" id="atas_nama_bank" class="form-control" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Discount</label>
                                    <input type="number" name="discount" id="discount" class="form-control" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Last Delivery <span class="text-danger">*</span></label>
                                    <input type="text" name="last_delivery" id="last_delivery" class="form-control daterange-single" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Comments</label>
                            <textarea rows="5" name="comments" id="comments" class="form-control" autocomplete="off"></textarea>
                        </div>

                    </fieldset>
                    <div class="text-right">
                        <a href="{{url('/supplier')}}" class="btn btn-light">Back <i class="icon-undo"></i></a>
                        <button type="submit" id="submit" class="btn btn-primary submitBtn">Submit <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/ui/moment/moment.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('global_assets/js/plugins/forms/inputs/jquery.mask.js')}}"></script>

<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>
<script type="text/javascript">
// Basic initialization
$('.daterange-single').daterangepicker({
	singleDatePicker: true,
    responsive: true,
	locale: {
	  format: 'DD-MM-YYYY'
	},
    drops: 'up'
});

// 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: 'dd-mm-yyyy',
});

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

        // 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.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

});
</script>
@endsection