@extends('layouts.backend.main')
@section('title','Actualités')
@section('styles')
    @include('pages.backend.includes.news_styles_links')
@endsection
@section('body')
    <div class="row">
        <div id="breadcrumbs-wrapper" data-image="{{asset('backend/images/gallery/breadcrumb-bg.jpg')}}">
            <!-- Search for small screen-->
            <div class="container">
                <div class="row">
                    <div class="col s12 m6 l6">
                        <h5 class="breadcrumbs-title mt-0 mb-0"><span>Actualités</span></h5>
                    </div>
                    <div class="col s12 m6 l6 right-align-md">
                        <ol class="breadcrumbs mb-0">
                            <li class="breadcrumb-item"><a href="{{route('admin-home')}}">Acceuil</a>
                            </li>
                            <li class="breadcrumb-item"><a href="{{ route('admin-news') }}">Actualités</a>
                            </li>

                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12">
            <div class="container">
                <div class="seaction">

                    <div class="card">
                        <div class="card-content top-text">
                            <p class="caption mb-0">Gestion des actualités.</p>
                        </div>
                    </div>

                    <!--Basic Form-->

                    <!-- jQuery Plugin Initialization -->
                    <div class="row card-wrapper" >
                        <div class="col s12 m12 l12">
                            <div id="striped-table" class="card card card-default scrollspy">
                                <div class="card-content">
                                    <div class="row">
                                        <div class="col s12 new_news">
                                            <a class="waves-effect waves-light btn mb-1 modal-trigger" id="add_button" href="#modal1">
                                                <i class="material-icons right">note_add</i> Nouveau</a>
                                        </div>
                                        <!-- Modal Trigger -->
{{--                                        <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>--}}
                                    </div>
                                    <div class="row">
                                        <div class="col s12">
                                        </div>
                                        <div class="col s12">
                                            <table class="striped">
                                                <thead>
                                                <tr>
                                                    <th data-field="id">Image principale</th>
                                                    <th data-field="name">Titre</th>
                                                    <th data-field="name">Date</th>
                                                    <th data-field="price">Action</th>
                                                </tr>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="pagination pagination_section" >
                                        <ul class="pagination">
                                            <li class="page-item disabled" id="prevPage"><span class="page-link">Précédent</span></li>
                                            <!-- Pagination links will be dynamically added here -->
                                            <li class="page-item disabled" id="nextPage"><span class="page-link">Suivant</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div><!-- START RIGHT SIDEBAR NAV -->

            </div>

            <div class="content-overlay"></div>

            <!-- Modal Structure -->
            <div id="modal1" class="modal modal-fixed-footer">
                <div class="modal-content">
                    <div class="col s12 m12 l12">
                        <div id="prefixes" class="card card card-default scrollspy">
                            <div class="card-content">
                                <form id="upload_form">
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <i class="material-icons prefix">title</i>
                                            <input id="title" type="text" name="title" >
                                            <label for="title">Titre</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <i class="material-icons prefix">date_range</i>
                                            <input id="date" type="date" name="date" >
                                            <label for="date">Date</label>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col s12">
                                            <div id="file-upload" class="section">
                                                <!--Default version-->
                                                <div class="row section">
                                                    <div class="col s12">
                                                        <input type="file" id="input-file-now" accept="image/*" name="image" class="dropify" data-allowed-file-extensions="png jpg jpeg" >
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-5">
                                         <p id="optional_images">Rajouter les images secondaires (optionel)</p>
                                        <div class="col s12">
                                            <div id="optional_images_input_zone">
                                                <p><i class="material-icons">cloud_upload</i></p>
                                                <p>Uploader le fichier</p>
                                                <input type="file" id="optional_images_input" accept="image/*" name="optional_images" hidden="hidden">
                                            </div>
                                        </div>
                                        <div class="col s12 mt-3">
                                            <div class="row mr-3" id="uploaded_images_wrapper">

                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col s12">
                                            <div id="editor">

                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                            <div class="input-field col s12">
                                                <button  class="btn cyan waves-effect waves-light right save_button" type="submit" name="action">Enregistrer
                                                    <i class="material-icons right">cloud_upload</i>
                                                </button>
                                            </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Structure -->
            <div id="preview" class="modal">
                <div class="modal-content">
                    <div class="card">
                        <div class="card-content top-text" id="preview-card" >
                            <p class="preview_title mb-0"></p>
                            <p class="preview_date">22/01/2024</p>
                            <div class="row" id="preview_image">
                                <img id="main_image"  alt="">
                            </div>
                            <div class="row mb-3 mt-3">
                                <div class="col s12 preview_content">

                                 </div>
                            </div>
                            <div class="row mb-3 mt-3">
                                  <div class="carousel_images">

                                  </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection
@section('scripts')
    @include('pages.backend.includes.news_scripts_links')
@endsection