@extends('layouts.master')

@section('content')
    <div class="container-xxl">


        <x-breadcrumb listRoute="{{ route('admin.pages.index') }}" model="Pages" item="Edit"></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">
                        <a href="{{ route('admin.pages.edit', ['page' => $page->id]) }}" class="nav-link">Page</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="{{ route('admin.pages.gallery.index', $page->id) }}" class="nav-link active">Gallery</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="{{ route('admin.pages.seo.index', $page->id) }}" class="nav-link">SEO</a>
                    </li>
                </ul>
                <div class="table-responsive no-wrap">
                    <table class="table" id="datatable">
                        <x-table.header :headers="['image', 'alt', 'on cover', 'Actions']" />
                        <tbody id="tablecontents"></tbody>
                    </table>
                </div>
            </div>
        </div>
        <hr />

        <div class="card">
            @php
                $len = 19;
            @endphp
            @if ($page->template !== \App\Enums\PageTemplateType::gallery->value || $gallery_count < $len)
                <div class="card-header">
                    <h5 class="modal-title">Add Gallery</h5>
                </div>
                <div class="card-body">
                    <x-form.wrapper action="{{ route('admin.pages.gallery.store', $page->id) }}" method="POST"
                        enctype="multipart/form-data">
                        @if ($page->template === \App\Enums\PageTemplateType::gallery->value)
                            <small>You can add upto 19 images, 4 for cover and remaining for gallery page</small>
                            <input type="hidden" name="template" value="{{ $page->template }}">
                        @endif
                        <x-form.row>
                            <x-form.input :req="true" type="text" col="6" label="Alt" id="alt"
                                name="alt" />
                            <x-form.input :req="true" type="text" col="6" label="Order" id="order"
                                name="order" />
                        </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>
                            @if ($page->template === \App\Enums\PageTemplateType::gallery->value)
                                <x-form.checkbox col="2" isBreak='break' label="Is On Cover" id="on_cover"
                                    name="on_cover" value="1" class="form-check-input" isEditMode="yes" />
                            @endif


                        </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>
            @else
                <div class="card-body">

                    <small>Can not add images more than {{ $len }}</small>
                </div>
            @endif
        </div>
    </div>
@endsection
@push('custom_js')
    @include('_helpers.row_reorder', ['url' => route('admin.pages.gallery.reorder', $page->id)])
    @include('_helpers.ajax_form')
    @include('_helpers.yajra', [
        'url' => route('admin.pages.gallery.index', $page->id),
        'columns' => $columns,
    ])
    @include('_helpers.swal_delete')
    @include('_helpers.image_preview', ['name' => 'image'])
    @include('_helpers.status_change', ['url' => route('admin.pages.gallery.status', $page->id)])
@endpush