@extends(Theme::viewName('layout'))
@section('title', trans('admin.create_service'))

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin') }}">@lang('navigation.breadcrumb.admin')</a></li>
    <li class="breadcrumb-item"><a href="{{ route('services.index') }}">@lang('navigation.breadcrumb.services')</a></li>
    <li class="breadcrumb-item active">@lang('navigation.breadcrumb.create_service')</li>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>@lang('admin.create_service_title')</h1>
                <p>@lang('admin.create_service_intro')</p>
                <hr/>

                <form action="{{ route('services.store') }}" method="post" id="external-service-options">
                    {{ csrf_field() }}

                    <div class="form-group">
                        <label class="form-control-label" for="service-type">@lang('forms.service_type_label')</label>
                        <select class="form-control{{ $errors->has('service_type') ? ' is-invalid' : '' }}" id="service-type" name="service_type" value="{{ old('service_type') }}" v-model="service_type">
                            <option value="">@lang('forms.please_select')</option>

                            @foreach ($serviceTypes as $serviceTypeKey => $serviceTypeDescription)
                                <option value="{{ $serviceTypeKey }}">{{ $serviceTypeDescription }}</option>
                            @endforeach
                        </select>

                        @if ($errors->has('service_type'))
                            <div class="invalid-feedback">
                                <strong>{{ $errors->first('service_type') }}</strong>
                            </div>
                        @endif
                    </div>

                    <div class="form-group">
                        <label class="form-control-label" for="service-name">@lang('forms.name_label')</label>
                        <input type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" id="service-name" name="name" value="{{ old('name') }}" />

                        @if ($errors->has('name'))
                            <div class="invalid-feedback">
                                <strong>{{ $errors->first('name') }}</strong>
                            </div>
                        @endif
                    </div>

                    <div v-if="hasOAuthStandardOptions">
                        @include(Theme::viewName('partials.admin_services_oauth_options'))
                    </div>
                    <div v-elseif="isDropbox">
                        @include(Theme::viewName('partials.admin_services_dropbox_options'))
                    </div>

                    <div class="text-right">
                        <a href="{{ route('services.index') }}" class="btn btn-link">@lang('forms.cancel_action')</a>
                        <button type="submit" class="btn btn-success"><i class="fa fa-fw fa-check"></i> @lang('forms.create_action')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        $(document).ready(function()
        {
            var viewModel = new ExternalServiceViewModel();
            var app = new Vue(viewModel);

            @if (strlen(old('service_type')) > 0)
                app.service_type = '{{ old('service_type') }}';
            @endif
        });
    </script>
@endpush