@extends('layouts.master')

@section('content')

<div class="container-xxl">

    <x-breadcrumb listRoute="{{ route('admin.services.index') }}" model="Services" 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.services.edit', $service->id) }}" class="nav-link">Story</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a href="{{ route('admin.services.gallery.index',  $service->id) }}"
                        class="nav-link active">Gallery</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a href="{{ route('admin.services.seo.index',  $service->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','Actions']" />
                    <tbody id="tablecontents"></tbody>
                </table>
            </div>
        </div>
    </div>
    <hr />
    <div class="card">
        <div class="card-header">
            <h5 class="modal-title">Add Gallery</h5>
        </div>
        <div class="card-body">
            <x-form.wrapper action="{{route('admin.services.gallery.store', $service->id)}}" method="POST"
                enctype="multipart/form-data">
                <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-12">
                        <x-form.input type="file" label="Image" :req="true" id="image" name="image"
                            accept="image/*,video/*" onchange="previewThumb(this,'story-thumb')" />
                        <x-form.preview id="story-thumb" />
                    </div>
                </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.row_reorder', ['url' => route('admin.services.gallery.reorder',$service->id)])
@include('_helpers.ajax_form')
@include('_helpers.yajra',['url' => route("admin.services.gallery.index",$service->id), 'columns' => $columns])
@include('_helpers.swal_delete')
@include('_helpers.image_preview', ['name' => 'image'])
@include('_helpers.status_change', ['url' => route('admin.services.gallery.status',$service->id)])
@endpush