@extends('layouts.backend.main')
@section('title','Contact')
@section('styles')
    @include('pages.backend.includes.contact_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>Contacs</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-contact') }}">Contacts</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 contacts.</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">Teléphone 1</th>
                                                    <th data-field="name">Teléphone 2</th>
                                                    <th data-field="name">Adresse</th>
                                                    <th data-field="name">Mail</th>
                                                    <th data-field="name">Réseaux sociaux</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">local_phone</i>
                                            <input id="first_phone" type="text" name="first_phone" >
                                            <label for="first_phone">Numéro 1</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <i class="material-icons prefix">local_phone</i>
                                            <input id="second_phone" type="text" name="second_phone" >
                                            <label for="second_phone">Numéro 2</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <i class="material-icons prefix">email</i>
                                            <input id="email" type="text" name="email" >
                                            <label for="email">E-Mail</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <i class="material-icons prefix">location_on</i>
                                            <input id="address" type="text" name="address" >
                                            <label for="address">Adresse</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="input-field col s12">
                                             <button  class="btn cyan waves-effect waves-light right" id="add_social_media">Ajouter un réseau social   <i class="material-icons right">add</i></button>
                                        </div>
                                    </div>

                                    <div class="row" id="social_network_content">
{{--                                        <div class="col s12">--}}
{{--                                            <div class="row">--}}
{{--                                                <div class="input-field col s6">--}}
{{--                                                    <i class="material-icons prefix">add</i>--}}
{{--                                                    <input class="social_network" type="text" name="social_networks[]" >--}}
{{--                                                    <label >Réseau social</label>--}}
{{--                                                </div>--}}
{{--                                                <div class="input-field col s6">--}}
{{--                                                    <i class="material-icons prefix social_network_delete_button">delete</i>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}

{{--                                        </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">
                                        <div class="input-field col s12 justify-content-center">
                                            <button  class="btn cyan waves-effect waves-light  center 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>
                    </div>
                </div>
            </div>

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