@extends('backend.layouts.app')

@section('content')
    <div class="content-wrapper">
        {{ \Diglactic\Breadcrumbs\Breadcrumbs::render('backend.settings.index') }}

        <section class="content">
            <div class="row">
                <div class="col-12">
                    @include('backend.layouts.partials.alerts.flash-messages')
                    <form action="{{ route('backend.settings.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="card">
                            <div class="card-body">
                                <div class="mb-5">
                                    <div class="col-md-12">
                                        <h4>SEO</h4>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="seo-title">Title</label>
                                            <input type="text" class="form-control" id="seo-title" name="seo_title"
                                                   placeholder="Title..."
                                                   value="{{ old('seo_title', $seoData['title'] ?? '') }}" required>
                                            @include('backend.layouts.partials.alerts.input-error', ['name' => 'seo_title'])
                                        </div>
                                        <div class="form-group">
                                            <label for="seo-description">Description</label>
                                            <textarea name="seo_description" id="seo-description" class="form-control"
                                                      style="text-align: left; min-height: 100px;"
                                                      placeholder="Description..."
                                                      required>{{ old('seo_description', $seoData['description'] ?? '') }}</textarea>
                                            @include('backend.layouts.partials.alerts.input-error', ['name' => 'seo_description'])
                                        </div>
                                        <div class="form-group">
                                            <label for="seo-keywords">Keywords</label>
                                            <textarea name="seo_keywords" id="seo-keywords" class="form-control"
                                                      style="text-align: left; min-height: 100px;"
                                                      placeholder="Keywords...">{{ old('seo_keywords', $seoData['keywords'] ?? '') }}</textarea>
                                            @include('backend.layouts.partials.alerts.input-error', ['name' => 'seo_keywords'])
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-5">
                                    <div class="col-md-12">
                                        <h4>Support Info</h4>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-6 form-group">
                                                <label for="support-email">Site Email</label>
                                                <input type="email" class="form-control" id="support-email"
                                                       name="support_email"
                                                       placeholder="Email..."
                                                       value="{{ old('support_email', $supportData['email']) }}"
                                                       required>
                                                @include('backend.layouts.partials.alerts.input-error', ['name' => 'support_email'])
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label for="support-phone-number">Phone number</label>
                                                <input type="text" class="form-control phone-number__mask"
                                                       id="support-phone-number" name="support_phone_number"
                                                       placeholder="(000) 000-0000"
                                                       value="{{ old('support_phone_number', $supportData['phone_number']) }}"
                                                       required>
                                                @include('backend.layouts.partials.alerts.input-error', ['name' => 'support_phone_number'])
                                            </div>
                                            <div class="col-md-12 form-group">
                                                <label for="support-location">Location</label>
                                                <input type="text" class="form-control address-input"
                                                       id="support-location" name="support_location"
                                                       placeholder="Location..."
                                                       autocomplete="off"
                                                       value="{{ old('support_location', $supportData['location']) }}">
                                                @include('backend.layouts.partials.alerts.input-error', ['name' => 'support_location'])
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-5">
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-12 form-group">
                                                <label for="amount-hours">Amount of hours</label>
                                                <input type="number" class="form-control" id="amount-hours" step="1"
                                                       name="hours"
                                                       placeholder="240..."
                                                       value="{{ old('hours', $hours ?? 0) }}"
                                                       required>
                                                @include('backend.layouts.partials.alerts.input-error', ['name' => 'hours'])
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">Update</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('js')
    <script>
        $('.thumb').on('change', function (){
            if($(this).prop('files').length > 0){
                $(this).parent().find('.thumb-label').empty();
                $(this).parent().find('.thumb-label').append($(this).prop('files')[0].name);
            }
        });
    </script>
@endpush