@extends('Admin.layouts.master')

@section('content')
@php
$currentPage = 'manage-news';
@endphp




<div class="layout-px-spacing">
    <div class="middle-content container-xxl p-0">
        <div class="row layout-top-spacing ">
            <div class="top-tabel">
                <div class="row">
                    <div class="col-md-4">
                        <h6 class="card-title">Manage News & Articles</h6>
                    </div>
                    <div class="col-md-8">

                    </div>
                </div>
            </div>
            <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                <div class="widget-content widget-content-area br-8 position-btn" style="overflow: auto;">
                    <table id="zero-config" class="table dt-table-hover news_letter_table" style="width:100%">
                        <thead class="text-center">
                            <!-- <th class="w-10px pe-2">
                                <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                    <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_table_users .form-check-input" value="1" />
                                </div>
                            </th> -->
                            <th class="text-start">Sr no</th>
                            <th class="text-start">Article Name</th>
                            <th class="text-start">Added Date </th>
                            <th class="">Image</th>
                            <th class="no-content">Action</th>
                            </tr>
                        </thead>
                        <tbody class="text-center">
                            @foreach ($news_article as $news_articles)

                            <tr>
                                <!-- <td>
                                    <div class="form-check form-check-sm form-check-custom form-check-solid">
                                        <input class="form-check-input" type="checkbox" value="1" />
                                    </div>
                                </td> -->
                                <td class="text-start">{{$loop->iteration}}</td>
                                <td class="text-start">{{ $news_articles['name'] }}</td>
                                <td class="text-start">{{ \Carbon\Carbon::parse($news_articles['created_at'])->format('m/d/Y') }}</td>
                                <!-- <td><img src="../src/assets/img/video.png"></td> -->
                                <td><img src="{{ asset('storage/app/public/' . $news_articles['thumbnail_image']) }}" height="50px" width="50px"></td>
                                <td>
                                    <div class="dropout">
                                        <button class="more">
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                        </button>
                                        <ul>
                                            <li>
                                                <div class="switch-btn">
                                                    <input data-id="{{ $news_articles['id'] }}" {{ $news_articles['is_active'] ? 'checked' : '' }} type="checkbox" class="active_newsletter" id="switch{{ $news_articles['id'] }}" switch="bool" />
                                                    <label for="switch{{ $news_articles['id'] }}" data-on-label="Active" data-off-label="Expired"></label>
                                                </div>


                                            </li>
                                            <li>
                                                <a href="{{ url('manage_edit_news/' . $news_articles['id']) }}">
                                                    <img src="{{ asset('public/assets/img/edit.svg') }}" />
                                                    <span>Edit</span>
                                                </a>
                                            </li>
                                            <li>
                                                <!-- <a href="" data-toggle="modal" data-target="#delete-modal">
                                                            <img src="{{ asset('assets/img/delete-recycle.svg') }}" />
                                                            <span>Delete</span>
                                                        </a> -->
                                                <a class="delete_news" data-id="{{ $news_articles['id'] }}" data-toggle="modal" data-target="#delete-modal">
                                                    <img src="{{ asset('public/assets/img/delete-recycle.svg') }}" />
                                                    <span>Delete</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>

                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                        x
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="delete_news_id" name="news_id">
                    <p class="modal-text">Are you sure you want to<br>Delete </p>
                    <div class="modal-btn d-flex ">
                        <a type="button" class="extra-btn" data-dismiss="modal">No</a>
                        <a type="button" class="download-btn-custom delete_news_button" data-dismiss="modal">Yes</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection


@section('section_script')

<script src="../src/plugins/src/table/datatable/datatables.js"></script>
<script>
    $('#zero-config').DataTable({
        "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
            "<'table-responsive'tr>" +
            "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
        "oLanguage": {
            "oPaginate": {
                "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
            },
            "sInfo": "Showing page _PAGE_ of _PAGES_",
            "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
            "sSearchPlaceholder": "Search...",
            "sLengthMenu": "Results :  _MENU_",
        },
        "stripeClasses": [],
        "lengthMenu": [7, 10, 20, 50],
        "pageLength": 10
    });
</script>
<script>
    var manageAddNewsRoute = "{{ route('manage_add_news') }}";
</script>
<script>
    // $(document).ready(function() {
    //     $('<button><a class="extra-btn width-max-content" href="{{ route('manage_add_news')}}">Add New</a ></button > ').insertBefore("#zero-config_filter label");
    // });
    // $('<button><a class="extra-btn width-max-content" href="' + manageAddNewsRoute + '">Add New </a></button>').insertBefore("#zero-config_filter label");
    $(document).ready(function() {
    $('<button><a class="extra-btn width-max-content" href="' + manageAddNewsRoute + '"> Add New </a></button>').insertBefore("#zero-config_filter label");
});

</script>
<script>
    $(".news_letter_table").on("change", ".active_newsletter", function() {
        let base_url = url_path;
        var status = $(this).prop("checked") == true ? 1 : 0;
        var program_id = $(this).data("id");
        $.ajax({
            type: "GET",
            dataType: "json",
            url: base_url + '/change-article-Status',
            data: {
                status: status,
                program_id: program_id,
            },
            success: function(data) {
                if (status == 1) {
                    toastr.options = {
                        "timeOut": 500
                    }
                    toastr.success("Status Activate successfully. !!");
                } else {
                    toastr.error("Status Deactivate successfully. !!");
                }
            },
        });
    });
</script>
<script>
    $(document).on("click", ".delete_news", function () {
    var delete_id = $(this).data('id');
    $('#delete_news_id').val(delete_id);
});

$(document).on("click", ".delete_news_button", function (e) {
    e.preventDefault();
    let base_url = url_path;
    var delete_id = $('#delete_news_id').val();
    $.ajaxSetup({
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
    });
    $.ajax({
        type: "DELETE",
        url: base_url + "/delete_article/" + delete_id,
        success: function (response) {
            console.log(response);
            toastr.success("Blog Deleted Successfully");
            window.location.href = base_url + "/manage-new-articles";
        }
    });
});
    </script>
@endsection
