@extends('layouts.app')

@section('content')
    @include('includes.bread_crumb_with_header', [
      'header' => 'Membership',
      'bread_crumbs' => ['Home' => "","Cancelled"=>""],
  ])
    <div class="d-flex flex-column flex-column-fluid mt-10" data-select2-id="select2-data-126-dzc7">
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid" data-select2-id="select2-data-kt_app_content">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container"
                 data-select2-id="select2-data-kt_app_content_container">
                <!--begin::Products-->
                <div class="card card-flush" data-select2-id="select2-data-125-skqc">
                    <!--begin::Header-->

                    <!--end::Header-->
                    <!--begin::Body-->
                    <div class="card-body py-3">
                        <!--begin::Table container-->
                        <div class="table-responsive">
                            <!--begin::Table-->
                            <table id="kt_datatable_column_rendering"
                                   class="table table-striped table-row-bordered gy-5 gs-7">

                                <!--begin::Table head-->
                                <thead>
                                <tr class="text-start fw-semibold  text-gray-400 fs-7 text-uppercase gs-0 ">

                                    <th class="min-w-100px sorting text-start" tabindex="0"
                                        aria-controls="kt_ecommerce_products_table" rowspan="1" colspan="1"
                                        aria-label="Rating: activate to sort column ascending"
                                        style="width: 140.875px;">seller
                                    </th>
                                    <th class="min-w-100px sorting text-center" tabindex="0"
                                        aria-controls="kt_ecommerce_products_table" rowspan="1" colspan="1"
                                        aria-label="Status: activate to sort column ascending"
                                        style="width: 140.875px;">Last Plan
                                    </th>
                                    <th class="min-w-100px sorting text-center" tabindex="0"
                                        aria-controls="kt_ecommerce_products_table" rowspan="1" colspan="1"
                                        aria-label="Status: activate to sort column ascending"
                                        style="width: 140.875px;">
                                        Membership Period
                                    </th>
                                    <th class="min-w-100px sorting text-center" tabindex="0"
                                        aria-controls="kt_ecommerce_products_table" rowspan="1" colspan="1"
                                        aria-label="Status: activate to sort column ascending"
                                        style="width: 140.875px;">
                                        Cancelled Date
                                    </th>
                                    <th class="min-w-150px sorting_disabled text-end" rowspan="1" colspan="1"
                                        aria-label="Actions" style="width:200px;">Action
                                    </th>



                                </tr>
                                </thead>
                                <tbody>
                                @foreach($cancelledPlans as $cancelledPlan)
                                    <tr>
                                        <td class=" pe-0" style="padding-left: 10px;">
                                            <a class="text-gray-600 text-hover-primary fs-5  seller-slider">{{ $cancelledPlan->name }}
                                                <small>({{ $cancelledPlan->email }})</small></a>
                                        </td>
                                        <td class="min-w-100px sorting text-center">
                                            <span class="badge badge-dark">{{ $cancelledPlan->slug }}</span>
                                        </td>
                                        <td class="min-w-100px sorting text-center">
                                            {{ $cancelledPlan->start_date }} - {{ $cancelledPlan->cancelled_date }}
                                            <br/>
                                            <span class="text-success"> @php
                                                    $datetime1 = new DateTime($cancelledPlan->start_date);
                                                    $datetime2 = new DateTime($cancelledPlan->cancelled_date);
                                                    $interval = $datetime1->diff($datetime2);
                                                    echo $interval->format('%R%a days');
                                                @endphp </span>
                                        </td>
                                        <td class="min-w-100px sorting text-center">
                                            {{ $cancelledPlan->cancelled_date }}
                                        </td>

                                        <td class="min-w-100px sorting text-end">

                                            <a href="#" class="btn btn-sm btn-light btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                                <span class="svg-icon svg-icon-5 m-0">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z" fill="currentColor"></path>
                                        </svg>
                                    </span>
                                            </a>
                                            <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-150px py-4" data-kt-menu="true">
                                                <div class="menu-item px-3 dispatch">
                                                    <a class="menu-link px-3 send-mail-btn d-flex gap-5" data-id=" {{ $cancelledPlan->user_id }}">

                                                        <i class="bi bi-envelope"></i>

                                                        Send Mail</a>
                                                </div>

                                            </div>

                                        </td>

                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                            <!--end::Table-->
                        </div>
                        <!--end::Table container-->
                    </div>
                    <!--begin::Body-->
                </div>
                <!--end::Products-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>

@endsection
@push('script')
    <script>
        $(document).on("click", ".send-mail-btn", async function (e) {
            e.preventDefault()
            let UserId = $(this).data('id');
            if (await isConfirmToProcess("info", "", 'Are you sure! You want to Send Mail', 'warning')) {
                try {
                    const url = "{{ url('admin/sellers/memberships/mail/cancelled') }}" + "/" + UserId;
                    let ajaxRequest = new HttpRequest(url, 'get');
                    ajaxRequest.set_data_as_object({
                        '_token': csrfToken
                    });
                    let response = await ajaxRequest.call();
                    toastr.success(response.message);
                } catch (err) {
                    toastr.error(err);
                }
            }
        });
    </script>
@endpush