@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(' Blog')}}</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">

                            <a href="{{route('backend.blog.create')}}" class="btn btn-primary">
                                <i class="ki-duotone ki-plus fs-2"></i>{{translate('Add Blog')}}
                            </a>


                            <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-muted fw-bold fs-7 text-uppercase gs-0">
                                <th class="text-end">#</th>
                                <th class="text-end">{{translate('Name')}}</th>

                                <th class="text-end">{{translate('Status')}}</th>
{{--                                <th class="text-end">{{ translate('Show in Home') }}</th>--}}
                                <th class="text-end">{{ translate('Home Order') }}</th>
                                <th class="text-end">{{translate('Action')}}</th>
                            </tr>
                            <!--end::Table row-->
                            </thead>
                            <tbody class="fw-semibold text-gray-600">
                                                        @foreach($blogs as $blog)
                                                                    <tr data-id="{{$blog->id}}">
                                    <th>{{$i}}</th>
                                    <th>{{$blog->getTranslation('name')}}</th>


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

{{--                                    <th>--}}
{{--                                        <label class="form-check form-switch form-check-custom form-check-solid">--}}
{{--                                            <input class="form-check-input show-home"--}}
{{--                                                   type="checkbox"--}}
{{--                                                {{$blog->show_home ? 'checked' : ''}}>--}}
{{--                                        </label>--}}
{{--                                    </th>--}}

                                    <th style="width:140px">
                                        <select class="form-select form-select-sm home-order"
                                               >
                                            <option value="">—</option>

                                            @for($i = 1; $i <= 9; $i++)
                                                <option value="{{ $i }}"
                                                    {{ $blog->home_order == $i ? 'selected' : '' }}>
                                                    {{ $i }}
                                                </option>
                                            @endfor
                                        </select>
                                    </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_{{$blog->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>

                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

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

@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.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.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
                    });
                }
            });
        });


        $('table').on('change', '.show-home', function () {
            let row = $(this).closest('tr');
            let id = row.data('id');
            let orderInput = row.find('.home-order');

            $.post('{{ route('backend.blog.show_home') }}', {
                id: id,
                _token: "{{ csrf_token() }}"
            }, function () {
                if ($(row).find('.show-home').is(':checked')) {
                    orderInput.show();
                    Swal.fire({
                        icon: "success",
                        title: "{{ translate('Added to Home') }}",
                        text: "{{ translate('This blog will now appear on the homepage.') }}"
                    });
                } else {
                    orderInput.hide().val('');
                    $.post('{{ route('backend.blog.home_order') }}', {
                        id: id,
                        order: null,
                        _token: "{{ csrf_token() }}"
                    });
                    Swal.fire({
                        icon: "info",
                        title: "{{ translate('Removed from Home') }}",
                        text: "{{ translate('This blog will no longer appear on the homepage.') }}"
                    });
                }
            });
        });

        $('table').on('change', '.home-order', function () {
            let row = $(this).closest('tr');
            let id = row.data('id');
            let newOrder = $(this).val();

            $.post('{{ route('backend.blog.swap_home_order') }}', {
                id: id,
                order: newOrder,
                _token: "{{ csrf_token() }}"
            }, function (response) {
                $('.home-order').each(function () {
                    let blogId = $(this).closest('tr').data('id');
                    if (response.orders[blogId] !== undefined) {
                        $(this).val(response.orders[blogId]);
                    }
                });

                Swal.fire({
                    icon: "success",
                    title: "{{ translate('Order updated!') }}",
                    text: "{{ translate('The home order has been successfully updated.') }}"
                });
            }, 'json');
        });
    </script>

@endsection