@php use Carbon\Carbon; @endphp
@extends('adminlte::page')

@section('title', 'IPRS | User Details')

@section('content_header')
    <div class="col-9 mx-auto">
        <div class="row mb-2">
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-left">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('user.index') }}">Users</a></li>
                    <li class="breadcrumb-item active">{{ ucfirst($user->name) }}</li>
                </ol>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-sm-12">
                <h1 class="m-0">{{ ucfirst($user->name) }}</h1>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="col-9 mx-auto">
        <div class="card card-widget widget-user shadow mb-4">
            <div class="widget-user-header" style="background-color: #356eac; color: white;">
                <h3 class="widget-user-username">{{ ucfirst($user->name) }}</h3>
                <h5 class="widget-user-desc">{{ ucfirst($user->contract->client->name_fl) ?? '-' }}</h5>
           </div>
            <div class="widget-user-image">
                <img class="img-circle elevation-2" src="{{ asset('images/photo.webp') }}" alt="{{ $user->contract->client->name_fl ?? '' }}">
            </div>

            <div class="card-footer">
                <div class="row">
                    <div class="col-sm-4 border-right border-bottom">
                        <div class="description-block">
                            <span class="description-text">Role(s)</span>
                            <h5 class="description-header">
                                @foreach($roles as $role)
                                    <div class="badge bg-primary text-wrap">
                                        {{ $role }}
                                    </div>
                                @endforeach
                            </h5>
                        </div>
                    </div>

                    <div class="col-sm-4 border-right border-bottom">
                        <div class="description-block">
                            <span class="description-text">Date Created</span>
                            <h5 class="description-header">{{ Carbon::parse($user->contract->date_created)->format("d-m-Y H:i") ?? '-' }}</h5>
                        </div>

                    </div>

                    <div class="col-sm-4 border-bottom">
                        <div class="description-block">
                            <span class="description-text">Created By</span>
                            <h5 class="description-header">{{ $user->contract->client->created_by ?? '-' }}</h5>
                        </div>

                    </div>

                </div>

                <div class="row">
                    <div class="col-sm-6 border-right">
                        <div class="description-block">
                            <span class="description-text">Email Address</span>
                            <h5 class="description-header">{{ $user->email }}</h5>
                        </div>

                    </div>

                    <div class="col-sm-6">
                        <div class="description-block">
                            <span class="description-text">Status</span>
                            <h5 class="description-header">{{ $user->status_l }}</h5>
                        </div>

                    </div>

                </div>
            </div>
        </div>

    </div>

@stop

@section('css')
    <!-- <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/styles.css') }}"> -->
    <style>
        fieldset {
            background-color: white;
            padding-block-start: 0.35em;
            padding-inline-start: 1.25em;
            padding-inline-end: 1.25em;
            padding-block-end: 0.625em;
            margin: 0 0 1em 0;
            border: 1px groove rgb(192, 192, 192);
            border-radius: 5px;
        }

        legend {
            background-color: #356eac;
            color: white;
            width: auto;
            font-size: medium;
            padding: 5px 10px;
            border-radius: 5px;
        }

        .row{
            margin-bottom: 20px;
        }

    </style>
@stop

@section('js')
    <script> console.log("This is the User Details Page"); </script>
@stop

