@extends('layouts.dashboard')

@section('title', 'Modifier un slide') 

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 d-flex align-items-center">
                <h1 class="m-0">Modifier un slide</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('dashboard.welcome.edit') }}">Modifier la page d'accueil</a></li>
                    <li class="breadcrumb-item active">Modifier un slide</li>
                </ol>
            </div>
        </div>
    </div>
</div>


<div class="content">    
    <div class="container-fluid">
        
        <div class="row">

            <div class="col-md-8">
                
                <div class="card">
                    <form action="{{ route('dashboard.slides.update', $slide) }}" method="POST">
                        @csrf
                        @method("PUT")
                        <div class="card-body">
                            
                            <div class="row">                            
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="status">Statut</label>
                                        <select class="custom-select" id="status" name="status">
                                            <option value="1" @selected($slide->status)>
                                                Activé
                                            </option>
                                            <option value="0" @selected(!$slide->status)>
                                                Désactivé
                                            </option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label class="text-dark" for="subtitle">Sous-titre</label>
                                        <input type="text" class="form-control @error('subtitle') is-invalid @enderror"
                                        id="subtitle" name="subtitle"
                                        value="{{ old('subtitle', $slide->subtitle) }}">
                                        @error('subtitle')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>


                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="text-dark" for="title">Titre</label>
                                        <input type="text" class="form-control @error('title') is-invalid @enderror"
                                        id="title" name="title"
                                        value="{{ old('title', $slide->title) }}">
                                        @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">                                                    
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="text-dark" for="action_name">
                                            Étiquette de l'action
                                        </label>
                                        <input type="text"
                                        class="form-control @error('action_name') is-invalid @enderror"
                                        id="action_name" name="action_name" value="{{ old('action_name', $slide->action_name) }}">
                                        @error('action_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label class="text-dark" for="action_link">
                                            Lien de l'action
                                        </label>
                                        <input type="url" class="form-control @error('action_link') is-invalid @enderror" id="action_link" name="action_link"
                                        value="{{ old('action_link', $slide->action_link) }}">
                                        @error('action_link')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                            </div> 
                                                    
                             
                            
                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-save mr-1"></i>
                                Enregistrer les modifications
                            </button>
                            
                            <button type="button" class="btn btn-danger float-right" data-toggle="modal" data-target="#modal-default">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                            
                        </div>
                    </form>
                </div>
                
            </div>
            
            <div class="col-md-4">
                <div class="card card-secondary">
                    <div class="card-header">
                        <h3 class="card-title">Image</h3>
                    </div>
                    @if ($slide->image)
                    <form action="{{ route('dashboard.slides.delete-image', $slide) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" name="type" value="image">
                        <div class="card-body">
                            <img src="{{ asset('storage/slides/'. $slide->image) }}" alt="{{ $slide->slug }}" class="img-thumbnail mb-2">
                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-danger">
                                <i class="fas fa-trash mr-1"></i>
                                Supprimer l'image   
                            </button>
                        </div>
                    </form>
                    @else
                    <form action="{{ route('dashboard.slides.add-image', $slide) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="type" value="image">
                        <div class="card-body">
                            <label for="image" class="form-label mb-3">
                                Image <span class="text-red">[1800*1165]</span>
                            </label>
                            <div class="input-group mb-3">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="image"
                                    name="image">
                                    <label class="custom-file-label" for="image">Choisir une image</label>
                                </div>
                            </div>
                            
                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-upload mr-1"></i> Ajouter l'image
                            </button>
                        </div>
                    </form>
                    @endif
                    
                </div>                        
            </div>

        </div>   

    </div>
</div>


<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        <form action="{{ route('dashboard.slides.delete', $slide) }}" method="POST">
            @csrf
            @method("DELETE")
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Supprimer le slide</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        Confirmer la suppression du slide
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-danger">Supprimer</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection