@extends('layouts/main')
@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/profile.css') }}">
@endpush
@include('components/profile-menu')

<div class="main-wrapper">
    <div class="container-fluid mt-4">
        @include('components/user-nav')
    </div>
    <div class="container-fluid mt-4">
        <div class="row background-white m-1 p-4">
            @if ($form == 'password')
            <form action="{{ route('user.change_password', ['user'=>$target_user]) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-4">
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3 input-group">
                            <label for="current_password">Current password</label>
                            <input type="password" name="current_password">
                        </div>
                        <div class="mb-3 input-group">
                            <label for="new_password">New password</label>
                            <input type="password" name="new_password">
                        </div>
                        <div class="mb-3 input-group">
                            <label for="new_password_2">Repeat new password</label>
                            <input type="password" name="new_password_2">
                        </div>
                      
                    </div>
                    <div class="col-md-4">
                    </div>
                    <div class="d-flex justify-content-center">
                        <button class="btn btn-main btn-dashboard" type="submit">Update Password</button>
                    </div>
                </div>
                @method('PUT')

            </form>
            @else
            <form action="{{ route('user.update', ['user'=>$target_user]) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-4">
                        <div class="img-container">
                            @if (isset($target_user->photo))
                                <img src="{{ $target_user->photo }}" alt="user picture">
                            @endif
                        </div>
                        <div class="mb-3 input-group">
                            <label for="photo">Picture</label>
                            <input type="file" name="photo" id="photo">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3 input-group">
                            <label for="name">Fullname</label>
                            <input type="text" name="name" value="@if(isset($target_user->name)){{$target_user->name}}@else{{''}}@endif">
                        </div>
                        <div class="mb-3 input-group">
                            <label for="email">Email</label>
                            <input type="email" name="email" value="@if(isset($target_user->email)){{$target_user->email}}@else{{''}}@endif">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3 input-group">
                            <label for="phone_number">Phone Number</label>
                            <input type="text" name="phone_number" value="@if(isset($target_user->phone_number)){{$target_user->phone_number}}@else{{''}}@endif" required>
                        </div>
                        <div class="mb-3 input-group">
                            <label for="birthday">Birthday</label>
                            <input type="date" name="birthday" value="@if(isset($target_user->birthday)){{$target_user->birthday}}@else{{''}}@endif">
                        </div>
                    </div>
                    <div class="d-flex justify-content-center">
                        <button class="btn btn-main btn-dashboard" type="submit">Update</button>
                    </div>
                </div>
                @method('PUT')

            </form>
            @endif

        </div>
    </div>
    <div class="container-fluid mt-4">
        <div class="row">
            <h3>Vehicles</h3>
            @if($target_user->vehicles->count() > 0)
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead class="table-dark">
                            <th>Name</th>
                            <th>Model</th>
                            <th>Color</th>
                            <th>Plate</th>
                            <th>Vin</th>
                        </thead>
                        <tbody>
                            @foreach ($target_user->vehicles as $vehicle)
                                <tr>
                                    <td>{{$vehicle->name}}</td>
                                    <td>{{$vehicle->model->model}}</td>
                                    <td>{{$vehicle->color}}</td>
                                    <td>{{$vehicle->plate}}</td>
                                    <td>{{$vehicle->vin}}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                There isn't any vehicle attached to this user
            @endif
        </div>
        <hr>
        <div class="row">
            <h3>Address</h3>
            @if($target_user->address->count() > 0)
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead class="table-dark">
                            <th>Street</th>
                            <th>Building/Apartment</th>
                            <th>City</th>
                            <th>State</th>
                            <th>Zip code</th>
                            <th>Category</th>
                        </thead>
                        <tbody>
                            @foreach ($target_user->address as $address)
                                <tr>
                                    <td>{{$address->street}}</td>
                                    <td>{{$address->building}}</td>
                                    <td>{{$address->city}}</td>
                                    <td>{{$address->state}}</td>
                                    <td>{{$address->zip}}</td>
                                    <td>{{$address->category}}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                    There isn't any address attached to this user
            @endif
        </div>
        </div>
    </div>
</div>

@error('success')
    @section('alert')
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {!! $message !!}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endsection
@enderror

@error('errors')
    @section('alert')
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {!! $message !!}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endsection
@enderror