@extends('layouts.panel')

@section('content')
    <div class="card h-100">
        <div class="card-header d-flex d-md-none border-bottom">
        </div>
        <div class="card-body tab-content">
            <div class="tab-pane fade active show" role="tabpanel">
                <h3 class="fw-black">{{trans("Profile")}}</h3>
                <p class="small text-secondary mb-4"></p>
                <form action="{{route('profile')}}" method="POST" enctype="multipart/form-data" id="profileUpdate">
                    @csrf
                    <div class="d-flex flex-column flex-lg-row gap-4">
                        <div class="order-0 d-flex flex-column align-items-center gap-2 px-2">
                            <label class="form-label text-center">{{trans('Photo')}}</label>
                            <img src="{{auth()->user()->image_url}}" alt="User" width="150" class="rounded-circle" loading="lazy">
                            <button class="btn btn-sm btn-light" type="button" onclick="window.user_image.click()">{{trans('Change')}}</button>
                            <input type="file" name="image" id="user_image" hidden="hidden" accept=".jpg,.png,.jpeg" onchange="window.change_image.click()" />
                            <input type="submit" value="image" name="update" hidden="hidden" id="change_image"/>
                        </div>
                        <div class="px-2">
                            <div class="order-1">
                                <div class="mb-4">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label" for="name">{{trans('First Name')}}</label>
                                            <input type="text" class="form-control" id="name" placeholder="{{trans('First Name')}}" value="{{$user->name}}" readonly>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label" for="last_name">{{trans('Last Name')}}</label>
                                            <input type="text" class="form-control" id="last_name" placeholder="{{trans('Last Name')}}" value="{{$user->last_name}}" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label class="form-label" for="email">{{trans('Email')}}</label>
                                    <input class="form-control" id="email" name="email" placeholder="{{trans('Email')}}" value="{{$user->email}}" />
                                </div>
                                <button type="submit" class="btn btn-primary">{{trans('Update')}}</button>
                            </div>
                            <div class="order-2 mt-4">
                                <div class="mb-2">
                                    <label class="form-label" for="current_password">{{trans('Current Password')}}</label>
                                    <input type="text" class="form-control" id="current_password" name="current_password" placeholder="{{trans('Current Password')}}">
                                    @error('current_password')
                                    <div class="text-danger small">{{$message}}</div>
                                    @enderror
                                </div>
                                <div class="mb-2">
                                    <label class="form-label" for="new_password">{{trans('New Password')}}</label>
                                    <input type="text" class="form-control" id="new_password" name="password" placeholder="{{trans('New Password')}}">
                                    @error('password')
                                    <div class="text-danger small">{{$message}}</div>
                                    @enderror
                                </div>
                                <div class="mb-4">
                                    <label class="form-label" for="confirm_password">{{trans('Confirm Password')}}</label>
                                    <input type="text" class="form-control" id="confirm_password" name="password_confirmation" placeholder="{{trans('Confirm Password')}}">
                                </div>
                                <button type="submit" class="btn btn-primary" name="update" value="password">{{trans('Update')}}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection