@extends('layouts.master')

@section('content')

<div class="container-xxl">

    <x-breadcrumb listRoute="{{route('admin.pages.index')}}" model="Page" item="Create"></x-breadcrumb>

    <div class="card">
        <div class="card-body">
            <ul class="nav nav-tabs nav-pills" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="product-detail-tab" data-bs-toggle="tab" data-bs-target="#createTabContent" type="button" role="tab" aria-controls="product-detail" aria-selected="true">Page</button>
                </li>
            </ul>
            <x-form.wrapper action="{{route('admin.pages.store')}}" method="POST" enctype="multipart/form-data">

                <x-form.row>
                    <x-form.input type="text" col="6" label="Title" :req="true" id="title" name="title" value="{{old('title')}}" />
                    <x-form.input type="text" col="6" label="Slug" :req="true" id="slug" name="slug" value="{{old('slug')}}" />
                </x-form.row>
                <x-form.row>
                    <x-form.input type="text" col="6" label="Short Title" :req="true" id="short_title" name="short_title" value="{{old('short_title')}}"/>
                    <x-form.select label="Template" :req="true" col="6" :options="$templates" name="template" value="{{ old('template') }}"></x-form.select>
                </x-form.row>
                <x-form.row>
                    <div class="col-lg-6">
                        <x-form.input type="file" label="Image" :req="true" id="image" name="image" accept="image/*,video/*" onchange="previewThumb(this,'page-thumb')" />
                        <x-form.preview id="page-thumb" />
                    </div>
                    <div class="col-lg-6">
                        <x-form.input type="file" label="Cover Image" id="cover" name="cover" accept="image/*,video/*" onchange="previewThumb(this,'cover-thumb')" />
                        <x-form.preview id="cover-thumb" />
                    </div>
                </x-form.row>
                <x-form.textarea isEditor="true" label="Description" :req="true" id="description" name="description" value="{!!old('description')!!}" rows="15" cols="5"/>




                <x-form.row>
                    <x-form.input type="number" col="2" label="Order No." :req="true" id="order" name="order" />
                    <x-form.checkbox col="2" isBreak='break' label="Status" id="status" name="status" value="1" class="form-check-input"/>
                    <x-form.checkbox col="2" isBreak='break' label="Is On Menu" id="is menu" name="is_menu" value="1" class="form-check-input"/>
                    <x-form.checkbox col="2" isBreak='break' label="Is Main Menu" id="is_main_menu" name="is_main_menu" value="1" class="form-check-input"/>

                    <x-form.checkbox col="2" isBreak='break' label="Is On Footer" id="isonfooter" name="is_footer_menu" value="1" class="form-check-input"/>
                </x-form.row>
                <x-form.button class="btn btn-sm btn-dark" type="submit" id="submit"><i class='bx bx-save bx-xs'></i> Save</x-form.button>
            </x-form.wrapper>

        </div>
    </div>
</div>

@endsection

@push('custom_js')
@include('_helpers.slugify',['title' => 'title'])
@include('_helpers.image_preview', ['name' => 'image'])
@include('_helpers.image_preview', ['name' => 'cover'])
@include('_helpers.ck_editor')
@include('_helpers.ajax_form')
<script>
    const button = document.getElementById('submit');

    button.addEventListener('click', function(event) {
        setTimeout(function() {
            event.target.disabled = true;
            event.target.innerText = 'loading...';
        }, 0);

        setTimeout(function() {
            event.target.disabled = false;
            event.target.innerHTML = '';
            const icon = document.createElement('i');
            icon.className = 'bx bx-save bx-xs';
            event.target.appendChild(icon);
            event.target.insertAdjacentText('beforeend', ' Save');
            event.target.form.submit();
        }, 500);
    });

</script>
@endpush