@extends('Backend.Layout.app')

@section('content')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container  d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{translate('Categories')}}</h1>

                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->
                <!--end::Actions-->
            </div>
            <!--end::Toolbar container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container ">
                <!--begin::Card-->
                <div class="card  card-flush">
                    <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                        <div class="card-title">
                            <!--begin::Search-->
                            <div class="d-flex align-items-center position-relative my-1">
                                <span class="svg-icon fs-1 position-absolute ms-4"><i
                                        class="fa-solid fa-magnifying-glass"></i></span>
                                <input type="text" data-kt-filter="search"
                                       class="form-control form-control-solid w-250px ps-14"
                                       placeholder="{{translate('Search')}}"/>
                            </div>
                            <!--end::Search-->
                            <!--begin::Export buttons-->
                            <div id="kt_datatable_example_1_export" class="d-none"></div>
                            <!--end::Export buttons-->
                        </div>
                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5">

                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                        data-bs-target="#kt_modal_add_project">
                                    <i class="ki-duotone ki-plus fs-2"></i>{{translate('Add Category')}}
                                </button>


                            <div id="kt_datatable_example_buttons" class="d-none"></div>

                        </div>
                    </div>
                    <div class="card-body  py-4">
                        <table class="table align-middle  rounded table-row-dashed fs-6 g-5"
                               id="kt_datatable_example">
                            <thead>

                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                <th class="min-w-50px">#</th>
                                <th class="min-w-125px">{{translate('Name')}}</th>

                                    <th class="min-w-125px">{{translate('Status')}}</th>
                                <th class="min-w-125px">{{translate('Action')}}</th>
                            </tr>
                            <!--end::Table row-->
                            </thead>
                            <tbody class="fw-semibold text-gray-600">
                                                            @foreach($categories as $category)
                                                                    <tr data-id="{{$category->id}}">
                                    <th>{{$i}}</th>
                                    <th>{{$category->getTranslation('name')}}</th>


                                        <th>
                                            <label class="form-check form-switch form-check-custom form-check-solid">
                                                <input class="form-check-input status" type="checkbox"
                                                       {{$category->status == 1?'checked':''}} value="{{$category->status == 1?1:0}}"/>
                                            </label>
                                        </th>

                                    <th>
                                        <a href="#"
                                           class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm"
                                           data-kt-menu-trigger="click"
                                           data-kt-menu-placement="bottom-end">{{translate('Actions')}}
                                            <i class="ki-duotone ki-down fs-5 ms-1"></i></a>
                                        <!--begin::Menu-->
                                        <div
                                            class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                            data-kt-menu="true">
                                            <!--begin::Menu item-->

                                                <div class="menu-item px-3">
                                                    <a  data-bs-toggle="modal"
                                                        data-bs-target="#kt_modal_{{$category->id}}"
                                                       class="menu-link px-3">{{ translate('Edit') }}</a>
                                                </div>



                                                <!--begin::Menu item-->
                                                <div class="menu-item px-3">
                                                    <a class="menu-link px-3 btn-danger">{{translate('Delete')}}</a>
                                                </div>


                                            <!--end::Menu item-->
                                        </div>
                                    </th>
                                </tr>

                                <div class="modal fade" tabindex="-1" id="kt_modal_{{$category->id}}">
                                    <div class="modal-dialog modal-dialog-centered mw-650px">
                                        <div class="modal-content position-absolute">
                                            <div class="modal-header">
                                                <h5 class="modal-title">{{translate('Edit')}}</h5>

                                                <!--begin::Close-->
                                                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2"
                                                     data-bs-dismiss="modal" aria-label="Close">
                                                    <i class="ki-duotone ki-cross fs-2x"><span
                                                            class="path1"></span><span
                                                            class="path2"></span></i>
                                                </div>
                                                <!--end::Close-->
                                            </div>

                                            <form id="kt_modal_u_{{$category->id}}" class="form" action="{{ route('backend.blog_category.update',['blogCategory' => $category->id]) }}" method="post" enctype="multipart/form-data">
                                                @csrf
                                                <div class="modal-body px-5 my-7">
                                                    <div class="d-flex flex-column scroll-y px-5 px-lg-10" id="kt_modal_add_user_scroll" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_user_header" data-kt-scroll-wrappers="#kt_modal_add_user_scroll" data-kt-scroll-offset="300px">

                                                        <!-- Language Tabs -->
                                                        <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
                                                            @foreach(languages() as $lang)
                                                                <li class="nav-item">
                                                                    <a class="nav-link @if($loop->first) active @endif text-capitalize" data-bs-toggle="tab" href="#kt_tab_pane_{{ $lang }}">{{ $lang }}</a>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                        <!-- Tab Content -->
                                                        <div class="tab-content" id="myTabContent">
                                                            @foreach(languages() as $lang)
                                                                <div class="tab-pane fade show @if($loop->first) active @endif" id="kt_tab_pane_{{ $lang }}" role="tabpanel">
                                                                    <!-- Name Input -->
                                                                    <div class="fv-row mb-7">
                                                                        <label class="required fw-semibold fs-6 mb-2">{{ translate('Name') }} {{ $lang }}</label>
                                                                        <input type="text" value="{{$category->getTranslation('name',$lang)}}" name="name_{{ $lang }}" @if($loop->first) required @endif class="form-control form-control-solid mb-3 mb-lg-0" placeholder="{{ translate('Name') }}" />
                                                                    </div>


                                                                    @include('Backend.variables.inputs', ['lang' => $lang, 'data_value' => $category->getTranslation('seo', $lang)])
                                                                </div>
                                                            @endforeach
                                                        </div>


                                                    </div>

                                                    <!-- Actions -->
                                                    <div class="modal-footer">
                                                        @include('Backend.variables.modal-footer')
                                                    </div>
                                                </div>
                                            </form>

                                            <!--end::Form-->
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <!--end::Card-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->


    <div class="modal fade" id="kt_modal_add_project" tabindex="-1">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <div class="modal-header" id="kt_modal_add_user_header">
                    <!--begin::Modal title-->
                    <h2 class="fw-bold">{{translate('Add Category')}} </h2>
                    <!--end::Modal title-->
                    <!--begin::Close-->
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal"
                         aria-label="Close">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                    </div>
                    <!--end::Close-->
                </div>
                <!--end::Modal header-->
                <!--begin::Modal body-->
                <form id="kt_modal_add_user_form" class="form" action="{{ route('backend.blog_category.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body px-5 my-7">
                        <div class="d-flex flex-column scroll-y px-5 px-lg-10" id="kt_modal_add_user_scroll" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_user_header" data-kt-scroll-wrappers="#kt_modal_add_user_scroll" data-kt-scroll-offset="300px">

                            <!-- Language Tabs -->
                            <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
                                @foreach(languages() as $lang)
                                    <li class="nav-item">
                                        <a class="nav-link @if($loop->first) active @endif text-capitalize" data-bs-toggle="tab" href="#kt_tab_pane_{{ $lang }}">{{ $lang }}</a>
                                    </li>
                                @endforeach
                            </ul>
                            <!-- Tab Content -->
                            <div class="tab-content" id="myTabContent">
                                @foreach(languages() as $lang)
                                    <div class="tab-pane fade show @if($loop->first) active @endif" id="kt_tab_pane_{{ $lang }}" role="tabpanel">
                                        <!-- Name Input -->
                                        <div class="fv-row mb-7">
                                            <label class="required fw-semibold fs-6 mb-2">{{ translate('Name') }} {{ $lang }}</label>
                                            <input type="text" name="name_{{ $lang }}" @if($loop->first) required @endif class="form-control form-control-solid mb-3 mb-lg-0" placeholder="{{ translate('Name') }}" />
                                        </div>


                                        @include('Backend.variables.inputs', ['lang' => $lang, 'data_value' => null])
                                    </div>
                                @endforeach
                            </div>


                        </div>

                        <!-- Actions -->
                        <div class="modal-footer">
                            @include('Backend.variables.modal-footer')
                        </div>
                    </div>
                </form>

                <!--end::Form-->
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->

