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

<style>
    .survey-responses .list-group-wrap {
        padding-left: 0;
    }

    .gy-3 {
        gap: 20px 0;
    }

    .g-4 {
        gap: 30px;
    }

    .theme-list {
        padding-left: 1rem;
    }

    .new-list {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0px;
    }

    .new-list li {
        width: 50%;
    }

    .user-img img {
        width: 100px;
        height: 100px;
        border-radius: 200px;
    }

    .box-card {
        box-shadow: 0px 0px 4px 0px #dddd;
        border-radius: 8px;
        padding: 25px;
    }

    .question-list {
        gap: 15px;
    }

    .question-list li {
        border: 1px solid #dedede !important;
    }

    .view-more-btn {
        padding: 12px 25px;
        background: #77a07f;
        color: #fff;
        border-radius: 8px;
        max-width: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .view-more-btn:hover {
        color: #fff !important;
    }

    .prev-data {
        background: #d8dbd89e;
    }

    .current-data {
        background: #d0edd6;
    }

    .horizontally-list {
        display: flex;
        gap: 50px;
        margin-bottom: 0px;
    }

    .img-gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .img-gallery img {
        border-radius: 8px !important;
        width: 80px;
        height: 80px;
    }
</style>

<div class="wrapper">
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="player-title"><strong>User Details</strong></h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('users') }}">Home</a></li>
                            <li class="breadcrumb-item active"><a href="">Details</a></li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <section class="content">
            <div class="card">
                <div class="card-body">
                    <div class="row gy-3 box-card mb-4">
                        <div class="user-img col-md-6">
                            @if ($user->profileImage)
                                <div class="current-data py-1 px-3 rounded mb-2">
                                    <img src="{{ asset($user->profileImage) }}" alt="{{ ucfirst($user->name ?? 'User') }}"
                                        class="img-fluid" width="100" height="100">
                                </div>
                            @else
                                <div class="current-data py-1 px-3 rounded mb-2">
                                    <img src="{{ asset('images/profiles/1720763921.jpg') }}" alt="User" class="img-fluid"
                                        width="100" height="100">
                                </div>
                            @endif
                        </div>

                        <div class="col-md-6">
                            <div class="prev-data py-1 px-3 rounded">
                                <p class="mb-2">Before</p>
                                <div class="img-gallery">
                                    @php
                                        $imagesExist = false;
                                    @endphp
                                    @foreach ($userAuditDetails as $auditDetail)
                                                                    @if ($auditDetail['field_name'] == 'profileImage' && !empty($auditDetail['previous_value']))
                                                                                                    @php
                                                                                                        $imagesExist = true;
                                                                                                    @endphp
                                                                                                    <img src="{{ asset($auditDetail['previous_value']) }}" alt="User" class="img-fluid"
                                                                                                        width="100" height="100">
                                                                    @endif
                                    @endforeach

                                    @if (!$imagesExist)
                                        <p class="text-muted">No changes made</p>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <h5 class="mb-2"><strong>Name:</strong></h5>
                            <p class="mb-0 current-data py-1 px-3 rounded">{{ ucfirst($user->name ?? 'N/A') }}</p>
                            @foreach ($userAuditDetails as $auditDetail)
                                @if ($auditDetail['field_name'] == 'name')
                                    <div class="prev-data py-1 px-3 mt-2 rounded">
                                        Before: {{ $auditDetail['previous_value'] ?? 'N/A' }} (Changed on:
                                        {{ \Carbon\Carbon::parse($auditDetail['created_at'])->setTimezone($user->timezone ?? 'UTC')->format('d M Y H:i') }}
                                        )
                                    </div>
                                @endif
                            @endforeach

                        </div>
                        <div class="col-md-6">
                            <h5 class="mb-2"><strong>Email:</strong></h5>
                            <p class="mb-0 current-data py-1 px-3 rounded">{{ $user->email ?? 'N/A' }}</p>
                            @foreach ($userAuditDetails as $auditDetail)
                                @if ($auditDetail['field_name'] == 'email')
                                    <div class="prev-data py-1 px-3 mt-2 rounded">
                                        Before: {{ $auditDetail['previous_value'] ?? 'N/A' }} (Changed on:
                                        {{ \Carbon\Carbon::parse($auditDetail['created_at'])->setTimezone($user->timezone ?? 'UTC')->format('d M Y H:i') }}
                                        )
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        <div class="col-md-6">
                            <h5><strong>Phone Number:</strong></h5>
                            <p>
                                {{ $user->country_code ? $user->country_code : 'N/A' }}{{ $user->phone ? $user->phone : '' }}
                            </p>
                        </div>
                        <div class="col-md-6">
                            <h5 class="mb-2"><strong>Status:</strong></h5>
                            <p>
                                @if ($user->status === 0)
                                    Inactive
                                @elseif ($user->status === 1)
                                    Active
                                @elseif ($user->status === 2)
                                    Deactive
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <h5><strong>Gender:</strong></h5>
                            <p class="mb-0 current-data py-1 px-3 rounded">
                                {{ $user->sex ? $user->sex : 'N/A' }}
                            </p>
                            @foreach ($userAuditDetails as $auditDetail)
                                @if ($auditDetail['field_name'] == 'sex')
                                    <div class="prev-data py-1 px-3 mt-2 rounded">
                                        Before: {{ $auditDetail['previous_value'] ?? 'N/A' }} (Changed on:
                                        {{ \Carbon\Carbon::parse($auditDetail['created_at'])->setTimezone($user->timezone ?? 'UTC')->format('d M Y H:i') }}
                                        )
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        <div class="col-md-6">
                            <h5 class="mb-2"><strong>Daily Limit:</strong></h5>
                            <p class="mb-0 current-data py-1 px-3 rounded">{{ $user->surveyLimit->limit ?? 'N/A' }}</p>
                            @foreach ($userAuditDetails as $auditDetail)
                                @if ($auditDetail['field_name'] == 'survey limit')
                                    <div class="prev-data py-1 px-3 mt-2 rounded">
                                        Before: {{ $auditDetail['previous_value'] ?? 'N/A' }} (Changed on:
                                        {{ \Carbon\Carbon::parse($auditDetail['created_at'])->setTimezone($user->timezone ?? 'UTC')->format('d M Y H:i') }}
                                        )
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>

                    <div class="row box-card mb-4">
                        <div class="col-md-12">
                            <h5 class="mb-2"><strong>Location:</strong></h5>
                            <p class="mb-0 current-data py-1 px-3 rounded">{{ $user->location ?? 'N/A' }}</p>
                            @foreach ($userAuditDetails as $auditDetail)
                                @if ($auditDetail['field_name'] == 'location')
                                    <div class="prev-data py-1 px-3 mt-2 rounded">
                                        Before: {{ $auditDetail['previous_value'] ?? 'N/A' }} (Changed on:
                                        {{ \Carbon\Carbon::parse($auditDetail['created_at'])->setTimezone($user->timezone ?? 'UTC')->format('d M Y H:i') }}
                                        )
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>

                    <div class="row box-card mb-4">
                        <div class="col-md-6">
                            <h5 class="mb-2"><strong>Nationality:</strong></h5>
                            <p class="mb-0 current-data py-1 px-3 rounded">{{ ucfirst($user->nationality ?? 'N/A') }}
                            </p>
                            @foreach ($userAuditDetails as $auditDetail)
                                @if ($auditDetail['field_name'] == 'nationality')
                                    <div class="prev-data py-1 px-3 mt-2 rounded">
                                        Before: {{ $auditDetail['previous_value'] ?? 'N/A' }} (Changed on:
                                        {{ \Carbon\Carbon::parse($auditDetail['created_at'])->setTimezone($user->timezone ?? 'UTC')->format('d M Y H:i') }}
                                        )
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        <div class="col-md-6">
                            <h5 class="mb-2"><strong>Timezone:</strong></h5>
                            <p class="mb-0 current-data py-1 px-3 rounded">{{ $user->timezone ?? 'N/A' }}</p>
                            @foreach ($userAuditDetails as $auditDetail)
                                @if ($auditDetail['field_name'] == 'timezone')
                                    <div class="prev-data py-1 px-3 mt-2 rounded">
                                        Before: {{ $auditDetail['previous_value'] ?? 'N/A' }} (Changed on:
                                        {{ \Carbon\Carbon::parse($auditDetail['created_at'])->setTimezone($user->timezone ?? 'UTC')->format('d M Y H:i') }}
                                        )
                                    </div>
                                @endif
                            @endforeach
                        </div>

                    </div>
                    <div class="row box-card mb-4">

                        <div class="col-md-6">
                            <h5 class="mb-2"><strong>Document:</strong></h5>

                            <p class="mb-0 current-data py-1 px-3 rounded">{{ $user->document_type ?? 'N/A' }}</p>
                            @foreach ($userAuditDetails as $auditDetail)
                                @if ($auditDetail['field_name'] == 'document_type')
                                    <div class="prev-data py-1 px-3 mt-2 rounded">
                                        Before: {{ $auditDetail['previous_value'] ?? 'N/A' }} (Changed on:
                                        {{ \Carbon\Carbon::parse($auditDetail['created_at'])->setTimezone($user->timezone ?? 'UTC')->format('d M Y H:i') }}
                                        )
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        
                        <div class="col-md-6">
                            
                            <div class="current-data py-1 px-3 rounded mb-2">
                                @if ($user->document)
                                    <img src="{{ asset($user->document) }}" alt="User" class="img-fluid" width="100"
                                        height="100">
                                @else
                                    <p>No document uploaded</p>
                                @endif

                            </div>
                            @php
                                $hasDocument = false;
                            @endphp

                            @foreach ($userAuditDetails as $auditDetail)
                                                    @if ($auditDetail['field_name'] == 'document' && !empty($auditDetail['previous_value']))
                                                                            @php
                                                                                $hasDocument = true;
                                                                            @endphp
                                                    @endif
                            @endforeach

                            @if ($hasDocument)
                                <div class="prev-data py-1 px-3 rounded mb-2">
                                    <p class="mb-2">Before</p>
                                    <div class="img-gallery">
                                        @foreach ($userAuditDetails as $auditDetail)
                                            @if ($auditDetail['field_name'] == 'document' && !empty($auditDetail['previous_value']))
                                                <img src="{{ asset($auditDetail['previous_value']) }}" alt="User" class="img-fluid"
                                                    width="100" height="100">
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                        </div>
                    </div>

                    <div class="row box-card mb-4">
                        <div class="col-md-12">
                            <h5 class="mb-2"><strong>User Added Locations</strong></h5>
                            <div class="current-data py-1 px-3 rounded">
                                @if (!empty($locations))
                                    <ul class="theme-list horizontally-list">
                                        @foreach ($locations as $location)
                                            <li>{{ ucfirst($location) }}</li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p>No locations added</p>
                                @endif
                            </div>
                            @if (!empty($auditLocations))
                                <div class="prev-data py-1 px-3 mt-2 rounded">
                                    <p class="mb-2">Before</p>
                                    <ul class="theme-list horizontally-list">
                                        @foreach ($auditLocations as $auditLocation)
                                            <li>
                                                {{ ucfirst($auditLocation['location']) }}
                                                @if(isset($auditLocation['status']) && $auditLocation['status'] === 'deleted')
                                                    <span class="badge badge-danger">Deleted</span>
                                                @endif
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="row box-card mb-4">
                        <div class="col-md-6">
                            <h5 class="mb-2"><strong>Interests</strong></h5>
                            <div class="current-data py-1 px-3 rounded mb-2">
                                @if (!empty($interests))
                                    <ul class="theme-list new-list">
                                        @foreach ($interests as $interest)
                                            <li>{{ $interest }}</li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p>No interests available</p>
                                @endif
                            </div>
                            <!-- Previous Interests -->
                            @if (!empty($auditInterests))
                            @php
                                $hasPreviousInterests = false;
                            @endphp
                            <div class="prev-data py-1 px-3 mt-2 rounded">
                                <p class="mb-2">Before</p>
                                <ul class="theme-list new-list">
                                    @foreach ($auditInterests as $interest)
                                        @if (!empty($interest->interest->title))
                                            @php
                                                $hasPreviousInterests = true;
                                            @endphp
                                            <li>{{ $interest->interest->title }}
                                                @if (isset($interest->status) && $interest->status == "removed")
                                                    <span class="badge badge-danger">Deleted</span>
                                                @endif
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>

                                <!-- No changes message -->
                                @if (!$hasPreviousInterests)
                                    <p class="text-muted">No changes made</p>
                                @endif
                            </div>
                            @else
                                <p class="text-muted mt-2">No changes made</p>
                            @endif
                        </div>

                        <div class="col-md-6">
                            <h5 class="mb-2"><strong>Sub Interests</strong></h5>
                            <div class="current-data py-1 px-3 rounded mb-2">
                                @if (!empty($subInterests))
                                    <ul class="theme-list new-list">
                                        @foreach ($subInterests as $subInterest)
                                            <li>{{ $subInterest }}</li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p>No sub interests available</p>
                                @endif
                            </div>
                            @if(!empty($auditSubInterests))
                                <div class="prev-data py-1 px-3 mt-2 rounded">
                                    <p class="mb-2">Before</p>
                                    <ul class="theme-list new-list">
                                        @foreach ($auditSubInterests as $subInterest)
                                            <li>{{ @$subInterest->subInterest->title }}
                                                @if(isset($subInterest->status) && $subInterest->status == "removed")
                                                    <span class="badge badge-danger">Deleted</span>
                                                @endif
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="row box-card mb-4">
                        <div class="col-md-6">
                            <h5 class="mb-2"><strong>Date of Birth:</strong></h5>
                            <p class="mb-0 current-data py-1 px-3 rounded" style="font-size: 16px; color: #555;">
                                <span>
                                    {{ isset($user->age) && !empty($user->age)
    ? \Carbon\Carbon::createFromFormat('d/m/Y', $user->age)->format('j M Y')
    : 'N/A' }}
                                </span>
                            </p>
                            @foreach($userAuditDetails as $auditDetail)
                                                @if ($auditDetail['field_name'] == 'age')
                                                                    <div class="prev-data py-1 px-3 mt-2 rounded">
                                                                        Before: {{ isset($auditDetail['previous_value']) && !empty($auditDetail['previous_value'])
                                                    ? \Carbon\Carbon::createFromFormat('d/m/Y', $auditDetail['previous_value'])->format('j M Y')
                                                    : 'N/A' }} (Changed on:
                                                                        {{ \Carbon\Carbon::parse($auditDetail['created_at'])->setTimezone($user->timezone ?? 'UTC')->format('d M Y H:i') }}
                                                                        )
                                                                    </div>
                                                @endif
                            @endforeach
                        </div>
                        
                    </div>
                    <div class="row box-card mb-4">
                        <div class="col-md-8">
                            <h5 class="mb-2"><strong>Total Reward Points:</strong> {{$totalRewardPoints}}</h5>
                            <p style="font-size: 16px; color: #555;">
                                @if ($rewardPoints->isEmpty())
                                    No reward points available.
                                @else
                                    <ul class="theme-list new-list">
                                        @foreach ($rewardPoints as $reward)
                                            <li>
                                                <strong> {{ $reward->points }} </strong> points <span>earned for
                                                    <strong>{{ $reward->type }}</strong></span>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                            </p>
                        </div>
                    </div>

                    <!-- Survey Response Section -->
                    <div class="survey-responses mt-5">
                        <h3 class="mb-4"><strong>User Response on Surveys</strong></h3>
                        <div class="row box-card">
                            @if (!empty($surveyResponses) && is_array($surveyResponses))
                                @php    $count = 0; @endphp
                                @foreach ($surveyResponses as $surveyName => $questions)
                                    @if ($count < 5)
                                        <div class="col-md-12 survey-item">
                                            <div>
                                                <h5><strong>Survey {{ $count + 1 }}: </strong>{{ ucfirst($surveyName) }}</h5>
                                            </div>
                                            <div>
                                                <ul class="mb-4 list-group-wrap d-flex flex-column question-list">
                                                    @foreach ($questions as $response)
                                                        <li class="list-group-item">
                                                            <strong>Based on:</strong> {{ $surveyType ?? 'N/A' }} <br>
                                                            <strong>Question:</strong> {{ $response['question'] }} <br>
                                                            <strong>Answer:</strong> {{ ucfirst($response['answer']) }}
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                        @php            $count++; @endphp
                                    @endif
                                @endforeach

                                @if (count($surveyResponses) > 5)
                                    <a href="#" class="view-more-btn" id="viewMoreBtn">View more</a>
                                @endif

                                <div class="col-md-12" id="moreSurveys" style="display: none;">
                                    @php    $index = 0; @endphp
                                    @foreach ($surveyResponses as $surveyName => $questions)
                                        @if ($index >= 5)
                                            <div class="survey-item">
                                                <div>
                                                    <h5><strong>Survey {{ $index + 1 }}: </strong>{{ ucfirst($surveyName) }}</h5>
                                                </div>
                                                <div>
                                                    <ul class="mb-4 list-group-wrap d-flex flex-column question-list">
                                                        @foreach ($questions as $response)
                                                            <li class="list-group-item">
                                                                <strong>Question:</strong> {{ $response['question'] }} <br>
                                                                <strong>Answer:</strong> {{ ucfirst($response['answer']) }}
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        @endif
                                        @php        $index++; @endphp
                                    @endforeach
                                </div>
                            @else
                                <p>No survey responses available.</p>
                            @endif
                        </div>

                        <script>
                            document.getElementById('viewMoreBtn').addEventListener('click', function (event) {
                                event.preventDefault();
                                document.getElementById('moreSurveys').style.display = 'block';
                                this.style.display = 'none'; // Hide the view more button
                            });
                        </script>
                    </div>
                    <!-- End Survey Response Section -->
                </div>
            </div>
        </section>
    </div>
</div>
@endsection