@extends('management.default.default')

@section('title', 'Photos')

@section('content')
    <div class="section-admin container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="portlet portlet-bordered">
                    <div class="portlet-title">
                        <div class="caption caption-lighter">
                            <span class="caption-subject text-uppercase">Catégories</span>
                        </div>
                        <div class="actions">
                            <a data-placement="top" class="tip-top text-success "
                               style="cursor: pointer"
                               data-original-title=""
                               data-toggle="modal"
                               data-target="#addCategory">
                                <i class="fa fa-plus"></i> <small class=" mar-right-10">Ajouter une nouvelle
                                    catégorie</small>
                            </a>

                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="table-responsive">
                            <table id="example1" class="table table-theme table-striped">
                                <thead>
                                <tr>
                                    <th>Désignation</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($categories as $category)
                                    <tr>
                                        <th><b>{{$category->name}}</b></th>

                                        <th class="text-center">
                                            <a data-toggle="modal" href="" id="edit"
                                               data-target='#editCategory' data-id="{{ $category->id }}"
                                               style="margin-right: 5px"
                                               title="Editer cette catégorie"><i
                                                    class="fa fa-edit"></i> </a>
                                        </th>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="portlet portlet-bordered">
                    <div class="portlet-title">
                        <div class="caption caption-lighter">
                            <span class="caption-subject text-uppercase">Photos</span>
                        </div>
                        <div class="actions">
                            <a data-placement="top" class="tip-top text-success "
                               style="cursor: pointer"
                               data-original-title=""
                               data-toggle="modal"
                               data-target="#addPictures">
                                <i class="fa fa-plus"></i> <small class=" mar-right-10">Ajouter des photos</small>
                            </a>

                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="table-responsive">
                            <table id="table" class="table table-theme table-striped">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>Titre</th>
                                    <th>Catégorie</th>
                                    <th>Date d'ajout</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($pictures as $picture)
                                    <tr>
                                        <th style="width: 15%;"><img src="{{ '/s/' . $picture->path }}"
                                                                     style="width: 100px"/></th>
                                        <th>{{$picture->title}}</th>
                                        <th>
                                            <span class="badge badge-dark">{{$picture->category->name}}</span>
                                        </th>
                                        <th data-sort="{{ $picture->created_at->format('Y-m-d') }}">
                                            {{ $picture->created_at->format('d/m/Y') }}
                                        </th>

                                        <th class="text-center">
                                            <a data-toggle="modal" href="" id="editPictureBtn"
                                               data-target='#editPicture' data-id="{{ $picture->id }}"
                                               style="margin-right: 5px"
                                               title="Editer cette photo"><i
                                                    class="fa fa-edit"></i> </a>
                                        </th>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal centered fade" id="addCategory" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content modal-background">
                <div class="modal-body pad-top-50 pad-bot-50 pad-left-50 pad-right-50">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <h3 id="LoginPanel"
                                    class="no-margin-top mar-bot-10 text-uppercase text-center letter-spacing-1">
                                    Nouvelle catégorie</h3>

                                <form class="form-theme mar-top-30" method="post"
                                      action="{{ route('management.gallery.category.create') }}"
                                      enctype="multipart/form-data">
                                    @csrf

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="text-muted">Désignation : <sup
                                                        class="color-red">*</sup></label>
                                                <input type="text" class="form-control" name="name" required
                                                       placeholder=""/>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="text-center">
                                                <button type="submit" class="btn btn-theme btn-full-width">Ajouter
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal centered fade" id="addPictures" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content modal-background">
                <div class="modal-body pad-top-50 pad-bot-50 pad-left-50 pad-right-50">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <h3 id="LoginPanel"
                                    class="no-margin-top mar-bot-10 text-uppercase text-center letter-spacing-1">
                                    Nouvelles photos</h3>

                                <form class="form-theme mar-top-30" method="post"
                                      action="{{ route('management.gallery.add') }}"
                                      enctype="multipart/form-data">
                                    @csrf

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="text-muted">Catégorie : <sup
                                                        class="color-red">*</sup></label>
                                                <select class="form-control" name="category" required>
                                                    <option>Sélectionner une catégorie</option>
                                                    @foreach($categories as $category)
                                                        <option
                                                            value="{{ $category->id }}">{{ $category->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <label class="text-muted">Titre : <sup
                                                        class="color-red">*</sup></label>
                                                <input class="form-control" type="text" name="title">
                                            </div>

                                            <div class="form-group">
                                                <label class="text-muted">Photos : <sup
                                                        class="color-red">*</sup></label>
                                                <input class="form-control" type="file" name="pictures[]" multiple>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="text-center">
                                                <button type="submit" class="btn btn-theme btn-full-width">Ajouter
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal centered fade" id="editCategory" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content modal-background">
                <div class="modal-body pad-top-50 pad-bot-50 pad-left-50 pad-right-50">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <h3 id="LoginPanel"
                                    class="no-margin-top mar-bot-10 text-uppercase text-center letter-spacing-1">
                                    Edition catégorie</h3>

                                <form id="formEdit" class="form-theme mar-top-30" method="post" action=""
                                      enctype="multipart/form-data">
                                    @csrf

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="text-muted">Désignation : <sup
                                                        class="color-red">*</sup></label>
                                                <input type="text" class="form-control" id="name" name="name" required
                                                       placeholder=""/>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="text-center">
                                                <button type="submit" class="btn btn-theme btn-full-width">Modifier
                                                </button>
                                                <br/><br/>

                                                <a id="deleteLink" style="color: red" href="">Supprimer cette catégorie
                                                    et les photos liés.</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal centered fade" id="editPicture" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content modal-background">
                <div class="modal-body pad-top-50 pad-bot-50 pad-left-50 pad-right-50">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <h3 id="LoginPanel"
                                    class="no-margin-top mar-bot-10 text-uppercase text-center letter-spacing-1">
                                    Éditer photo</h3>

                                <form class="form-theme mar-top-30" method="post" id="formEditPicture"
                                      enctype="multipart/form-data">
                                    @csrf

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="text-muted">Catégorie : <sup
                                                        class="color-red">*</sup></label>
                                                <select class="form-control" name="category" id="category" required>
                                                    <option>Sélectionner une catégorie</option>
                                                    @foreach($categories as $category)
                                                        <option
                                                            value="{{ $category->id }}">{{ $category->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <label class="text-muted">Titre : <sup
                                                        class="color-red">*</sup></label>
                                                <input class="form-control" id="title" type="text" name="title">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="text-center">
                                                <button type="submit" class="btn btn-theme btn-full-width">Modifier
                                                </button>
                                                <br/><br/>

                                                <a id="deleteLinkPicture" style="color: red" href="">Supprimer cette
                                                    photo</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        // Table
        var table = $('#table').DataTable({
            "order": [[3, "asc"]],
            "lengthMenu": [[25, 50, 75], [25, 50, 75]]
        });


        $('body').on('click', '#edit', function (event) {
            event.preventDefault();

            var id = $(this).data('id');

            document.getElementById('formEdit').action = '/management/gallery/category/' + id + '/edit';
            document.getElementById('deleteLink').href = '/management/gallery/category/' + id + '/delete';

            $.get('/management/gallery/category/' + id, function (data) {
                $('#name').val(data.data.name);
                $('#url').val(data.data.url);
                $('#order').val(data.data.order);
            })
        }).on('click', '#editPictureBtn', function (event) {
            event.preventDefault();

            var id = $(this).data('id');

            document.getElementById('formEditPicture').action = '/management/gallery/' + id + '/edit';
            document.getElementById('deleteLinkPicture').href = '/management/gallery/' + id + '/delete';

            $.get('/management/gallery/' + id, function (data) {
                $('#title').val(data.data.title);
                $('#category').val(data.data.category_id);
            })
        });
    </script>
@endsection