@php
$layout = (isSeller() > 0) ? 'layouts.seller' : 'layouts.admin';
@endphp
@extends($layout)

@section('content')
<div class="page-header text-uppercase">
    <ul class="list-unstyled space-list m-0">
        <li>
            <p>{!! __('kiosk_device.kiosk_device') !!}</p>
        </li>
        <li>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    @php
                    $routeDashboard = (isSeller() > 0) ? 'seller.kiosk-device.index' : 'kiosk-device.index';
                    @endphp
                    <li class="breadcrumb-item"><a href="{!! route($routeDashboard) !!}">{!! __('kiosk_device.kiosk_device') !!}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{!! __('kiosk_device.kiosk_device_add') !!}</li>
                </ol>
            </nav>
        </li>
    </ul>
</div>
<div class="admin-area-col">
    {!! Form::open(array('route' => $route, 'method' => 'POST' ,'id' => 'ajaxSave')) !!}
    <div class="row">
        <div class="col-12">

            <div class="round-white-bg box-shadow">
                <div class="col-md-6 error-msg font-14 mt-2"></div>
                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                                <div class="row col-md-6">
                                    <div class="col-md-12">
                                        <div class="custom-input-group colored-field-group">
                                            {!! Form::label('name', __('kiosk_device.name'), ['class' => 'control-label mb-2']) !!}
                                            {!! Form::text('name', null, ['class' => 'form-control']) !!}
                                        </div>
                                    </div>
                                    @if (isSeller()<=0)
                                    <div class="col-md-12">
                                        <div class="custom-input-group colored-field-group">
                                            {!! Form::label('name', __('kiosk_device.store_name'), ['class' => 'control-label mb-2']) !!}
                                            {!! Form::select('store_id', $stores,null, ['class' => 'form-control select2-new']) !!}
                                        </div>
                                    </div>
                                    @endif


                                    <div class="col-md-12">
                                        <div class="custom-input-group colored-field-group">
                                            {!! Form::label('pin', __('kiosk_device.pin'), ['class' => 'control-label mb-2']) !!}
                                            <div class="input-group">
                                                {!! Form::text('pin', null, ['class' => 'form-control type_number __random_pin', 'maxlength' => '4' ,'readonly' => true]) !!}
                                                <div class="input-group-append __generate_pin" data-length="4">
                                                    <span class="input-group-text" id="basic-addon1">
                                                       <i class="fa fa-spinner" aria-hidden="true"></i> <span class="pl-2">Generate Pin</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="custom-input-group colored-field-group">
                                            {!! Form::label('terminal_available', __('kiosk_device.terminal_available'), ['class' => 'control-label mb-2']) !!}
                                            {!! Form::select('terminal_available', yesNo(), null, ['class' => 'form-control']) !!}
                                        </div>
                                    </div>

                                    <div class="col-md-12 __terminal_device_id">
                                        <div class="custom-input-group colored-field-group">
                                            {!! Form::label('terminal_device_id', __('kiosk_device.terminal_device_id'), ['class' => 'control-label mb-2']) !!}
                                            {!! Form::text('terminal_device_id', null, ['class' => 'form-control']) !!}
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="global-item-top-box">
                                            <label class="yummy-switch-label">
                                                {!! Form::checkbox('status', 1, true) !!}
                                                <span class="yummy-switch-box"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mt-3 text-left col-12">
                                <ul class="list-inline">
                                    <li class="list-inline-item">
                                        <input type="submit" class="btn btn-primary width80" value="{!! __('seller.save') !!}">
                                    </li>
                                    {{-- <li class="list-inline-item">
                                        <input type="reset" class="btn btn-default width80 width80" value="{!! __('seller.cancel') !!}">
                                    </li> --}}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {!! Form::close() !!}
</div>
@endsection

@section('script')
    <script>
        let terminalDeviceId = document.getElementsByClassName('__terminal_device_id');
        let terminalAvailable = document.querySelector('select[name="terminal_available"]');
        terminalAvailable.addEventListener('change',function(e){

            let value = e.target.value;
            if(value == 1){
                terminalDeviceId[0].style.display = 'block';
            }else{
                terminalDeviceId[0].style.display = 'none';
            }
        });
    </script>

@endsection