@extends('layouts.manage')

@section('content') 

@if ($message = Session::get('success'))
<x-alert type="success" message="{{ $message }}" />
@endif

@include('includes.errors') 

<div class="relative flex flex-col xl:flex-row justify-between gap-10">

    <div class="flex flex-col w-full bg-white rounded-3xl shadow-2xl p-14 md:p-10">
        <form method="post" action="{{ $action }}">
            @csrf

            @isset($user) 
                @method('PUT') 
            @endisset 

            @isset($user) 
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">User ID</label>
                <span class="p-1">{{ $user->id ?? '' }}</span>
                <span class="p-2">
                    <div class="tooltip right">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="question-circle" class="svg-inline--fa fa-question-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"></path></svg>
                        <div class="tooltip-msg">
                            <div>User ID cannot be changed.</div>
                        </div>
                    </div>
                </span>
            </div>    
            @endisset 
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Name</label>
                <input class="w-3/4" type="text" name="name" value="{{ $user->name ?? '' }}" placeholder="Enter name" />
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Email Address</label>
                <input class="w-3/4" type="text" name="email" value="{{ $user->email ?? '' }}" placeholder="Enter email address" />
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">User Role</label>
                <div class="dropdown toggle-close inline-block relative w-3/4">
                    <button class="inline-flex w-full text-left" type="button">
                        <span class="h-6 mr-7 whitespace-nowrap overflow-hidden overflow-ellipsis">
                            @isset($user)
                                @php
                                    foreach($user_roles as $user_role)
                                    {
                                        if($user->role === $user_role->code) {
                                            $user->role_name = $user_role->name;
                                        }
                                    }
                                @endphp

                                {{ $user->role_name }}
                            @endisset
                            @empty($user)
                                Select user role
                            @endempty
                        </span>
                        <svg class="w-6 h-4 absolute top-0 right-2 m-3 pl-2 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="16.054" height="12.041" viewBox="0 0 16.054 12.041">
                            <path id="iconmonstr-arrow-80" d="M8.027,15.041,0,3H16.054Z" transform="translate(0 -3)" />
                        </svg>
                    </button>
                    <ul class="dropdown-content absolute w-full my-2 max-h-40 overflow-y-scroll">
                        @foreach ($user_roles as $user_role)
                        <li class="px-1.5 py-1
                        " data-code="{{ $user_role->code }}" data-name="{{ $user_role->name }}">{{ $user_role->name }}</li>
                        @endforeach
                    </ul>
                    <input type="hidden" name="role" value="{{ $user->role ?? '' }}" />
                </div>
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">City</label>
                <input class="w-3/4" type="text" name="city" value="{{ $user->city ?? '' }}" placeholder="Enter city" />
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Country</label>
                <div class="dropdown toggle-close inline-block relative w-3/4">
                    <button class="inline-flex w-full text-left" type="button">
                        <span class="h-6 mr-7 whitespace-nowrap overflow-hidden overflow-ellipsis">
                        @isset($city)
                            @php
                                foreach($countries as $country)
                                {
                                    if($city->country === $country->code) {
                                        $city->country_name = $country->name;
                                    }
                                }
                            @endphp
                            {{ $city->country_name }}
                        @endisset
                        @empty($city)
                            Select Country
                        @endempty
                        </span>
                        <svg class="w-6 h-4 absolute top-0 right-2 m-3 pl-2 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="16.054" height="12.041" viewBox="0 0 16.054 12.041">
                            <path id="iconmonstr-arrow-80" d="M8.027,15.041,0,3H16.054Z" transform="translate(0 -3)" />
                        </svg>
                    </button>
                    <ul class="dropdown-content absolute w-full my-2 max-h-40 overflow-y-scroll">
                        @foreach ($countries as $country)
                        <li class="px-1.5 py-1 
                            @isset($city)
                                @if($city->country === $country->code)
                                selected
                                @endif
                            @endisset
                        " 
                        data-code="{{ $country->code }}" data-name="{{ $country->name }}">{{ $country->name }}</li>
                        @endforeach
                    </ul>
                    <input type="hidden" name="country" value="{{ $user->country ?? '' }}" />
                </div>
            </div>

            @isset($user) 
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Friend Code</label>
                <span class="p-1">{{ $user->friend_code ?? '' }}</span>
                <span class="p-2">
                    <div class="tooltip right">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="question-circle" class="svg-inline--fa fa-question-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"></path></svg>
                        <div class="tooltip-msg">
                            <div>Friend Code ID cannot be changed.</div>
                        </div>
                    </div>
                </span>
            </div>

            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Departure Time</label>
                <span class="p-1">{{ Carbon\Carbon::parse($user->departure_time)->format('H:i:s') }}</span>
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Return Time</label>
                <span class="p-1">{{ Carbon\Carbon::parse($user->return_time)->format('H:i:s') }}</span>
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Commute Method</label>
                <span class="p-1">{{ $user->commute_methods ?? '' }}</span>
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Work Days</label>
                <span class="p-1">{{ $user->work_days ?? '' }}</span>
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Off Days</label>
                <span class="p-1">{{ $user->off_days ?? '' }}</span>
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Created Date</label>
                <span class="p-1">{{ $user->created_at ?? '' }}</span>
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Updated Date</label>
                <span class="p-1">{{ $user->updated_at ?? '' }}</span>
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Login Type</label>
                <span class="p-1">{{ $user->login_type ?? '' }}</span>
            </div>
            @endisset 

            @empty($user)
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Password</label>
                <input class="w-3/4" type="text" name="password" value="" placeholder="Enter password" />
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-1/4">Re-type Password</label>
                <input class="w-3/4" type="text" name="verify_password" value="" placeholder="Enter password again" />
            </div>
            @endif

            <div class="flex flex-col 2xl:flex-row 2xl:flex-initial text-right items-center py-3">
                <input class="btn" type="submit" value="Save" />
            </div>

        </form>
    </div>

    @isset($user) 
    <div class="flex flex-col w-full bg-white rounded-3xl shadow-2xl p-14 md:p-10">
        <!-- users places -->
        <h1 class="text-3xl 2xl:text-4xl font-semibold leading-3 text-center p-2">Places</h1>
        <hr class="w-24 mx-auto h2-line pb-5 mb-5">
        <table class="table-auto border">
            <thead>
                <tr>
                    <th class="border">Place Name</th>
                    <th class="border">Place Address</th>
                    <th class="border">City</th>
                    <th class="border">Country</th>
                    <th class="border">&nbsp;</th>
                </tr>
            </thead>
            <tbody>
            @foreach ($places as $key => $place) 
                <tr {{ $loop->even ? 'class=even' : '' }}>
                    <td class="border text-center">{{ $place->place_name }}</td>
                    <td class="border text-center">{{ $place->place_address }}</td>
                    <td class="border text-center">{{ $place->city }}</td>
                    <td class="border text-center">{{ $place->country }}</td>
                    <td class="border text-center">
                        <a href="{{ route('user.deletePlace', [$user->id, $place->id]) }}">
                            <svg class="inline" width="20" height="20" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"></path></svg>
                        </a>
                    </td>
                </tr>
            @endforeach
            @if ($places->isEmpty())
                <tr>
                    <td colspan="7" class="text-center">No data available</td>
                </tr> 
            @endif
            </tbody>
        </table>
        <!-- users places - end -->
    </div>
    @endif

