@extends('layouts.backend')

@section('title', 'Viendo pedido #'.$order->id)

@section('content')
    <!-- Page Header -->
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-sm mb-2 mb-sm-0">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-no-gutter">
                        <li class="breadcrumb-item"><a class="breadcrumb-link" href="javascript:;">eCommerce</a></li>
                        <li class="breadcrumb-item"><a class="breadcrumb-link" href="{{ route('backend.orders.index') }}">Pedidos</a></li>
                        <li class="breadcrumb-item active" aria-current="page">@yield('title')</li>
                    </ol>
                </nav>

                <div class="d-sm-flex align-items-sm-center">
                    <h1 class="page-header-title">Pedido #{{ $order->id }}</h1>
                    <span class="ml-2 ml-sm-3">
                                            @if($order->status_id == 0)
                            <span class="badge badge-soft-danger">
                          <span class="legend-indicator bg-danger"></span>Sin finalizar
                        </span>
                        @elseif($order->status_id == 1)
                            <span class="badge badge-soft-success">
                          <span class="legend-indicator bg-success"></span>Confirmado
                        </span>
                        @elseif($order->status_id == 2)
                            <span class="badge badge-soft-primary">
                          <span class="legend-indicator bg-primary"></span>Procesado
                        </span>
                        @endif

                    </span>
                    <span class="ml-2 ml-sm-3">
                  <i class="tio-date-range"></i> {{ $order->short_date }}
                </span>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Header -->

    {!! Form::model($order, [
        'method' => $order->exists ? 'put' : 'post',
        'route' => $order->exists ? ['backend.orders.update', $order->id] : 'backend.orders.store'
    ]) !!}
    <div class="row">
        <div class="col-lg-8 mb-3 mb-lg-0">
            <!-- Card -->
            <div class="card mb-3 mb-lg-5">
                <!-- Header -->
                <div class="card-header">
                    <h4 class="card-header-title">Detalle del pedido <span class="badge badge-soft-dark rounded-circle ml-1">{{ $order->items->count() }}</span></h4>
                </div>
                <!-- End Header -->

                <!-- Body -->
                <div class="card-body">
                    @foreach($order->items as $item)
                    <!-- Media -->
                    <div class="media">
                        @if($item->options->image)
                        <div class="avatar avatar-xl mr-3">
                            <img class="img-fluid" src="{{ asset($item->options->image) }}" alt="Image Description">
                        </div>
                        @endif

                        <div class="media-body">
                            <div class="row">
                                <div class="col-md-6 mb-3 mb-md-0">
                                    <h5>{{ $item->name }}</h5>
                                </div>

                                <div class="col col-md-2 align-self-center">
                                    <h5>{{ num_format($item->price) }}</h5>
                                </div>

                                <div class="col col-md-2 align-self-center">
                                    <h5>{{ $item->qty }}</h5>
                                </div>

                                <div class="col col-md-2 align-self-center text-right">
                                    <h5>{{ num_format($item->qty * $item->price) }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Media -->

                    <hr>
                    @endforeach
                    <div class="row justify-content-md-end mb-3">
                        <div class="col-md-8 col-lg-7">
                            <dl class="row text-sm-right">
                                <dt class="col-sm-6">Subtotal:</dt>
                                <dd class="col-sm-6">{{ num_format($order->subtotal) }}</dd>
                                <dt class="col-sm-6">Envío:</dt>
                                <dd class="col-sm-6">{{ num_format($order->shipping_price) }}</dd>
                                <dt class="col-sm-6">Total:</dt>
                                <dd class="col-sm-6">{{ num_format($order->total) }}</dd>
                            </dl>
                            <!-- End Row -->
                        </div>
                    </div>
                    <!-- End Row -->
                </div>
                <!-- End Body -->
            </div>
            <!-- End Card -->

            <!-- Card -->
            <div class="card">
                <!-- Header -->
                <div class="card-header">
                    <h4 class="card-header-title">
                        Estado
                        <span class="ml-1">
                                                                        @if($order->status_id == 0)
                                <span class="badge badge-soft-danger">
                          <span class="legend-indicator bg-danger"></span>Sin finalizar
                        </span>
                            @elseif($order->status_id == 1)
                                <span class="badge badge-soft-success">
                          <span class="legend-indicator bg-success"></span>Confirmado
                        </span>
                            @elseif($order->status_id == 2)
                                <span class="badge badge-soft-primary">
                          <span class="legend-indicator bg-primary"></span>Procesado
                        </span>
                            @endif
                        </span>
                    </h4>
                </div>
                <!-- End Header -->

                <!-- Body -->
                <div class="card-body">
                    <!-- Step -->
                    <ul class="step step-icon-xs">

                        <!-- Step Item -->
                        <li class="step-item">
                            <div class="step-content-wrapper">
                                <span class="step-icon step-icon-soft-dark step-icon-pseudo"></span>

                                <div class="step-content">
                                    <h5 class="mb-1">
                                        <a class="text-dark" href="#">Pedido realizado</a>
                                    </h5>

                                    <p class="font-size-sm mb-0">{{ $order->short_date }}</p>
                                </div>
                            </div>
                        </li>
                        <!-- End Step Item -->

                    </ul>
                    <!-- End Step -->
                    <small>Última actualización: {{ $order->short_updated_date }}</small>
                </div>
                <!-- End Body -->
            </div>
            <!-- End Card -->
        </div>

        <div class="col-lg-4">
            @if($order->user)
            <!-- Card -->
            <div class="card">
                <!-- Header -->
                <div class="card-header">
                    <h4 class="card-header-title">Cliente</h4>
                </div>
                <!-- End Header -->

                <!-- Body -->
                <div class="card-body">
                    <a class="media align-items-center" href="{{ route('backend.users.edit', $order->user->id) }}">
                        @if($order->user->user_data->image)
                        <div class="avatar avatar-circle mr-3">
                            <img class="avatar-img" src="{{ asset($order->user->user_data->image) }}" alt="Image Description">
                        </div>
                        @endif
                        <div class="media-body">
                            <span class="text-body text-hover-primary">{{ $order->user->full_name }}</span>
                        </div>
                        <div class="media-body text-right">
                            <i class="tio-chevron-right text-body"></i>
                        </div>
                    </a>

                    <hr>

                    <a class="media align-items-center" href="{{ route('backend.users.edit', $order->user->id) }}">
                        <div class="icon icon-soft-info icon-circle mr-3">
                            <i class="tio-shopping-basket-outlined"></i>
                        </div>
                        <div class="media-body">
                            <span class="text-body text-hover-primary">{{ $order->user->orders()->confirmed()->count() }} pedidos</span>
                        </div>
                        <div class="media-body text-right">
                            <i class="tio-chevron-right text-body"></i>
                        </div>
                    </a>

                    <hr>

                    <div class="d-flex justify-content-between align-items-center">
                        <h5>Datos de contacto</h5>
                    </div>

                    <ul class="list-unstyled list-unstyled-py-2">
                        <li>
                            <i class="tio-online mr-2"></i>
                            {{ $order->email }}
                        </li>
                        <li>
                            <i class="tio-android-phone-vs mr-2"></i>
                            {{ $order->phone }}
                        </li>
                    </ul>
                    <hr>

                    <div class="d-flex justify-content-between align-items-center">
                        <h5>Método de pago</h5>
                    </div>

                    <span class="d-block">
                  {{ $order->payment_method }}
                </span>

                    <hr>

                    <div class="d-flex justify-content-between align-items-center">
                        <h5>Dirección de facturación</h5>
                    </div>

                    <span class="d-block">
                  {{ $order->address }}<br>
                        {{ $order->city }}
                </span>

                    <hr>

                    <div class="d-flex justify-content-between align-items-center">
                        <h5>Método de envío</h5>
                    </div>

                    <span class="d-block">
                        {{ $order->shipping_method }}<br>
                </span>
                    <hr>
                    <div class="d-flex justify-content-between align-items-center">
                        <h5>Dirección de envío</h5>
                    </div>

                    <span class="d-block">
                        @if($order->shipping_data)
                            @foreach($order->shipping_data as $key => $value)
                                {{ $value }}<br>
                            @endforeach
                            @else
                            Misma que dirección de facturación
                        @endif
                        @if($order->feedback)
                            {{ $order->feedback }}
                        @endif
                </span>

                </div>
                <!-- End Body -->
            </div>
            <!-- End Card -->
            @endif
        </div>
    </div>
    <!-- End Row -->
    {!! Form::close() !!}
@endsection

@push('scripts')
    <!-- Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                {!! Form::open([
                    'method' => 'delete'
                ]) !!}
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Eliminar imagen</h5>
                    <button type="button" class="btn btn-xs btn-icon btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                        <i class="tio-clear tio-lg"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <span></span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Cancelar</button>
                    <button class="btn btn-danger" type="submit">Eliminar</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
    <!-- End Modal -->
    <script>
      $(function() {
        $('.modal-toggle-delete').on('click', function() {
          $('#deleteModal form').attr('action', $(this).attr('data-href'));
          $('#deleteModal .modal-body span').text($(this).attr('data-title'));
          $('#deleteModal').modal('show');
          return false;
        });
      });
    </script>
    <script>
      $(function() {
        // INITIALIZATION OF ADD INPUT FILED
        // =======================================================
        $('.js-add-field').each(function () {
          new HSAddField($(this), {
            addedField: function() {
              $('.js-add-field .js-select2-custom-dynamic').each(function () {
                var select2dynamic = $.HSCore.components.HSSelect2.init($(this));
              });
            }
          }).init();
        });


        // INITIALIZATION OF TAGIFY
        // =======================================================
        $('.js-tagify').each(function () {
          var tagify = $.HSCore.components.HSTagify.init($(this), {
            originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
          });
        });


        // INITIALIZATION OF DROPZONE FILE ATTACH MODULE
        // =======================================================
        $('.js-dropzone').each(function () {
          var dropzone = $.HSCore.components.HSDropzone.init('#' + $(this).attr('id'));
        });
      });
    </script>
@endpush
