@extends('layout.default')
{{-- @include('outlet::bank_account') --}}
@include('outlet::request_admin')

@section('styles')
	<style type="text/css">
		.custom-alert{
			border: 1px solid #0abb87;
			border-left: 8px solid #0abb87;
			color: #0abb87;
		}
	</style>
	@yield('bank-account-style')
@endsection

@section('content')
    <div class="card">
        <div class="card card-body">
            @include('layout.notifications')
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link @if (!isset($active)) active @endif" id="update-info-tab" data-toggle="tab" href="#update-info">
                        <span class="nav-text">Perbarui Info</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link @if(isset($active) && $active == 'schedule') active @endif" id="update-schedule-tab" data-toggle="tab" href="#update-schedule">
                        <span class="nav-text">Perbarui Jadwal</span>
                    </a>
                </li>
                {{-- <li class="nav-item">
                    <a class="nav-link @if(isset($active) && $active == 'bank-account') active @endif" id="update-bank-account-tab" data-toggle="tab" href="#update-bank-account">
                        <span class="nav-text">Update Bank Account</span>
                    </a>
                </li> --}}
                <li class="nav-item">
                    <a class="nav-link @if(isset($active) && $active == 'request-admin') active @endif" id="update-request-admin-tab" data-toggle="tab" href="#update-request-admin">
                        <span class="nav-text">Kirim Permintaan Perubahan</span>
                    </a>
                </li>
            </ul>
            <div class="tab-content mt-5" id="myTabContent">
                <div class="tab-pane fade @if (!isset($active)) show active @endif" id="update-info" role="tabpanel" aria-labelledby="update-info-tab">
	                <form class="form" id="form_setting_outlet" action="{{url('outlet/update')}}" method="POST" enctype="multipart/form-data">
                		<div class="card-body">
							<div class="alert custom-alert" role="alert">
							  	<div class="alert-text">
							  		Informasi pin JILID+ yang baru akan dikirimkan ke email terdaftar di akun ini
								</div>
							</div>
	                        {{ csrf_field() }}
		                	<div class="form-group row">
			                    <label for="example-search-input" class="col-2 col-form-label">No HP <span class="text-danger">*</span></label>
			                    <div class="col-4">
			                        <input class="form-control" type="text" name="outlet_phone" value="{{$outlet['outlet_phone']}}" required placeholder="Masukkan Nomor HP"/>
			                    </div>
			                </div>
			                <div class="form-group row">
	                            <label for="example-search-input" class="col-2 col-form-label">Perbarui Pin JILID+</label>
	                            <div class="col-9 col-form-label">
	                                <div class="radio-inline">
	                                	<label class="radio radio-primary">
	                                        <input type="radio" name="update_pin_type" checked value="no_update" onclick="updatePinType(this.value)"/>
	                                        <span></span>Tidak</label>
	                                    <label class="radio radio-primary">
	                                        <input type="radio" name="update_pin_type" value="input" onclick="updatePinType(this.value)"/>
	                                        <span></span>Input Manual</label>
	                                    <label class="radio radio-primary">
	                                        <input type="radio" name="update_pin_type" value="random" onclick="updatePinType(this.value)"/>
	                                        <span></span>Input acak oleh Sistem</label>
	                                </div>
	                            </div>
	                        </div>
	                        <div id="input-pin-form" style="display: none">
	                        	<div class="form-group row">
				                    <label for="example-search-input" class="col-2 col-form-label">New Outlet Pin <span class="text-danger">*</span></label>
				                    <div class="col-4">
				                        <input id="input-pin" class="form-control" type="password" maxlength="6" minlength="6" name="outlet_pin" placeholder="Enter new pin here" autocomplete="off" onkeypress="return isNumberKey(event)"/>
				                    </div>
				                </div>
				                <div class="form-group row">
				                    <label for="example-search-input" class="col-2 col-form-label">Re-type New Outlet Pin <span class="text-danger">*</span></label>
				                    <div class="col-4">
				                        <input id="input-pin-confirm" class="form-control" type="password" maxlength="6" minlength="6" name="outlet_pin_confirm" placeholder="Enter new pin here" autocomplete="off" onkeypress="return isNumberKey(event)"/>
				                    </div>
				                </div>
	                        </div>
                        <button type="submit" class="btn btn-success mr-2">Kirim</button>
                		</div>
	                </form>
                </div>
                <div class="tab-pane fade @if(isset($active) && $active == 'schedule') show active @endif" id="update-schedule" role="tabpanel" aria-labelledby="update-schedule-tab">
                    @include('outlet::schedule')
                </div>
                {{-- <div class="tab-pane fade @if(isset($active) && $active == 'bank-account') show active @endif" id="update-bank-account" role="tabpanel" aria-labelledby="update-bank-account-tab">
                	@yield('bank-account')
                </div> --}}
                <div class="tab-pane fade @if(isset($active) && $active == 'request-admin') show active @endif" id="update-request-admin" role="tabpanel" aria-labelledby="update-request-admin-tab">
                	@yield('request-admin')
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2();

            $('#btn-submit').on('click', function(event) {
                const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                if(!re.test($('#input-email').val())){
                    Swal.fire(
                        "Woops!",
                        'Format email is not valid' ,
                        "error"
                    )
                    event.preventDefault();
                    event.stopPropagation();
                }
            });

            $('.time').timepicker({
                minuteStep: 1,
                showSeconds: false,
                showMeridian: false,
                snapToStep: true
            });

            window.setTimeout(removeAlert, 60000);
        });

        function updatePinType(value){
	        if(value == 'input'){
	            $("#input-pin-form").show();
	            $("#input-pin").prop('required', true);
	            $("#input-pin-confirm").prop('required', true);
	        }else{
	            $("#input-pin-form").hide();
	            $("#input-pin").prop('required', false);
	            $("#input-pin-confirm").prop('required', false);
	        }
	    }

	    function sameAll() {
            var open = $('#global_open').val();
            var close = $('#global_close').val();

            $('.time-open').val(open);
            $('.time-close').val(close);
        }

        function removeAlert(){
        	$('.alert-success').alert('close');
        }

        /*function submit(){
            var msg_error = "";
            var outlet_logo = $('[name=outlet_logo]').val();
            var outlet_old_logo = $('[name=old_logo]').val();

            if(outlet_logo === "" && outlet_old_logo === ""){
                msg_error += '-Please input your outlet logo <br>';
            }

            if(msg_error !== ""){
                Swal.fire("", msg_error, "error");
            }else{
                $( "#form_setting_outlet" ).submit();
            }
        }*/

        function isNumberKey(evt){
	        var charCode = (evt.which) ? evt.which : event.keyCode
	        if (charCode > 31 && (charCode < 48 || charCode > 57))
	            return false;
	        return true;
	    }
    </script>

    {{-- @yield('bank-account-script') --}}
@endsection