</div>

@isset($user) 
<div class="relative flex flex-col xl:flex-row justify-between gap-10 mt-10">
    <div class="flex flex-col w-full bg-white rounded-3xl shadow-2xl p-14 md:p-10">
        <!-- users achievements -->
        <form method="post" action="{{ $action_achievements }}">
            @csrf

            @isset($user) 
                @method('PUT') 
            @endisset 

            <h1 class="text-3xl 2xl:text-4xl font-semibold leading-3 text-center p-2">Achievements</h1>
            <hr class="w-24 mx-auto h2-line pb-5 mb-5">
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-2/5">Last Trip Date</label>
                <input class="w-3/5" type="text" name="last_trip_date" value="{{ $achievements->last_trip_date ?? '' }}" />
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-2/5">Total Work Days</label>
                <input class="w-3/5" type="text" name="total_work_days" value="{{ $achievements->total_work_days ?? 0 }}"  />
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-2/5">Total Badges</label>
                <input class="w-3/5" type="text" name="total_badges" value="{{ $achievements->total_badges ?? 0 }}" />
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-2/5">Total Carbon 0 Weekender</label>
                <input class="w-3/5" type="text" name="total_carbon0_weekender" value="{{ $achievements->total_carbon0_weekender ?? 0 }}" />
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-2/5">Total Days at Carbon 0</label>
                <input class="w-3/5" type="text" name="total_days_at_carbon0" value="{{ $achievements->total_days_at_carbon0 ?? 0 }}" />
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-2/5">Total Days at Carbon 0 Streak</label>
                <input class="w-3/5" type="text" name="total_days_at_carbon0_streak" value="{{ $achievements->total_days_at_carbon0_streak ?? 0 }}" />
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-2/5">Total Score</label>
                <input class="w-3/5" type="text" name="total_score" value="{{ $achievements->total_score ?? 0 }}" />
            </div>
            <div class="flex flex-row py-3">
                <label class="font-medium p-1 w-2/5">Total Work Weeks at Carbon 0</label>
                <input class="w-3/5" type="text" name="total_work_weeks_at_carbon0" value="{{ $achievements->total_work_weeks_at_carbon0 ?? 0 }}" />
            </div>

            <div class="flex flex-col 2xl:flex-row 2xl:flex-initial text-right items-center py-3">
                <input class="btn" type="submit" value="Save" />
            </div>
        </form>
        <!-- users achievements - end -->
    </div>
    <div class="flex flex-col w-full bg-white rounded-3xl shadow-2xl p-14 md:p-10">
        <!-- users rewards -->
        <h1 class="text-3xl 2xl:text-4xl font-semibold leading-3 text-center p-2">Rewards</h1>
        <hr class="w-24 mx-auto h2-line pb-5 mb-5">
        <table class="table-auto border">
            <thead>
                <tr>
                    <th class="border">Rewards</th>
                    <th class="border">Unlock Date</th>
                    <th class="border">&nbsp;</th>
                </tr>
            </thead>
            <tbody>
            @foreach ($rewards as $key => $reward) 
                <tr {{ $loop->even ? 'class=even' : '' }}>
                    <td class="border text-center">{{ $reward->achievement->achievement_preset_name }}</td>
                    <td class="border text-center">{{ $reward->unlocked_date }}</td>
                    <td class="border text-center">
                        <a href="{{ route('reward.delete', [$reward->reward_id, $user->id]) }}">
                            <svg class="inline" width="20" height="20" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"></path></svg>
                        </a>
                    </td>
                </tr>
            @endforeach
            @if ($rewards->isEmpty())
                <tr>
                    <td colspan="7" class="text-center">No data available</td>
                </tr> 
            @endif
            </tbody>
        </table>
        <!-- users rewards - end -->
    </div>