@endsection

@section('script')
    <script src="{{asset('assets/backend/plugins/custom/ckeditor/ckeditor-document.bundle.js')}}"></script>

    <script>
        $('table').on('click', '.btn-danger', function (event) {
            event.preventDefault();
            var row = $(this).closest('tr');
            var id = row.data('id');
            Swal.fire({
                title: "{{ translate('Are you sure?') }}",
                text: "{{ translate('You will delete this item!') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: "{{ translate('Yes, delete it!') }}"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: 'POST',
                        url: '{{ route('backend.blog_category.delete') }}',
                        data: {id: id, "_token": "{{ csrf_token() }}"},
                        dataType: "json",
                        success: function (response) {
                            if (response.status === 'error') {
                                console.log('error');
                                Swal.fire({
                                    icon: "error",
                                    title: "{{ translate('Error') }}...",
                                    text: "{{ translate('Can\'t delete') }}"
                                });
                            } else {
                                row.remove();
                                console.log(response.success);
                                Swal.fire({
                                    icon: "success",
                                    title: "{{ translate('Deleted!') }}",
                                    text: response.success,
                                });
                            }
                        },
                        error: function (response) {

                            Swal.fire({
                                icon: "error",
                                title: "{{ translate('Error') }}...",
                                text: response.responseJSON.error
                            });
                        }
                    });
                }
            });
        });


        $('table').on('change', '.status', function () {

            var row = $(this).closest('tr');
            var id = row.attr('data-id');
            $.ajax({
                type: 'POST',
                url: '{{ route('backend.blog_category.status') }}',
                data: {id: id, "_token": "{{ csrf_token() }}"},
                dataType: "json",
                success: function (response) {
                    if (response === 'error') {
                        Swal.fire({
                            icon: "error",
                            title: "{{ translate('Error') }}...",
                            text: '{{ translate("can't change status") }}' // Changed text
                        });
                    } else {
                        Swal.fire({
                            icon: "success",
                            title: "{{ translate('Successfully') }}...",
                        });
                    }
                },
                error: function (response) {
                    Swal.fire({
                        icon: "error",
                        title: "{{ translate('Error') }}...",
                        text: response
                    });
                }
            });
        });
    </script>

@endsection