@extends('layouts.frontend')

@section('title', 'Mi cuenta')

@section('content')
    <article id="account">
        <div class="breadcrumb">
            <div class="container d-flex align-items-center">
                <a href="{{ url('/') }}">Inicio</a>
                <span>@yield('title')</span>
            </div>
        </div>
        <section>
            <div class="container">
                @if($errors->any())
                    <div class="alert alert-danger form-group">
                        @foreach($errors->all() as $error)
                            {{ $error }}<br>
                        @endforeach
                    </div>
                @endif
                @if($status)
                    <div class="alert alert-success form-group">
                        {{ $status }}
                    </div>
                @endif
                <div class="row row-grid flex-row-reverse flex-lg-row">
                    <div class="col-lg-3">
                        <aside class="sidebar">
                            <h3>Mi cuenta</h3>
                            <ul class="list-unstyled">
                                <li>
                                    <a href="#tab-1" class="active">Pedidos <sup>{{ $user->orders()->confirmed()->count() }}</sup></a>
                                </li>
                                <li>
                                    <a href="#tab-2">Datos</a>
                                </li>
                                <li>
                                    <a href="{{ route('logout') }}">Cerrar sesión</a>
                                </li>
                            </ul>
                        </aside>
                    </div>
                    <div class="col-lg-9">
                        <div class="tab" id="tab-1" style="display: block;">
                            @if($user->orders()->confirmed()->count())
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>Pedido</th>
                                            <th>Fecha</th>
                                            <th>Estado</th>
                                            <th>Total</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($user->orders()->confirmed()->orderBy('created_at', 'desc')->get() as $order)
                                            <tr>
                                                <td>#{{ $order->id }}</td>
                                                <td>{{ $order->short_date }}</td>
                                                <td>{{ $order->status }}</td>
                                                <td>{{ num_format($order->total) }}</td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <p>Aún no realizaste ningún pedido.</p>
                            @endif

                        </div>
                        <div class="tab" id="tab-2">
                            {!! Form::model($user) !!}
                            <div class="row row-grid">
                                <div class="col-md-6">
                                    <label class="form-label">Nombre</label>
                                    {!! Form::text('user_data[first_name]', null, ['class' => 'form-control', 'required']) !!}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Apellido</label>
                                    {!! Form::text('user_data[last_name]', null, ['class' => 'form-control', 'required']) !!}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Teléfono</label>
                                    {!! Form::text('user_data[phone]', null, ['class' => 'form-control', 'required']) !!}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Email</label>
                                    {!! Form::text('email', null, ['class' => 'form-control', 'required']) !!}
                                </div>
                                <div class="col-12">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Contraseña actual</label>
                                    {!! Form::password('password', ['class' => 'form-control']) !!}
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Nueva contraseña</label>
                                    {!! Form::password('new_password', ['class' => 'form-control']) !!}
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Confirmar nueva contraseña</label>
                                    {!! Form::password('new_password_confirmation', ['class' => 'form-control']) !!}
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn">
                                        <span>Guardar datos</span>
                                        <i class="far fa-arrow-right"></i>
                                    </button>
                                </div>
                            </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </article>
@endsection

@push('scripts')
    <script>
        $(function() {
          $('.sidebar a').on('click', function() {
            var href = $(this).attr('href');
            if(!$(href).is(':visible')) {
              $('.sidebar a').removeClass('active');
              $(this).addClass('active');
              $('.tab').hide();
              $(href).fadeIn();
            }
            return false;
          });
        });
    </script>
@endpush