</div>

<div class="relative flex flex-col xl:flex-row justify-between gap-10 mt-10">
    <div class="flex flex-col w-full bg-white rounded-3xl shadow-2xl p-14 md:p-10">
        <!-- users Devices -->
        <h1 class="text-3xl 2xl:text-4xl font-semibold leading-3 text-center p-2">Devices</h1>
        <hr class="w-24 mx-auto h2-line pb-5 mb-5">
        <table class="table-auto border">
            <thead>
                <tr>
                    <th class="border">Devices</th>
                    <th class="border">Type</th>
                    <th class="border">&nbsp;</th>
                </tr>
            </thead>
            <tbody>
            @foreach ($devices as $key => $device) 
                <tr {{ $loop->even ? 'class=even' : '' }}>
                    <td class="border text-center">{{ $device->device_id }}</td>
                    <td class="border text-center">{{ $device->device_type }}</td>
                    <td class="border text-center">
                        <a href="{{ route('user.deleteDevice', [$user->id, $device->device_id]) }}">
                            <svg class="inline" width="20" height="20" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"></path></svg>
                        </a>
                    </td>
                </tr>
            @endforeach
            @if ($devices->isEmpty())
                <tr>
                    <td colspan="7" class="text-center">No data available</td>
                </tr> 
            @endif
            </tbody>
        </table>
        <!-- users devices - end -->
    </div>
    <div class="flex flex-col w-full bg-white rounded-3xl shadow-2xl p-14 md:p-10">
        <!-- users friends -->
        <h1 class="text-3xl 2xl:text-4xl font-semibold leading-3 text-center p-2">Friends</h1>
        <hr class="w-24 mx-auto h2-line pb-5 mb-5">
        <table class="table-auto border">
            <thead>
                <tr>
                    <th class="border">Name</th>
                    <th class="border">&nbsp;</th>
                </tr>
            </thead>
            <tbody>
            @foreach ($friends as $key => $friend) 
                <tr {{ $loop->even ? 'class=even' : '' }}>
                    <td class="border text-center">{{ $friend->user->name ?? '(User ' . $friend->friend_id .')' }}</td>
                    <td class="border text-center">
                        <a href="{{ route('user.deleteFriend', [$user->id, $friend->id]) }}">
                            <svg class="inline" width="20" height="20" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"></path></svg>
                        </a>
                    </td>
                </tr>
            @endforeach
            @if ($friends->isEmpty())
                <tr>
                    <td colspan="7" class="text-center">No data available</td>
                </tr> 
            @endif
            </tbody>
            </tbody>
        </table>
        <!-- users friends - end -->
    </div>
</div>
@endif

@stop