@extends('Admin.layout.master')
@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Toolbar-->
        <div class="toolbar" id="kt_toolbar">
            <!--begin::Container-->
            <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
                <!--begin::Page title-->
                <div data-kt-swapper="true" data-kt-swapper-mode="prepend"
                    data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
                    class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
                    <!--begin::Title-->
                    <h1 class="d-flex text-dark fw-bolder fs-3 align-items-center my-1">Users List</h1>
                    <!--end::Title-->
                    <!--begin::Separator-->
                    <span class="h-20px border-gray-300 border-start mx-4"></span>
                    <!--end::Separator-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-300 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">Users</li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-300 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-dark">Users List</li>
                        <!--end::Item-->
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Post-->
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-xxl">
                <!--begin::Card-->
                <div class="card">
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
                            <!--begin::Table head-->
                            <thead>
                                <!--begin::Table row-->
                                <tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
                                    <th>id</th>
                                    <th class="min-w-125px">User</th>
                                    <th class="min-w-125px">Email</th>
                                    <th class="min-w-75px">Status</th>
                                    <th class="min-w-100px">Profile Type</th>
                                    <th class="min-w-150px">Subscription Expiry</th>
                                    <th class="min-w-150px">Joined Date</th>
                                    <th class="min-w-150px">Subscription Status</th>
                                    <th class="min-w-100px">Update Status</th>
                                </tr>
                                <!--end::Table row-->
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                            <tbody class="text-gray-600 fw-bold">

                                @foreach ($users as $user)
                                    <!--begin::Table row-->
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <!--begin::User=-->
                                        <td class="d-flex align-items-center">
                                            <!--begin:: Avatar -->
                                            <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                                                <a href="{{ route('user', $user->id) }}">
                                                    <div class="symbol-label">
                                                        <img src="{{ asset(isset($user->userImage->path) ? $user->userImage->path : 'assets/media/avatars/300-1.jpg') }}"
                                                            alt="Emma Smith" class="w-100" />
                                                    </div>
                                                </a>
                                            </div>
                                            <!--end::Avatar-->
                                            <!--begin::User details-->
                                            <div class="d-flex flex-column">
                                                <a href="{{ route('user', $user->id) }}"
                                                    class="text-gray-800 text-hover-primary mb-1">{{ $user->name }}</a>
                                                <span>{{ $user->username }}</span>
                                            </div>
                                            <!--begin::User details-->
                                        </td>
                                        <!--end::User=-->
                                        <td>{{ $user->email }}</td>
                                        <!--begin::Role=-->
                                        <td>
                                            @if ($user->status == 'active')
                                                <div class="badge badge-light-success fw-bolder">
                                                    {{ ucfirst(trans($user->status)) }}</div>
                                            @elseif ($user->status == 'in-active')
                                                <div class="badge badge-light-primary fw-bolder">
                                                    {{ ucfirst(trans($user->status)) }}</div>
                                            @else
                                                <div class="badge badge-light-danger fw-bolder">
                                                    {{ ucfirst(trans($user->status)) }}</div>
                                            @endif
                                        </td>
                                        <td>
                                            @if (isset($user->sub_expiry_date))
                                                <div class="badge badge-light fw-bolder">Premium</div>
                                            @else
                                                <div class="badge badge-light fw-bolder">Basic</div>
                                            @endif
                                        </td>
                                        <!--end::Last login=-->
                                        <!--end::Role=-->
                                        <td class="text-center">
                                            {{ isset($user->sub_expiry_date) ? $user->sub_expiry_date : '-' }}</td>
                                        <!--begin::Last login=-->
                                        <!--begin::Joined-->
                                        <td>{{ $user->created_at }}</td>
                                        <td>
                                            <label
                                                class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack ">
                                                <input type="checkbox" data-id="{{ $user->id }}"
                                                    class="form-check-input toggle-class"
                                                    {{ $user->is_full_access ? 'checked' : '' }} />
                                            </label>
                                        </td>
                                        {{-- <td>
                                            <input type="hidden" value="{{ $user->id }}" class="user_id" />
                                            <select class="form-control subscriptionType" name="subcription_sub_type">
                                                <option value="unsubscribe"
                                                    {{ $user->currentSubscription && $user->currentSubscription->subscription->subcription_sub_type == null ? 'selected' : '' }}>
                                                    Unsubscribe</option>
                                                <option value="month"
                                                    {{ $user->currentSubscription && $user->currentSubscription->subscription->subcription_sub_type == 'month' ? 'selected' : '' }}>
                                                    Month</option>
                                                <option value="year"
                                                    {{ $user->currentSubscription && $user->currentSubscription->subscription->subcription_sub_type == 'year' ? 'selected' : '' }}>
                                                    Year</option>
                                            </select>
                                        </td> --}}
                                        <!--begin::Joined-->
                                        <!--begin::Action=-->
                                        <td>
                                            <select data-id="{{ $user->id }}" class="form-control user_status"
                                                name="status">
                                                <option value="active" {{ $user->status == 'active' ? 'selected' : '' }}>
                                                    Active</option>
                                                <option
                                                    value="in-active"{{ $user->status == 'in-active' ? 'selected' : '' }}>
                                                    In-Active</option>
                                                <option value="banned" {{ $user->status == 'banned' ? 'selected' : '' }}>
                                                    Banned</option>
                                            </select>
                                        </td>
                                        <!--end::Action=-->
                                    </tr>
                                    <!--end::Table row-->
                                @endforeach
                            </tbody>
                            <!--end::Table body-->
                        </table>
                        <!--end::Table-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>
    <!--end::Content-->
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('.user_status').change(function() {
                var status = this.value;
                var user_id = $(this).data('id');

                var data = {
                    status: status,
                    user_id: user_id
                }

                Swal.fire({
                    title: 'Are you sure?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes'
                }).then((result) => {
                    if (result.isConfirmed) {
                        console.log(data);
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': "{{ csrf_token() }}",
                            },
                            type: "POST",
                            url: "{{ route('user.change.status') }}",
                            data: data,
                            cache: false,
                            success: function(data) {

                                Swal.fire(
                                    'Modified!',
                                    'Status changed successfully!',
                                    'success'
                                )
                            },

                            error: function(e) {

                                var parseData = JSON.parse(e.responseText);
                                let message = parseData.data;

                                if (parseData.message) {
                                    Swal.fire(
                                        'Incorrect...',
                                        parseData.message,
                                        'error'
                                    );
                                }
                            }
                        });
                    }
                })
            });

            $(document).on("change", '.subscriptionType', function() {
                var user_id = $(this).siblings('.user_id').val();
                var status = $(this).val() !== 'unsubscribe' ? 'subscribe' : 'unsubscribe';
                var subcription_sub_type = $(this).val();

                var data = {
                    status: status,
                    user_id: user_id,
                    subcription_sub_type: subcription_sub_type
                };

                Swal.fire({
                    title: 'Are you sure?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: "GET",
                            url: "{{ route('subscriptionToggleUser') }}",
                            data: data,
                            cache: false,
                            success: function(data) {
                                Swal.fire(
                                    'Modified!',
                                    'Subscription changed successfully!',
                                    'success'
                                );
                            },
                            error: function(e) {
                                var parseData = JSON.parse(e.responseText);
                                let message = parseData.data;

                                if (parseData.message) {
                                    Swal.fire(
                                        'Incorrect...',
                                        parseData.message,
                                        'error'
                                    );
                                }
                            }
                        });
                    }
                });
            });

            $(function() {
                $('.toggle-class').change(function() {
                    var status = $(this).prop('checked') == true ? 1 : 0;
                    var user_id = $(this).data('id');

                    $.ajax({
                        type: "GET",
                        dataType: "json",
                        url: '/is-full-access',
                        data: {
                            'status': status,
                            'user_id': user_id
                        },
                        success: function(data) {
                           console.log(data.data);
                        }
                    });
                })
            });
        });
    </script>
@endsection