@extends('layouts.frontend')

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

@section('content')
    <article id="user">
        <section class="content">
            <div class="container">
                @if($status)
                    <div class="alert alert-success">
                        <p>{{ $status }}</p>
                    </div>
                @endif
                <div class="row row-grid">
                    <div class="col-md-3 col-auto">
                        @include('partials.sidebar')
                    </div>
                    <div class="col-md-9 col">
                        <div class="row row-grid">
                            <div class="col-md-4 col-sm-6">
                                <a href="{{ route('product.create') }}">
                                    <div class="product-card">
                                        <i class="fal fa-plus-circle"></i>
                                        <span>Añadir producto</span>
                                    </div>
                                </a>
                            </div>
                            @foreach($products as $product)
                                <div class="col-md-4 col-sm-6">
                                    @include('partials.card', [
                                        'edit' => true
                                    ])
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </article>
@endsection

@section('scripts')
    <script>
      function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.onload = function(e) {
            $('#preview').attr('src', e.target.result);
            $('.dropzone i').hide();
          }
          reader.readAsDataURL(input.files[0]);
        }
      }

      $(function() {
        $('#image').change(function () {
          readURL(this);
        });
      });
    </script>
@endsection