@extends('backoffice.admin.layout')
@section('content')
@php
$sect = sections()->find($id);
$sections = sections()->where('page', $sect->page);
@endphp
<div class="row">

    <div class="col-md-12">
        <div class="iq-card">
            <div class="iq-card-header d-flex justify-content-between">
                <div class="iq-header-title">
                    <div class=" d-flex justify-content-between">
                        <h4 class="card-title">{{$pagename ?? ""}}</h4>

                    </div>
                </div>
            </div>
            <div class="iq-card-body">
                <div class="table-responsive">
                    <table id="datatable" class="table table-striped table-bordered">
                       <thead>
                          <tr>
                             <th style="width: 2%">Image</th>
                             <th>Section</th>
                             <th>Titre</th>
                             <th style="width: 2%"> <a href="" data-toggle="modal" data-target="#addsectionpage" class="btn btn-primary">Ajouter</a></th>
                          </tr>
                       </thead>
                       <tbody>

                            @foreach ($sections as $section)
                                <tr>
                                    <td>
                                        @if ($section->image)
                                            <img src="{{asset($section->image)}}" height="40px" alt="">
                                        @elseif ($section->icon)
                                            <img src="{{asset($section->icon)}}" height="40px" alt="">
                                        @else
                                            <img src="{{asset("no-image.png")}}" height="40px" alt="">
                                        @endif
                                    </td>
                                    <td>{{$section->section}}</td>
                                    <td>{{$section->title}}</td>
                                    <td><a class="btn btn-sm btn-primary" href="{{route('admin.system.sections.edit', $section->id)}}">Modifier</a></td>
                                </tr>
                            @endforeach

                       </tbody>
                       <tfoot>
                        <tr>
                            <th>Image</th>
                            <th>Section</th>
                            <th>Titre</th>
                            <th style="width: 2%"> <a href="" data-toggle="modal" data-target="#addsectionpage" class="btn btn-primary">Ajouter</a></th>
                         </tr>
                       </tfoot>
                    </table>
                 </div>
            </div>
        </div>

    </div>

</div>

 <!-- Modal -->
 <div class="modal fade" id="addsectionpage" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Confirmation de suppression</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            </button>
        </div>
        <div class="modal-body">
            <form action="{{route('admin.system.sections.store')}}"  method="POST" enctype="multipart/form-data">@csrf
                <div class="row">
                   <div class="col-md-4">
                        <div class="form-group">
                            <label for="name">Page</label>
                            <input type="text" readonly value="{{$sect->page}}"  required name="page" value="" class="form-control" id="name">
                        </div>

                        <div class="form-group">
                            <label for="section">Section</label>
                            <input type="text"  name="section" required value="" class="form-control" id="section">
                        </div>

                        <div class="form-group">
                            <label for="title">Titre</label>
                            <input type="text" name="title"  value="" class="form-control" id="title">
                        </div>


                   </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="subtitle">Sous Titre</label>
                            <input type="text" name="subtitle"  value="" class="form-control" id="subtitle">
                        </div>
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea name="description" id="description" class="form-control" cols="30" rows="7">{{$section->description ?? ""}}</textarea>
                        </div>

                    </div>

                    <div class="col-md-4">

                        <div class="form-group">
                            <label for="btn">Nom du bouton</label>
                            <input type="text" name="btn" value="" class="form-control" id="btn">
                        </div>
                        <div class="form-group">
                            <label for="link">lien du bouton</label>
                            <input type="text" name="link" value="" class="form-control" id="link">
                        </div>
                        <div class="form-group">
                            <label for="image">Image</label> <br>
                            <input type="file" name="image" class="" id="image">
                        </div>
                        <div class="form-group">
                            <label for="icon">Icon</label> <br>

                            <input type="file" name="icon" class="" id="icon">
                        </div>


                    </div>


                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <button type="submit" class="btn w-50 btn-primary">Ajouter la section</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>

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

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

@endsection