@extends('dashbord.layouts.master')
@section('toolbar')
    <!--begin::Toolbar container-->
    <div id="kt_app_toolbar_container" class="app-container container-xxl 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-dark fw-bold fs-3 flex-column justify-content-center my-0">
                {{trans('dash_site.newsletters_msg')}}</h1>
            <!--end::Title-->
            <!--begin::Breadcrumb-->
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <!--begin::Item-->
                <li class="breadcrumb-item text-muted">
                    <a href="{{route('admin.dashboard')}}" class="text-muted text-hover-primary">{{trans('dash_site.home')}}</a>
                </li>
                <!--end::Item-->
                <!--begin::Item-->
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-400 w-5px h-2px"></span>
                </li>
                <!--end::Item-->
                <!--begin::Item-->
                <li class="breadcrumb-item text-muted">{{trans('dash_site.site')}}</li>
                <!--end::Item-->
                <!--begin::Item-->
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-400 w-5px h-2px"></span>
                </li>
                <!--end::Item-->
                <!--begin::Item-->
                <li class="breadcrumb-item text-muted">{{trans('dash_site.newsletters')}}</li>
                <!--end::Item-->
            </ul>
            <!--end::Breadcrumb-->
        </div>

    </div>
    <!--end::Toolbar container-->
@endsection

@section('content')



            <div id="kt_app_content_container" class="app-container container-xxxl">
                <!--begin::Category-->
                <div class="card card-flush">
                    <!--begin::Card header-->
                    <div class="card-header align-items-center py-3 gap-2 gap-md-1">
                        <!--begin::Card title-->
                        <div class="card-title">

                        </div>
                        <!--end::Card title-->


                    </div>
                    <div class="card-body pt-0">
                        {{--{{ $dataTable->table() }}--}}
                        <table class="table align-middle table-row-dashed fs-6 gy-3"
                               id="data">
                            <thead>
                            <tr class="fw-semibold fs-6 text-gray-800">
                                <th>{{trans('dash_site.ID')}}</th>
                                <th>{{trans('dash_site.Email')}}</th>
                                <th>{{trans('dash_site.created_at')}}</th>

                            </tr>
                            </thead>
                        </table>

                    </div>
                </div>
            </div>



@endsection
@section('js')

    <script>
        var datatable                   //for the action

        $(document).ready(function () {
            datatable = $('#data').DataTable({
                processing: true,
                serverSide: true,
                dom: 'lfrtip',
                ajax: "{{route('admin.newsletters.index')}}",
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'email', name: 'email'},
                    {data: 'created_at', name: 'created_at'},

                ],
                order: [[0, 'desc']]
            });
            datatable.on('draw', function () {
                KTMenu.createInstances();
            });
        });

        function getDetailes(id) {
            $.ajax({
                type: 'get',
                url: "{{url('admin/contact/show')}}",
                data: {id: id},
                beforeSend: function () {
                    const loadingEl = document.createElement("div");
                    document.getElementById('kt_modal_1').prepend(loadingEl);
                    loadingEl.classList.add("page-loader");
                    loadingEl.classList.add("flex-column");
                    loadingEl.classList.add("bg-dark");
                    loadingEl.classList.add("bg-opacity-25");
                    loadingEl.innerHTML = `
        <span class="spinner-border text-primary" role="status"></span>
        <span class="text-gray-800 fs-6 fw-semibold mt-5">{{trans('forms.Loading')}}</span>`;
                    // Show page loading
                    KTApp.showPageLoading();
                },

                success: function (resb) {
                    KTApp.hidePageLoading();
                    // loadingEl.remove();

                    var one_data = resb.one_data;
                    console.log(one_data);
                    $('#subject_p').html(one_data.subject);
                    $('#name_con').html(one_data.name);
                    $('#email_con').html(one_data.email);
                    $('#phone_con').html(one_data.phone);


                }
            });

        }

    </script>

@endsection