@extends('layouts.squelette')
<!-- ************************************** -->
@section('titre')
{{ __('Merchandising') }}
@endsection
<!-- ************************************** -->
@section('titre_header')
{{ __('Thèmes') }}
@endsection
<!-- ************************************** -->
@section('titre_page')
{{ __('Liste') }}
@endsection

@section('panel_boutons')
    <small class="float-right"> 
        <button type="button" class="btn btn-defaut btn-add-new" data-toggle="modal" data-target="#AddModal">
            {{ __("Ajouter un thème") }}
        </button> 
    </small>
@endsection

@section('contenu')
<div class="row">
    <div class="col-md-12">
        <div class="card card-info">
            <div class="card-body card-body-with-table p-100"> 
                <div class="table-responsive">
                    <table id="results" class="table table-striped table-compact table-advance table-hover" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>{{ __("Thème") }}</th> 
                                <th>{{ __("Période") }}</th> 
                                <th>{{ __("Sites participants") }}</th>  
                                <th>{{ __("Photos") }}</th>
                                <th>{{ __("Statut") }}</th>
                                <th class="action">{{ __("Actions") }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($merchandisings as $merchandising) 
                            <tr> 
                                <td width="20%">
                                    <strong>{!! $merchandising->mer_title !!}</strong>
                                    <small class="text-muted d-block">
                                        {{ __("Créé le") }} {!! date_en_fr($merchandising->mer_createdDate) !!}
                                    </small>
                                </td> 
                                <td width="15%">
                                    {{ __("Du") }} {!! date_en_fr($merchandising->mer_startDate) !!}
                                    {{ __("au") }} {!! date_en_fr($merchandising->mer_endDate) !!}
                                </td>
                                <td width="15%"> 
                                    <span class="badge bg-info">{!! $merchandising->count_sites !!} sites</span>
                                </td> 
                                <td width="20%">
                                    <div class="progress-group">
                                        <span class="progress-text">Photos validées</span>
                                        <span class="float-right">{!! $merchandising->nbr_reponse !!}</span>
                                        <div class="progress">
                                            <div class="progress-bar bg-success" style="width: {!! $merchandising->pourcentage_reponse !!}"></div>
                                        </div>
                                    </div>
                                </td>
                                <td width="15%">
                                    @if(now() < $merchandising->mer_startDate)
                                        <span class="badge badge-info">{{ __("À venir") }}</span>
                                    @elseif(now() > $merchandising->mer_endDate)
                                        <span class="badge badge-secondary">{{ __("Terminé") }}</span>
                                    @else
                                        <span class="badge badge-success">{{ __("En cours") }}</span>
                                    @endif
                                </td>
                                <td class="action" width="15%">
                                    <div class="">
                                        <a href="{{ route('merchandising.edit', $merchandising->mer_id) }}" 
                                           class='btn btn-sm btn-info' title="{{ __('Modifier') }}">
                                            <i class="fas fa-edit"></i>
                                        </a>

                                        @if($merchandising->photos->count() == 0)
                                            <button type="button" class='btn btn-sm btn-danger btn-delete' id="btn_suppr_merchandising_{{ $merchandising->mer_id }}"
                                                    data-id="{{ $merchandising->mer_id }}"
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('modale')
<!-- Modal ajout thème -->
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="AddModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form action="{{ route('createmerchandising') }}" method="post" id="form_addmerchandising">
            @csrf
            <div class="modal-content">
                <div class="modal-header bg-modal">
                    <h5 class="modal-title">{{ __('Nouveau thème photo') }}</h5> 
                </div>
                <div class="modal-body"> 
                    <div class="form-group">
                        <label for="title" class="required_label">{{ __('Titre du thème') }}</label>
                        <input type="text" id="title" name="title" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label for="description">{{ __('Description et consignes') }}</label>
                        <textarea id="description" name="description" class="trumbowyg"></textarea>
                    </div>

                    <div class="row">
                        <div class="col">
                            @component('components.dates.select_simple',[
                                'label' => __('Date de debut'),
                                'required'=>true,
                                'value'=>'',
                                'name'=>'mer_date_debut'
                            ])
                            @endcomponent
                        </div>
                        <div class="col">
                            @component('components.dates.select_simple',[
                                'label' => __('Date de fin'),
                                'required'=>true,
                                'value'=>'',
                                'name'=>'mer_date_fin'
                            ])
                            @endcomponent
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-abort" data-dismiss="modal">{{ __('Annuler') }}</button>
                    <button type="submit" class="btn btn-save">{{ __('Créer') }}</button>
                </div>
            </div>
        </form>
    </div>
</div>

@include('modales.delete_standard')
@endsection

@push('custom-scripts')
<script src="{{ asset('js/merchandising/index.js').'?'.env('VERSION_JS')}}"></script>
@endpush