@extends('layouts.app', [
    'title' => __('Perfil |'),
    'navClass' => 'bg-default',
    'parentSection' => 'laravel',
    'elementName' => 'profile'
])

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

@section('title', 'Meu Perfil |')

@section('css')
<link href="{{asset('ijaboCropTool-master/ijaboCropTool.min.css')}}" rel="stylesheet" />
@endsection

@section('content')
    @include('forms.header', [
        'title' => __('Olá') . ', '. auth()->user()->name.'!',
        'description' => __('Essa é a página do seu perfil onde você pode editar suas configurações do TravelTogether e ver os principais indicadores do seu trabalho.'),
        'class' => 'col-lg-7'
    ])

    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col-xl-4 order-xl-2">
                <div class="card card-profile">
                    {{-- <img src="{{ asset('argon') }}/img/theme/maldivas-01.png" height="20%" alt="Image placeholder" class="card-img-top"> --}}
                    <div class="row justify-content-center">
                        <div class="col-lg-3 order-lg-2">
                            <div class="card-profile-image">
                                <a href="#" class="">
                                    <img
                                    @if (empty(Auth::user()->picture))
                                    src="{{asset('img/profiles/noimg.png')}}"
                                    @else
                                    src="{{ asset('profile_user/'.Auth::user()->picture)}}"
                                    @endif
                                    width="400px"
                                    class="rounded-circle"
                                    alt="Sua imagem"
                                    />
                                </a>
                            </div>
                        </div>
                    </div><br><br><br>
                    <div class="card-header text-center">
                        <div class="d-flex justify-content-center">
                            <div class="custom-file">
                                <label class="custom-file-label" for="input-picture">Selecione Sua Foto</label>
                                <input type="file" name="photo" class="custom-file-input{{ $errors->has('photo') ? ' is-invalid' : '' }}" id="input-picture" accept="image/*">
                            </div>
                        </div>
                    </div>
                    {{-- <div class="card-body pt-0">
                        <div class="row">
                            <div class="col">
                                <div class="card-profile-stats d-flex justify-content-center">
                                    <div>
                                        <span class="heading">22</span>
                                        <span class="description">Tarefas Concluídas</span>
                                    </div>
                                    <div>
                                        <span class="heading">10</span>
                                        <span class="description">Cotações Realizadas</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                </div>
                <!-- Progress track -->
                <div class="card">
                    <!-- Card header -->
                    <div class="card-header">
                        <!-- Title -->
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">Tarefas Realizadas</h3>
                            </div>
                                <div class="col-4 text-right">
                                    <a href="{{ route('tasks.index') }}" class="btn btn-sm btn-primary">Ver Detalhes</a>
                                </div>
                        </div>
                    </div>
                    <!-- Card body -->
                    <div class="card-body">
                        <!-- List group -->
                        <ul class="list-group list-group-flush list my--3">
                            <li class="list-group-item px-0">
                                @foreach ($tasks->where('user_id', '=', Auth::user()->id) as $task)
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h5>{{ $task->title }} | <strong>Prazo:</strong> {{ date('d/m/y', strtotime($task->due_date)) }} | <strong>Concluído em:</strong> {{ date('d/m/y', strtotime($task->done_date)) }}</h5>
                                        <div class="progress progress-xs mb-0">
                                            <div class="progress-bar bg-orange" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                                        </div>
                                    </div>
                                </div><br><br>
                                @endforeach
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-xl-8 order-xl-1">
                {{-- <div class="row">
                    <div class="col-lg-6">
                        <div class="card bg-gradient-info border-0">
                            <!-- Card body -->
                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="card-title text-uppercase text-muted mb-0 text-white">Valor Total em Vendas</h5>
                                        <span class="h2 font-weight-bold mb-0 text-white">R$ 350,897</span>
                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-white text-dark rounded-circle shadow">
                                            <i class="ni ni-active-40"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card bg-gradient-danger border-0">
                            <!-- Card body -->
                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="card-title text-uppercase text-muted mb-0 text-white">Taxa de Conversão de Cotação</h5>
                                        <span class="h2 font-weight-bold mb-0 text-white">23,65%</span>
                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-white text-dark rounded-circle shadow">
                                            <i class="ni ni-spaceship"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}
                <div class="card">
                    <div class="card-header" id="profile">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">Editar Perfil</h3>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="GET" action="{{ route('profile.update') }}" autocomplete="off"
                            enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <h6 class="heading-small text-muted mb-4">Informações do Usuário</h6>

                            @include('alerts.success')
                            @include('alerts.error_self_update', ['key' => 'not_allow_profile'])

                            <div class="pl-lg-4">
                                <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
                                    <label class="form-control-label" for="input-name">Nome</label>
                                    <input type="text" name="name" id="input-name" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="{{ __('Name') }}" value="{{ old('name', auth()->user()->name) }}" required autofocus>

                                    @include('alerts.feedback', ['field' => 'name'])
                                </div>
                                <div class="{{ $errors->has('email') ? ' has-danger' : '' }}">
                                    <label class="form-control-label" for="input-email">E-mail</label>
                                    <input type="email" name="email" id="input-email" readonly class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" placeholder="{{ __('Email') }}" value="{{ old('email', auth()->user()->email) }}" required >
                                    @include('alerts.feedback', ['field' => 'email'])
                                </div>
                                <div class="text-center" style="float: right;">
                                    <button type="submit" class="btn btn-success btn-md mt-4">Salvar</button>
                                </div>
                            </div><br><br><br>
                        </form>
                        <hr class="my-4" />
                        <form method="post" action="{{ route('profile.password') }}" autocomplete="off">
                            @csrf
                            @method('put')

                            <h6 class="heading-small text-muted mb-4">Senha</h6>

                            @include('alerts.success', ['key' => 'password_status'])
                            @include('alerts.error_self_update', ['key' => 'not_allow_password'])

                            <div class="pl-lg-4">
                                <div class="form-group{{ $errors->has('old_password') ? ' has-danger' : '' }}">
                                    <label class="form-control-label" for="input-current-password">Senha Atual</label>
                                    <input type="password" name="old_password" id="input-current-password" class="form-control{{ $errors->has('old_password') ? ' is-invalid' : '' }}" placeholder="Senha Atual" value="" required>

                                    @include('alerts.feedback', ['field' => 'old_password'])
                                </div>
                                <div class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
                                    <label class="form-control-label" for="input-password">Nova Senha</label>
                                    <input type="password" name="password" id="input-password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" placeholder="Nova Senha" value="" required>

                                    @include('alerts.feedback', ['field' => 'password'])
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label" for="input-password-confirmation">Confirmação de Nova Senha</label>
                                    <input type="password" name="password_confirmation" id="input-password-confirmation" class="form-control" placeholder="Confirmação de Nova Senha" value="" required>
                                </div>

                                <div class="text-center" style="float: right;">
                                    <button type="submit" class="btn btn-success btn-md mt-4">Trocar Senha</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        @include('layouts.footers.auth')
    </div>
@section('scripts')
<!-- Crop Picture -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{ asset('ijaboCropTool-master/ijaboCropTool.min.js') }}"></script>
<script>
    $('#input-picture').ijaboCropTool({
       preview : '.image-previewer',
       setRatio:1,
       allowedExtensions: ['jpg','jpeg','png'],
       buttonsText:['Cortar','Fechar'],
       buttonsColor:['#30bf7d','#ee5155'],
       processUrl:'{{ route("picture.save") }}',
       withCSRF:['_token','{{ csrf_token() }}'],
       onSuccess:function(message, element, status){
          alert(message);
       },
       onError:function(message, element, status){
         alert(message);
       }
    });
</script>
@endsection
@endsection