@extends('layouts.master')

@section('content')

<div class="container-xxl">
    <x-breadcrumb listRoute="{{ route('admin.team-categories.index') }}" model="Team 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.team-categories.store') }}" method="POST" enctype="multipart/form-data">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Add Team 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.row_reorder', ['url' => route('admin.team-categories.reorder')])
@include('_helpers.ajax_form')
@include('_helpers.image_preview', ['name' => 'image'])
@include('_helpers.yajra', ['url' => route("admin.team-categories.index"), 'columns' => $columns])
@include('_helpers.swal_delete')
@include('_helpers.status_change', ['url' => route('admin.team-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