@extends('layouts.app')
@section('page-pretitle', __('Management'))
@section('page-title', __('User Details'))

@section('content')
<div class="container">
    <div class="card shadow-sm p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3 class="h3 text-primary">
                <i class="ti ti-user"></i> {{ $user->name }}
            </h3>
            <a href="{{ url()->previous() }}" class="btn btn-outline-secondary">
                {{ __('Back') }}
            </a>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="mb-4">
                    <h4 class="text-muted">
                        <i class="ti ti-mail"></i> {{ __('Email') }}
                    </h4>
                    <h3 class="text-dark">{{ $user->email }}</h3>
                </div>
            </div>

            <div class="col-md-6">
                <div class="mb-4">
                    <h4 class="text-muted">
                        <i class="ti ti-briefcase"></i> {{ __('Role') }}
                    </h4>
                    <h3 class="text-dark">{{ \Illuminate\Support\Str::ucfirst($user->role ?? __('N/A')) }}</h3>
                </div>
            </div>

            {{-- <div class="col-md-6">
                <div class="mb-4">
                    <h4 class="text-muted">
                        <i class="ti ti-user-pin"></i> {{ __('Position') }}
                    </h4>
                    <h3 class="text-dark">{{ \Illuminate\Support\Str::ucfirst($user->position ?? __('N/A')) }}</h3>
                </div>
            </div> --}}
        </div>

        <!-- Assigned Projects Section -->
        <div class="mt-4">
            <h4 class="text-muted mb-3">
                <i class="ti ti-folder"></i> {{ __('Assigned Projects') }}
            </h4>

            @if ($user->projects->isEmpty())
                <p class="text-secondary">{{ __('No Projects Assigned') }}</p>
            @else
                <div class="row g-3">
                    @foreach($user->projects->values() as $index => $project)
                    <div class="col-md-6">
                            <div 
                                class="card shadow-sm p-3 h-100 cursor-pointer" 
                                data-bs-toggle="modal" 
                                data-bs-target="#projectModal{{ $project->id }}"
                                style="cursor: pointer;">
                                <div class="position-relative m-1">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h4 class="text-primary mb-0">
                                            <i class="ti ti-info-circle"></i> {{ ($user->projects->currentPage() - 1) * $user->projects->perPage() + $index + 1 }}
                                            . {{ $project->ref_no }}
                                        </h4>
                                        <span class="badge badge-outline text-blue ms-3">
                                            {{ $project->scope->name ?? __('N/A') }}
                                        </span>
                                    </div>

                                    <ul class="list-unstyled mb-0">
                                        <li class="mb-3" style="min-height: 120px;">
                                            <h4 class="mb-2">
                                                <i class="ti ti-file-description"></i> {{ __('Project Description') }}
                                            </h4>
                                            <p class="text-dark">{{ $project->description }}</p>
                                        </li>
                                        <li class="mb-3">
                                            <h4 class="mb-2">
                                                <i class="ti ti-user"></i> {{ __('Client') }}
                                            </h4>
                                            <p class="text-dark">{{ $project->client }}</p>      
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Modal for each project -->
                        <div class="modal fade" id="projectModal{{ $project->id }}" tabindex="-1" aria-labelledby="projectModalLabel{{ $project->id }}" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header bg-dark text-white">
                                        <h5 class="modal-title" id="projectModalLabel{{ $project->id }}">{{ __('Project Details') }}</h5>
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="d-flex justify-content-between align-items-center mb-0">
                                            <h3 class="h3 text-primary">
                                                <i class="ti ti-info-circle"></i> {{ $project->ref_no }}
                                            </h3>
                                            <span class="badge badge-outline text-blue ms-3">
                                                {{ $project->scope->name ?? __('N/A') }}
                                            </span>
                                        </div>

                                        <h4 class="mb-2">
                                            <i class="ti ti-file-description"></i> {{ __('Project Description') }}
                                        </h4>
                                        <p class="text-dark">{{ $project->description }}</p>
                                        <hr>
                                        <div class="row mb-4">
                                            <div class="col-md-12">
                                                <h4 class="mb-2">
                                                    <i class="ti ti-user"></i> {{ __('Client') }}
                                                </h4>
                                                <p class="text-dark">{{ $project->client }}</p>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <h4 class="mb-2">
                                                        <i class="ti ti-calendar-event"></i> {{ __('Start Date') }}
                                                    </h4>
                                                    <p>{{ $project->start_date ? $project->start_date->format('d-m-Y') : __('Not Yet Started') }}</p>
                                                </div>
                                                <div class="col-md-6">
                                                    <h4 class="mb-2">
                                                        <i class="ti ti-calendar-check"></i> {{ __('End Date') }}
                                                    </h4>
                                                    <p>{{ $project->end_date ? $project->end_date->format('d-m-Y') : __('-') }}</p>
                                                </div>
                                            </div>                                            
                                        </div>
                                        @if($project->remarks)
                                            <hr>
                                            <p><strong>{{ __('Remarks:') }}</strong> {{ $project->remarks }}</p>
                                        @endif
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('Close') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    @endforeach
                    <!-- Pagination for projects -->
                    <div class="mt-3 d-flex justify-content-center">
                        {{ $user->projects->links('pagination::bootstrap-5') }} 
                    </div>
                </div>
            @endif
        </div>

    </div>
</div>
@endsection