@extends('layouts.master')

@section('content')
    <div class="container-xxl">
        <x-breadcrumb listRoute="{{ route('admin.blog-categories.index') }}" model="Blog Categories" />

        <div class="card">
            <div class="card-body">
                <div class="d-flex" style="justify-content:space-between">
                    <ul class="nav nav-tabs nav-pills" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            {{-- <a href="{{ route('admin.team-categories.edit',$team_category->id) }}" class="nav-link">Team</a> --}}
                        </li>
                    </ul>
                    <button class="btn btn-sm btn-dark mb-2" data-bs-toggle="modal" data-bs-target="#modelCreate">
                        <i class='bx bx-xs bx-plus'></i> Create
                    </button>
                </div>

                <div class="table-responsive no-wrap">
                    <table class="table" id="datatable">
                        <x-table.header :headers="['title', 'Actions']" />
                        <tbody id="tablecontents"></tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Update Modal --}}
        <div class="modal fade" id="modelUpdate" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="modelUpdate" aria-hidden="true">
        </div>

        {{-- Create Modal --}}
        <div class="modal fade" id="modelCreate" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="modelCreate" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <x-form.wrapper action="{{ route('admin.blog-categories.store') }}" method="POST"
                        enctype="multipart/form-data">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">Add Blog Category</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <div class="modal-body">
                            <x-form.row>
                                <x-form.input type="text" col="6" label="Title" :req="true" id="title"
                                    name="title" />
                                <x-form.input type="text" col="6" label="Slug" :req="true" id="slug"
                                    name="slug" />
                            </x-form.row>

                            <x-form.row>
                                <x-form.input type="text" col="4" label="Order" :req="true" id="order"
                                    name="order" />
                            </x-form.row>

                            <div class="mt-2">
                                <x-form.checkbox label="Status" id="status" name="status" value="1"
                                    class="form-check-input" isEditMode="yes" />
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-sm btn-dark">
                                <i class='bx bx-save bx-xs'></i> Save
                            </button>
                        </div>
                    </x-form.wrapper>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom_js')
    @include('_helpers.slugify', ['title' => 'title'])
    @include('_helpers.row_reorder', ['url' => route('admin.blog-categories.reorder')])
    @include('_helpers.ajax_form')
    @include('_helpers.image_preview', ['name' => 'image'])
    @include('_helpers.yajra', ['url' => route('admin.blog-categories.index'), 'columns' => $columns])
    @include('_helpers.swal_delete')
    @include('_helpers.status_change', ['url' => route('admin.blog-categories.status')])

    <script>
        $(document).on("click", ".itinerary-edit", function(e) {
            e.preventDefault();
            const id = $(this).attr("data-id");
            const url = $(this).attr("href");

            try {
                fetch(url, {
                        headers: {
                            "Accept": "application/json"
                        }
                    })
                    .then(response => response.text())
                    .then(html => {
                        $("#modelUpdate").html(html);
                        const myModal = new bootstrap.Modal(document.getElementById('modelUpdate'));
                        myModal.show();
                    });
            } catch (error) {
                console.error(error);
            }
        });
    </script>
@endpush