@extends('backend.layouts.app')

@section('content')
    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                @include('backend.layouts.partials.alerts.flash-messages')
                <div class="row">
                    <div class="col-12">
                        <div class="card card-primary">
                            <form action="{{ route('backend.pages.update', $page->id) }}" method="POST"
                                  enctype="multipart/form-data" id="update-page-form">
                                @csrf
                                @method('PUT')
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h2>Main information</h2>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="name">Name</label>
                                                <input type="text" class="form-control" id="name" name="name"
                                                       placeholder="Name..."
                                                       value="{{ old('name', ucfirst($page->name)) }}"
                                                       disabled required>
                                            </div>
                                            @include('backend.layouts.partials.alerts.input-error', ['name' => 'name'])
                                            @include('backend.layouts.partials.alerts.input-error', ['isAjax' => true, 'name' => 'name'])
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="slug">URL</label>
                                                <input type="text" class="form-control" id="slug" name="slug"
                                                       placeholder="URL..."
                                                       value="{{ old('slug', $page->name) }}"
                                                       disabled required>
                                            </div>
                                            @include('backend.layouts.partials.alerts.input-error', ['name' => 'slug'])
                                            @include('backend.layouts.partials.alerts.input-error', ['isAjax' => true, 'name' => 'slug'])
                                        </div>
                                        @switch($page->name)
                                            @case('overview')
                                            @include('backend.pages.partials.overview', ['page' => $page])
                                            @break

                                            @case('interview')
                                            @include('backend.pages.partials.interview', ['page' => $page])
                                            @break

                                            @case('new-case')
                                            @include('backend.pages.partials.new-case', ['page' => $page])
                                            @break
                                        @endswitch
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary">Update</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('js')
    <script>
        $('.tab_btn').on('click', function (e) {
            e.preventDefault();
            let id = $(this).data('tab-id');
            $('.tabs').hide();
            $('#'+id).show();
        });
    </script>
@endpush