@extends('layouts.default')
@section('content')

    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">

        <!--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">

                    <!--begin::Card body-->
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <table class="table align-middle table-row-dashed fs-6 gy-5 users-classs" 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 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="min-w-20px">No.</th>
                                    <th class="min-w-125px">User</th>
                                    {{-- <th class="min-w-125px">Role</th> --}}
                                    <th class="min-w-125px">First Name</th>
                                    <th class="min-w-125px">Last Name</th>
                                    <th class="min-w-125px">Date of birth</th>
                                    <th class="min-w-125px">Hometown</th>
                                    <th class="min-w-125px">Neighborhood</th>
                                    <th class="min-w-125px">Works At</th>
                                    <th class="min-w-125px">Education</th>
                                    <th class="min-w-125px">Journey</th>
                                    <th class="min-w-125px">Location</th>
                                    <th class="min-w-125px">Social Media</th>
                                    <th class="min-w-100px">Actions</th>
                                    <th class="min-w-100px">Status</th>
                                    <th class="text-end min-w-100px">User</th>
                                </tr>
                                <!--end::Table row-->
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                            <tbody class="text-gray-600 fw-bold">
                                <!--begin::Table row-->
                                @foreach ($users as $key => $user)
                                    <tr>
                                        <!--begin::Checkbox-->
                                        {{-- <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>{{ $key + 1 }}</td>
                                        <!--end::Checkbox-->
                                        <!--begin::User=-->
                                        <td class="d-flex align-items-center">
                                            <!--begin:: Avatar -->
                                            <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                                                <a>
                                                    <div class="symbol-label">
                                                        <img class="w-100"
                                                            src="{{ isset($user->profile->user_image) ? asset($user->profile->user_image) : 'asset/media/avatars/blank.png' }}" />
                                                    </div>
                                                </a>
                                            </div>
                                            <!--end::Avatar-->
                                            <!--begin::User details-->
                                            <div class="d-flex flex-column">
                                                <a class="text-gray-800 mb-1">{{ $user->name ?? null }}</a>
                                                <span>{{ $user->email ?? null }}</span>
                                            </div>
                                            <!--begin::User details-->
                                        </td>

                                        <td>{{ $user->profile->first_name ?? null }}</td>
                                        <td>{{ $user->profile->last_name ?? null }}</td>
                                        <td>{{ $user->profile->date_of_birth ?? null }}</td>
                                        <td>{{ $user->profile->hometown ?? null }}</td>
                                        <td>{{ $user->profile->neighborhood ?? null }}</td>
                                        <td>{{ $user->profile->works_at ?? null }}</td>
                                        <td>{{ $user->profile->education ?? null }}</td>
                                        <td>{{ $user->profile->journey ?? null }}</td>
                                        <td>{{ $user->profile->location ?? null }}</td>

                                        <td>
                                            <div class="social-media-container">
                                                @foreach ($user->socialMedia as $item)
                                                    <button class="btn btn-primary btn-sm" type="button">
                                                        <a target="_blank" href="{{ $item->url }}">{{ $item->title }}</a>
                                                    </button>
                                                @endforeach
                                            </div>
                                        </td>

                                        <td>
                                            <!--begin::Menu-->
                                            <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->status ? 'checked' : '' }} />
                                            </label>
                                        </td>
                                        <td class="active-abc">
                                            <div class="badge badge-light-success user-{{ $user->id }}">
                                                {{ $user->status == 1 ? 'Active' : 'Deactive' }}</div>
                                        </td>
                                        <!--end::Action=-->
                                        <td class="text-right"><a href="{{ URL('user-details/' . $user->id) }}"><button
                                                    type="button" class="btn btn-primary btn-sm">View</button></a>
                                        </td>

                                    </tr>
                                    <!--end::Table row-->
                                @endforeach
                                <!--end::Table row-->
                            </tbody>
                            <!--end::Table body-->
                        </table>
                        <!--end::Table-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>


@stop

@section('script')

    <script type="text/javascript">
        $(document).ready(function() {

            $(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: '/changeStatus',
                        data: {
                            'status': status,
                            'user_id': user_id
                        },
                        success: function(data) {
                            if (data.data) {

                                if( data?.data?.status == 1){
                                   window.location.reload();
                                }
                                
                                if( data?.data?.status == 0){
                                    window.location.reload();
                                }
                            }

                        }
                    });
                })
            });
        });
    </script>

@endsection