@inject('composerManufacturers', 'App\Composers\ComposerManufacturer')

@extends('layouts.app')

@push('script')
    <script src="{{asset('assets/modules/home/index.js')}}"></script>
@endpush

@section('page-header')
<div class="breadcrumb-line">
    <ul class="breadcrumb">
      <li class="active">
        <a href="{{route('home')}}">
          <i class="icon-home2 position-left"></i> Home </a>
      </li>
    </ul>
  </div>
  <div class="page-header-content">
    <div class="page-title">
      <h4>
        <i class="icon-arrow-left52 position-left"></i>
        <span class="text-semibold">Home</span>
      </h4>
    </div>
  </div>
@endsection

@section('content')
<div class="panel panel-flat">
    <div class="panel-heading">
        <h5 class="panel-title">Pesquisar peças <a class="heading-elements-toggle"> <i class="icon-more"></i></a></h5>
    </div>
    <div class="panel-body">
        <form action="{{ url()->current() }}" method="get" class="main-search">
            @csrf
            <div class="input-group content-group">
                <div class="has-feedback has-feedback-left">
                    <input type="text" class="form-control input-xlg" id="term" name="term" placeholder="Número de série ou nome da peça" value="{{request()->get('term')}}">
                    <div class="form-control-feedback">
                        <i class="icon-search4 text-muted text-size-base"></i>
                    </div>
                </div>
                <div class="input-group-btn">
                    <button type="submit" class="btn btn-primary btn-xlg">Buscar</button>
                </div>
            </div>
            <div class="row search-option-buttons">
                <div class="col-sm-2">
                    <div class="form-group ">
                        <select name="manufacturer_id" class="form-control">
                            <option value="">Todas as montadoras</option>
                            @foreach ($composerManufacturers->getManufacturers() as $key => $item)
                            <option value="{{$key}}" {{request()->has('manufacturer_id') && ($key == request()->manufacturer_id) ? 'selected' : null}}>{{$item}}</option>
                            @endforeach
                        </select>
                      </div>
                </div>

            </div>
        </form>
    </div>
