@extends('admin.app')

@section('content')

<div class="container">

    <ol class="breadcrumb">
        <li>
            <a href="{{action('Admin\LinesController@index')}}">
                Líneas
            </a>
        </li>
        <li class="active">
            {{$line->name}}
        </li>
        <li class="active">
            {{$collection->name}}
        </li>
        <li class="active">
            {{$category->name}}
        </li>
        <li class="active">
            {{$model->name}}
        </li>
    </ol>

    <div class="page-header">
        <div class="pull-right">
            <button id="btn-add-combination"
            data-line-id="{{$line->id}}"
            data-collection-id="{{$collection->id}}"
            data-category-id="{{$category->id}}"
            data-model-id="{{$model->id}}"
            class="btn btn-default">
                <span class="fa fa-fw fa-plus"></span> Añadir combinación
            </button>
        </div>
        <h3>
            {{$model->name}}
        </h3>
            
    </div>

    @include('errors.alert', ['errors' => $errors->combination_store])
    @include('errors.alert', ['errors' => $errors->combination_update])
    @include('errors.alert', ['errors' => $errors->color_store])
    @include('errors.alert', ['errors' => $errors->color_update])
    @include('errors.alert', ['errors' => $errors->size_store])
    @include('errors.alert', ['errors' => $errors->size_update])

    <div class="row">

        @forelse($combinations as $combination)

            <input type="hidden" id="combination" data-combination="{{$combination->id}}">
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <div class="pull-right">
                                <div class="btn-group">
                                    <button class="btn btn-xs btn-default btn-edit-combination"
                                        data-line-id="{{$line->id}}"
                                        data-collection-id="{{$collection->id}}"
                                        data-category-id="{{$category->id}}"
                                        data-model-id="{{$model->id}}"
                                        data-combination-id="{{$combination->id}}"
                                        data-combination-price="{{$combination->price}}"
                                        data-combination-cost="{{$combination->cost}}"
                                        data-combination-description="{{$combination->description}}"
                                        data-combination-sku="{{$combination->sku}}">
                                        <span class="fa fa-fw fa-pencil"></span>
                                    </button>
                                    <button class="btn btn-xs btn-default btn-delete-combination"
                                        data-line-id="{{$line->id}}"
                                        data-collection-id="{{$collection->id}}"
                                        data-category-id="{{$category->id}}"
                                        data-model-id="{{$model->id}}"
                                        data-combination-id="{{$combination->id}}">
                                        <span class="fa fa-fw fa-trash"></span>
                                    </button>
                                </div>
                            </div>
                            <span class="span-combination-name">
                                {{$combination->name}}    
                            </span>
                        </h3>
                    </div>

                    <table class="table">
                        <thead>
                            <tr>
                                <th>Colores</th>
                                <th>Tallas</th>
                            </tr>
                        </thead>
                        <tbody>

                            @while(!is_null($color = $combination->colors->shift()) | !is_null($size = $combination->sizes->shift()))
                                <tr>
                                    <td>
                                        @if($color)
                                            <span class="span-color-name">{{$color->name}}</span>
                                            <div class="pull-right">
                                                <div class="btn-group">
                                                    <button class="btn btn-default btn-xs btn-edit-color"
                                                        data-line-id="{{$line->id}}"
                                                        data-collection-id="{{$collection->id}}"
                                                        data-category-id="{{$category->id}}"
                                                        data-model-id="{{$model->id}}"
                                                        data-combination-id="{{$combination->id}}"
                                                        data-color-id="{{$color->id}}"
                                                        data-photo-src="{{$color->photo ? $color->photo->photo->url('medium') : ''}}"
                                                        data-thumb-src="{{$color->photo ? $color->photo->thumbnail->url('medium') : ''}}"
                                                        data-color-sku="{{$color->sku}}"
                                                    >
                                                        <span class="fa fa-fw fa-edit"></span>
                                                    </button>
                                                    <button class="btn btn-default btn-xs btn-delete-color"
                                                        data-line-id="{{$line->id}}"
                                                        data-collection-id="{{$collection->id}}"
                                                        data-category-id="{{$category->id}}"
                                                        data-model-id="{{$model->id}}"
                                                        data-combination-id="{{$combination->id}}"
                                                        data-color-id="{{$color->id}}"
                                                    >
                                                        <span class="fa fa-fw fa-trash"></span>
                                                    </button>
                                                </div>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        @if($size)
                                            <span class="span-size-name">{{$size->name}}</span>
                                            <div class="pull-right">
                                                    <div class="btn-group">
                                                        <button class="btn btn-default btn-xs btn-edit-size"
                                                        data-line-id="{{$line->id}}"
                                                        data-collection-id="{{$collection->id}}"
                                                        data-category-id="{{$category->id}}"
                                                        data-model-id="{{$model->id}}"
                                                        data-combination-id="{{$combination->id}}"
                                                        data-size-id="{{$size->id}}"
                                                        data-size-sku="{{$size->sku}}">
                                                            <span class="fa fa-fw fa-edit"></span>
                                                        </button>
                                                        <button class="btn btn-default btn-xs btn-delete-size"
                                                            data-line-id="{{$line->id}}"
                                                            data-collection-id="{{$collection->id}}"
                                                            data-category-id="{{$category->id}}"
                                                            data-model-id="{{$model->id}}"
                                                            data-combination-id="{{$combination->id}}"
                                                            data-size-id="{{$size->id}}"
                                                        >
                                                            <span class="fa fa-fw fa-trash"></span>
                                                        </button>
                                                    </div>
                                                </div>
                                        @endif
                                    </td>
                                </tr>
                            @endwhile
                            <tr>
                                <td>
                                    <button class="btn btn-default btn-block btn-add-color"
                                    data-line-id="{{$line->id}}"
                                    data-collection-id="{{$collection->id}}"
                                    data-category-id="{{$category->id}}"
                                    data-model-id="{{$model->id}}"
                                    data-combination-id="{{$combination->id}}">

                                        Agregar color

                                    </button>

                                </td>
                                <td>
                                    <button class="btn btn-default btn-block btn-add-size"
                                    data-line-id="{{$line->id}}"
                                    data-collection-id="{{$collection->id}}"
                                    data-category-id="{{$category->id}}"
                                    data-model-id="{{$model->id}}"
                                    data-combination-id="{{$combination->id}}">
                                        Agregar talla
                                    </button>

                                </td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>

        @empty
            <div class="alert alert-info">
                No hay combinaciones que mostrar
            </div>
        @endforelse
    </div>
</div>

@include('admin.combinations.modals.form')
@include('admin.colors.modals.form')
@include('admin.colors.modals.destroy-confirmation')
@include('admin.sizes.modals.form')
@include('admin.sizes.modals.destroy-confirmation')
@endsection

@section('script')
{!! Html::script('js/admin/combinations/index.js') !!}
{!! Html::script('js/admin/colors/form.js') !!}
{!! Html::script('js/admin/colors/destroy.js') !!}
{!! Html::script('js/admin/sizes/form.js') !!}
{!! Html::script('js/admin/sizes/destroy.js') !!}
@endsection