@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'View User')
@section('content')

    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-semibold">User Details</h1>
        <a href="{{ route('admin.users.index') }}" class="btn btn-primary">
            <i class="fas fa-arrow-left mr-2"></i> Back to Users
        </a>
    </div>

    <div class="card">
        <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-8 lg:divide-x divide-border border-b border-border pb-10">

            {{-- Left Section --}}
            <div class="col-span-2">
                <div class="mb-10">
                    <h5 class="text-lg font-medium mb-4">Basic Information</h5>

                    <div class="mb-4">
                        <label class="font-medium mb-3">Name:</label>
                        <p>{{ $user->name }}</p>
                    </div>

                    <div class="mb-4">
                        <label class="font-medium">Email:</label>
                        <p>{{ $user->email }}</p>
                    </div>

                    <div class="mb-4">
                        <label class="font-medium">Username:</label>
                        <p>{{ $user->username }}</p>
                    </div>

                    <div class="mb-4">
                        <label class="font-medium">Phone:</label>
                        <p>{{ $user->getMeta('phone') ?? 'N/A' }}</p>
                    </div>

                    <div class="mb-4">
                        <label class="font-medium">Bio:</label>
                        <div class="prose">{!! $user->getMeta('bio') ?? 'No bio available' !!}</div>
                    </div>
                </div>

                <div>
                    <h5 class="text-lg font-medium mb-4">Social Links</h5>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @php
                            $socials = [
                                'Facebook' => $user->getMeta('facebook_link'),
                                'X' => $user->getMeta('x_link'),
                                'LinkedIn' => $user->getMeta('linkedin_link'),
                                'Instagram' => $user->getMeta('instagram_link'),
                                'YouTube' => $user->getMeta('youtube_link'),
                                'Pinterest' => $user->getMeta('pinterest_link'),
                            ];
                        @endphp

                        @foreach ($socials as $name => $link)
                            <div>
                                <label class="font-medium">{{ $name }}:</label>
                                @if ($link)
                                    <p><a href="{{ $link }}" target="_blank"
                                            class="text-blue-600 underline">{{ $link }}</a></p>
                                @else
                                    <p class="text-gray-500">Not provided</p>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- Right Section --}}
            <div class="flex flex-col col-span-full lg:col-span-1 lg:pl-8">
                <div class="mb-10">
                    <h3 class="mb-2">User Options</h3>

                    <div class="mb-4">
                        <label class="block text-sm font-medium mb-2">Roles:</label>
                        <div class="flex flex-wrap gap-2">
                            @foreach ($roles as $role)
                                @if ($user->hasRole($role->name))
                                    <span class="px-3 py-1 bg-blue-100 text-blue-700 text-sm rounded">
                                        {{ ucfirst($role->name) }}
                                    </span>
                                @endif
                            @endforeach
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-medium mb-2">Profile Image:</label>
                        @if ($user->getFirstMediaUrl('avatar'))
                            <img src="{{ $user->getFirstMediaUrl('avatar') }}" alt="Profile Image"
                                class="w-20 h-20 object-cover rounded-full">
                        @else
                            <p class="text-gray-500">No image uploaded</p>
                        @endif
                    </div>


                    <div class="mb-4">
                        <label class="block text-sm font-medium mb-2">Cover Image:</label>
                        @if ($user->getFirstMediaUrl('cover_photo'))
                            <img src="{{ $user->getFirstMediaUrl('cover_photo') }}" alt="Cover Image"
                                class="w-20 h-20 object-cover rounded-full">
                        @else
                            <p class="text-gray-500">No cover image uploaded</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-5 flex gap-4">
            <a href="{{ route('admin.change.status', ['status_type' => 'approved', 'user_id' => $user->id]) }}" class="btn btn-primary approved_author">Approved
                Author</a>
            <a href="{{ route('admin.change.status', ['status_type' => 'rejected', 'user_id' => $user->id]) }}"
                class="btn btn-primary btn-black rejected_author">Reject Author</a>
        </div>

    </div>

@endsection

@push('scripts')
    <script>
        // approved_author functionality
        $(document).on('click', '.approved_author', function(e) {

            e.preventDefault();

            Swal.fire({
                title: "Are you sure to approve?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, approve it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    var route = $(this).attr('href');
                    $.ajax({
                        url: route,
                        type: 'GET',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message);
                                window.location = '{{ route('admin.users.index') }}';
                            } else {
                                toastr.error(response.message);
                            }
                        },
                        error: function() {
                            toastr.error("Server error.");
                        }
                    });
                }
            });
        });

        // rejected_author functionality
        $(document).on('click', '.rejected_author', function(e) {

            e.preventDefault();

            Swal.fire({
                title: "Are you sure to reject?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, reject it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    var route = $(this).attr('href');
                    $.ajax({
                        url: route,
                        type: 'GET',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message);
                                 window.location = '{{ route('admin.users.index') }}';
                            } else {
                                toastr.error(response.message);
                            }
                        },
                        error: function() {
                            toastr.error("Server error.");
                        }
                    });
                }
            });
        });

    </script>
@endpush