@extends('layouts.app', ['title' => __('Add Site')])

@section('content')
    @include('sites.partials.header', [
        'title' => __('Add a Site'),
        'class' => 'col-lg-12'
    ])

    <div class="container-fluid mt--7">
        <div class="row">
            <div class="col">
                <div class="card bg-secondary shadow">
                    <div class="card-header bg-white border-0">
                        <div class="row align-items-center">
                            <h3 class="col-12 mb-0">{{ __('Add a new WooCommerce Site') }}</h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('sites.store') }}" autocomplete="off">
                            @csrf
                            @method('post')

{{--                            <h6 class="heading-small text-muted mb-4">{{ __('User information') }}</h6>--}}

                            @if (session('status'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    {{ session('status') }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @endif

                            <div class="row">
                                <div class="col">
                                    <div class="form-group{{ $errors->has('site_name') ? ' has-danger' : '' }}">
                                        <label class="form-control-label" for="input-name">{{ __('Site Name') }} <span class="text-red">*</span></label>
                                        <input type="text" name="site_name" id="input-name" class="form-control form-control-alternative{{ $errors->has('site_name') ? ' is-invalid' : '' }}" placeholder="{{ __('WooCommerce Shop') }}" value="{{ old('site_name') }}" required autofocus>

                                        @if ($errors->has('site_name'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('site_name') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group{{ $errors->has('url') ? ' has-danger' : '' }}">
                                        <label class="form-control-label" for="input-url">{{ __('Site URL') }} <span class="text-red">*</span></label>
                                        <input type="url" name="url" id="input-url" class="form-control form-control-alternative{{ $errors->has('url') ? ' is-invalid' : '' }}" placeholder="{{ __('https://example.com') }}" value="{{ old('url') }}" required>

                                        @if ($errors->has('url'))
                                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('url') }}</strong>
                                    </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="form-group{{ $errors->has('key') ? ' has-danger' : '' }}">
                                        <label class="form-control-label" for="input-name">{{ __('Consumer Key') }} <span class="text-red">*</span></label>
                                        <input type="text" name="key" id="input-name" class="form-control form-control-alternative{{ $errors->has('key') ? ' is-invalid' : '' }}" placeholder="{{ __('Consumer Key') }}" value="{{ old('key') }}" required autofocus>

                                        @if ($errors->has('key'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('key') }}</strong>
                                        </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group{{ $errors->has('secret') ? ' has-danger' : '' }}">
                                        <label class="form-control-label" for="input-name">{{ __('Consumer Secret') }} <span class="text-red">*</span></label>
                                        <input type="text" name="secret" id="input-name" class="form-control form-control-alternative{{ $errors->has('secret') ? ' is-invalid' : '' }}" placeholder="{{ __('Consumer Secret') }}" value="{{ old('secret') }}" required autofocus>

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

                            <div class="row">
                                <div class="col">
                                    <label for="active">Active?</label>
                                    <div class="form-group">

                                        <label class="custom-toggle">
                                            <input id="input-active" name="active" type="checkbox" checked>
                                            <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="text-left">
                                <button type="submit" class="btn btn-success mt-4">{{ __('Add Site') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        @include('layouts.footers.auth')
    </div>
@endsection