</div>

  <hr>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-body">
            <ul class="media-list search-results-list content-group">
                @if (isset($collection) && $collection->isNotEmpty())
                    @foreach ($collection as $key => $item)
                    <li class="media stack-media-on-mobile">
                        <div class="media-body">
                            <h6 class="media-heading">
                                <a href="#">{{$item->name}} | {{$item->part_number}}</a>
                            </h6>
                            <ul class="list-inline list-inline-separate text-muted">
                                <li>
                                    <i class="icon-wrench3 position-left"></i> {{$item->manufacturer->name}}
                                </li>
                                <li>{{$item->standard->name}}</li>
                            </ul>
                            <div class="tabbable">
                                <ul class="nav nav-tabs nav-tabs-highlight">
                                    <li class="active">
                                        <a href="#919-tab{{$key}}1" data-toggle="tab" aria-expanded="true">
                                            <i class="icon-puzzle2 position-left"></i> Peças equivalentes <span class="badge badge-default position-right">{{$item->equivalentParts->count()}}</span>
                                        </a>
                                    </li>
                                    <li class="">
                                        <a href="#919-tab{{$key}}2" data-toggle="tab" aria-expanded="false">
                                            <i class="icon-images3 position-left"></i> Caminhões <span class="badge badge-default position-right">{{$item->truckParts->count()}}</span>
                                        </a>
                                    </li>
                                    <li class="">
                                        <a href="#919-tab{{$key}}3" data-toggle="tab" aria-expanded="false">
                                            <i class="icon-images3 position-left"></i> Fotos <span class="badge badge-default position-right">{{$item->photos->count()}}</span>
                                        </a>
                                    </li>
                                    @if ($item->description)
                                    <li class="">
                                        <a href="#919-tab{{$key}}4" data-toggle="tab" aria-expanded="false">
                                            <i class="icon-images3 position-left"></i> Descrição
                                        </a>
                                    </li>
                                    @endif
                                    @if ($item->observation)
                                    <li class="">
                                        <a href="#919-tab{{$key}}5" data-toggle="tab" aria-expanded="false">
                                            <i class="icon-images3 position-left"></i> Observações
                                        </a>
                                    </li>
                                    @endif
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane has-padding active" id="919-tab{{$key}}1">

                                        @if (empty($item->equivalentParts->count()))
                                        <table class="table">
                                            <tbody>
                                                <tr class="table-danger">
                                                    <td class="text-center">Nenhuma peça equivalente encontrada</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        @else
                                        <div class="table-responsive">
                                            <table class="table table-xs">
                                                <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>Nome</th>
                                                        <th>PN</th>
                                                        <th>Montadora</th>
                                                        <th>Norma</th>
                                                        <th>Ações</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($item->equivalentParts as $part)
                                                    <tr>
                                                        <td>{{$part->id}}</td>
                                                        <td>{{$part->name}}</td>
                                                        <td>{{$part->part_number}}</td>
                                                        <td>{{$part->manufacturer->name}}</td>
                                                        <td>{{$part->standard->name}}</td>
                                                        <td>
                                                            <a type="button" data-toggle="modal" data-target="#modal-gallery" data-id="{{$part->id}}" data-name="{{$part->name}}" class="btn border-slate text-slate-800"><i class="icon-images3 position-left"></i> Galeria</a>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                        @endif

                                    </div>
                                    <div class="tab-pane has-padding" id="919-tab{{$key}}2">
                                        @if (empty($item->truckParts->count()))
                                        <table class="table">
                                            <tbody>
                                                <tr class="table-danger">
                                                    <td class="text-center">Nenhum caminhão encontrado</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        @else
                                        <div class="table-responsive">
                                            <table class="table table-xs">
                                                <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>Nome</th>
                                                        <th>Montadora</th>
                                                        <th>Categoria</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($item->truckParts as $truck)
                                                    <tr>
                                                        <td>{{$truck->id}}</td>
                                                        <td>{{$truck->name}}</td>
                                                        <td>{{$truck->manufacturer->name}}</td>
                                                        <td>{{$truck->category ->name}}</td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                        @endif
                                    </div>
                                    <div class="tab-pane has-padding" id="919-tab{{$key}}3">
                                        @if (empty($item->photos->count()))
                                        <table class="table">
                                            <tbody>
                                                <tr class="table-danger">
                                                    <td class="text-center">Nenhuma foto encontrada</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        @else
                                            @foreach ($item->photos as $image)

                                            <div class="col-md-4">
                                                <div class="panel panel-flat">
                                                    <div class="panel-body">
                                                        <p>{{$image->description}}</p>
                                                        <div class="thumbnail">
                                                            <div class="thumb">
                                                                <img src="{{ asset('storage/parts/gallery/' . $image->path) }}" class="img-rounded" style="max-width: 200px; max-height: 200px">
                                                                <div class="caption-overflow caption-zoom">
                                                                    <span>
                                                                        <a href="{{ asset('storage/parts/gallery/' . $image->path) }}" class="btn border-white text-white btn-flat btn-icon btn-rounded" data-popup="lightbox"><i class="icon-plus2"></i></a>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            @endforeach
                                        @endif
                                    </div>
                                    <div class="tab-pane has-padding" id="919-tab{{$key}}4">
                                        <p>{{$item->description}}</p>
                                    </div>
                                    <div class="tab-pane has-padding" id="919-tab{{$key}}5">
                                        <p>{{$item->observation}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>

                    @if(!$loop->last)
                        <hr>
                    @endif

                    @endforeach

                    <div class="text-center pt-10 pb-10">
                        {{$collection->links()}}
                    </div>
                @else
                <div class="row text-center">
                    <img src="{{asset('assets/images/no_data.png')}}" class="img-fluid mx-auto d-block" style="max-height: 300px;">
                 </div>
                @endif
            </ul>
        </div>
    </div>
</div>

<div id="modal-gallery" class="modal fade" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h5 class="modal-title"></h5>
            </div>

            <div class="modal-body">

            </div>
        </div>
    </div>
</div>
@endsection