@extends('layouts.squelette')

@section('css_header')
 <link rel="stylesheet" href="{{ asset('plugins/filepond/dist/filepond.css')}}" />
 <link rel="stylesheet" href="{{ asset('plugins/filepond/filepond_elan.css')}}" />
@endsection

@section('js_header')
 <script src="{{ asset('plugins/filepond/dist/filepond.min.js')}}"></script>
 <script src="{{ asset('plugins/filepond/filepond-plugin-image-preview.min.js')}}"></script>
 <script src="{{ asset('plugins/filepond/filepond.jquery.js')}}"></script>
@endsection

@section('titre_header')
{{ __('Thème') }}
@endsection

@section('titre_page')
{{ $merchandising->mer_title }}
@endsection

@section('panel_boutons')
<small class="float-right">
    <a class="btn btn-defaut app2 retour text-right" href="{{ url()->previous() }}">
        <i class="fa fa-arrow-circle-left"></i> {{ __('Retour') }}</a>
</small>
@endsection

@section('contenu')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <div class="form-group text-center mb-4">
                        <h4>{{ $merchandising->mer_title }}</h4>
                        <div class="description mb-4">
                            {!! $merchandising->mer_description !!}
                        </div>
                        
                        <div class="alert alert-info">
                            <i class="fas fa-calendar"></i>
                            {{ __('Du') }} {{ date_en_fr($merchandising->mer_startDate) }}
                            {{ __('au') }} {{ date_en_fr($merchandising->mer_endDate) }}
                        </div>
                    </div>

                    <form method="POST" action="{{ route('merchandisingSite.photos.store', $merchandising->mer_id) }}" enctype="multipart/form-data">
                        @csrf 
                        <input type="hidden" name="sit_id" value="{{ $site }}">
                        
                        <div class="form-group">
                            <label class="form-label">{{ __('Envoi de photos') }}</label>
                            <div class="custom-file">
                                <input id="photo" class="my-pond-photos" type="file" name="photo[]" accept="image/*" required multiple>
                                {{-- <input type="file" class="fileinput" id="photo" name="photo[]" multiple required accept="image/*"> --}}
                            </div>
                            <small class="form-text text-muted">
                                {{ __('Formats acceptés : JPG, PNG - Max : 10 Mo') }}
                            </small>
                        </div>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>

                        @if($user_merchandising->role != 'admin')
                            <div class="alert alert-warning">
                                <i class="fas fa-info-circle"></i>
                                {{ __('Votre photo sera examinée par notre équipe. Elle pourra être validée ou vous être retournée pour modification.') }}
                            </div>
                        @endif

                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-upload mr-2"></i>
                                {{ __('Envoyer') }}
                            </button>
                        </div>
                    </form>

                    @if($merchandising->photos->where('sit_id', $site)->count() > 0)
                        <hr>
                        <h5 class="mb-3">{{ __('Photos déjà envoyées') }}</h5>
                        <div class="row">
                            @foreach($merchandising->photos->where('sit_id', $site) as $photo)
                                <div class="col-md-6 mb-3">
                                    <div class="card">
                                        <img src="{{ Storage::url('merchandising_photos/' . $merchandising->mer_id . '/' . $photo->merPho_path) }}" 
                                            class="card-img-top" 
                                            style="cursor: pointer;"
                                            alt="Photo"
                                            onclick="openModal(this.src)">
                                        <div class="card-body p-2">
                                            <span class="badge badge-{{ $photo->status->merSta_color }}">
                                                {{ $photo->status->merSta_label }}
                                            </span>
                                            <small class="text-muted d-block">
                                                {{ $photo->merPho_createdDate->format('d/m/Y H:i') }}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour afficher l'image en grand -->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body p-0">
                <button type="button" class="close position-absolute" style="right: 10px; top: 10px; z-index: 1" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <img id="modalImage" src="" class="img-fluid w-100" alt="Photo en grand format">
            </div>
        </div>
    </div>
</div>
@endsection

@push('custom-scripts')
<script>
    $(function(){
        $('.my-pond-photos').filepond({
            labelIdle: `Glissez-déposez vos fichiers ou <span class="filepond--label-action">Parcourir</span>`,
            allowMultiple: true,
            required: true,
            server: false,
            storeAsFile: true,
            name: 'bi_fichiers[]',
            imageCropAspectRatio: '1:1',
            imageResizeTargetWidth: 200,
            imageResizeTargetHeight: 200,
            imagePreviewHeight:100,
        });
    });
</script>
@endpush