@extends('admin.layouts.full')
@section('title', (isset($carousel) ? 'Modifier' : 'Ajouter').' un carousel')
@section('header')
@include('admin.partials.breadcrumb')
@endsection
@section('content')
<div class="row">
    <div class="col-12">
        <div class="card form-content">
            <div class="card-header">
                <h5>Carousel - {{ isset($carousel) ? 'Modification' : 'Création'}}</h5>
            </div>
            <div class="card-block">
	            @include('admin.partials.errors')
                @if(isset($carousel))
                {{ Form::model($carousel, ['route' => ['carousels.update', $carousel->id], 'method' => 'PUT']) }}
                @else
                {{ Form::open(['route' => ['carousels.store']]) }}
                @endif
                    {{ FormField::text(['name' => 'name', 'label' => 'Nom', 'errors' => $errors, 'tooltip' => 'Le nom du carousel (optionnel) est utilisé uniquement en interne, il ne sera pas vu par les internautes']) }}
                    {{ FormField::select(['options' => $specs, 'name' => 'spec', 'label' => 'Type de carousel', 'errors' => $errors]) }}
                    <div class="row form-group">
                        <div class="col-sm-3">
                            <label class="col-form-label">Slides</label>
                        </div>
                        <div class="col-sm-9">
                            @if(isset($carousel))
                            <a href="{{ route('carousels-slides.create', $carousel->id) }}" class="btn btn-info btn-sm m-0">Ajouter un slide</a>
                            @if($carousel->slides->count())
                            <div class="table-responsive mt-3">
                                <table class="display table table-bordered carousel-slides">
                                    <tbody>
                                        @foreach($carousel->slides as $s)
                                        <tr data-id="{{ $s->id }}" class="bg-white">
                                            <td class="text-center">{!! $s->picture ? htmlTag('a', $s->picture->adminListingPreview(), ['href' => $s->adminRoute]) : null !!}</td>
                                            <td class="text-center">{{ $s->name }}</td>
                                            <td>
                                                <div class="text-right">
                                                    <div class="btn-group btn-group-sm">
                                                        <a href="{{ $s->adminRoute }}" class="btn btn-light">
                                                            <i class="feather icon-edit"></i>
                                                        </a>
                                                        <a href="#" class="btn btn-danger delete-object" data-object-id="{{ $s->id }}" data-delete-route="{{ route('carousels-slides.destroy', $s->id) }}">
                                                            <i class="feather icon-trash-2"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @endif
                            @else
                            <div class="alert alert-info mb-0"><i class="fa fa-info-circle mr-2"></i>Veuillez d'abord créer le carousel avant de pouvoir y associer des slides</div>
                            @endif
                        </div>
                    </div>
                    {{ FormField::buttons(['index' => route('carousels.index') , 'label' => isset($carousel) ? 'Mettre à jour' : 'Enregistrer']) }}
                {{ Form::close() }}
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    $(document).ready(function(){
        function fixWidthHelper(e, ui) {
            ui.children().each(function() {
                $(this).width($(this).width());
            });
            return ui;
        }
        $('.carousel-slides tbody').sortable({
            helper: fixWidthHelper,
            stop: function( event, ui ) {
                var slides = new Array;
                $('.carousel-slides tbody tr').each(function(){
                    slides.push($(this).attr('data-id'));
                });
                $.post({
                    url: "{{ route('carousels-slides.order') }}",
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        slides: slides
                    }
                });
            }
        });
    });
</script>
@endpush