@extends('back.main', ['title' => __('Projet :item', ['item' => $item->libelle])])
@push('css')
@endpush
@section('content')
    @include('project-item')

    <div id="pageModal" class="modal text-dark fade">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header font-weight-bold">
                    Projets
                </div>
                <div class="modal-body" style="overflow-y:auto">
                    <div class="form-row">
                        <div class="col-12 mb-4">
                            <button onclick="newrecord()" class="btn btn-sm btn-primary">@lang('Nouvel enregistrement')</button>
                        </div>
                        <div class="col-lg-12" id="backitems"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-sm btn-danger"><i class="fe fe-x"></i></button>
                </div>
            </div>
        </div>
    </div>

    <div id="newrecord" class="modal fade text-dark">
        <div class="modal-dialog modal-dialog-centered">
            <form method="post" action="{{ route('back.projects.store') }}" enctype="multipart/form-data" class="modal-content">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">@lang('Nouvel enregistrement')</h5>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" >
                    <div class="form-row">
                        <div class="col-lg-12 mb-2">
                            <label for="libelle">Logo <span class="text-danger">*</span></label>
                            <input
                                type="file"
                                name="logo"
                                class="form-control"
                                id="logo" required>
                        </div>
                        <div class="col-lg-12 mb-2">
                            <label for="cover">Couverture <span class="text-danger">*</span></label>
                            <input
                                type="file"
                                name="cover"
                                class="form-control"
                                id="cover" required>
                        </div>
                        <div class="col-lg-12 mb-2">
                            <label for="image">Illustration <span class="text-danger">*</span></label>
                            <input
                                type="file"
                                name="image"
                                class="form-control"
                                id="image" required>
                        </div>
                        <div class="col-lg-12 mb-2">
                            <label for="youtube">Lien youtube <span class="text-danger">*</span></label>
                            <input
                                type="text"
                                name="youtube"
                                class="form-control"
                                id="youtube" required>
                        </div>
                        <div class="col-lg-12">
                            <label for="content">Description <span class="text-danger">*</span></label>
                            <textarea
                                name="description"
                                rows="3"
                                class="form-control"
                                id="content" required></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button
                        type="submit"
                        class="btn btn-sm btn-success">
                        <i class="fe fe-check text-white"></i></button>
                    <button
                        type="button"
                        data-dismiss="modal"
                        class="btn btn-sm btn-danger">
                        <i class="fe fe-x text-white"></i></button>
                </div>
            </form>
        </div>
    </div>

    <div id="editrecord" class="modal fade text-dark">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="form-row"></div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-sm btn-success"><i class="fe fe-check text-white"></i></button>
                    <button type="button" data-dismiss="modal" class="btn btn-sm btn-danger"><i class="fe fe-x text-white"></i></button>
                </div>
            </div>
        </div>
    </div>

    <div id="viewrecord" class="modal fade text-dark">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="form-row"></div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-sm btn-success"><i class="fe fe-check text-white"></i></button>
                    <button type="button" data-dismiss="modal" class="btn btn-sm btn-danger"><i class="fe fe-x text-white"></i></button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>

        var ajax_all_url = "{{ route('back.projects.all') }}";

    </script>
    <script>

        var front_init = function () {
            $.ajax({
                type: 'get',
                url: ajax_all_url,
                success: function(output) {

                    console.log('!! output');
                    console.log(output);

                    if (output) {

                        var html = '<div class="form-row">';
                        var n = 0;

                        for (const key in output) {
                            if (Object.hasOwnProperty.call(output, key)) {
                                const element = output[key];

                                n++;

                                html += '<div class="col-lg-12">';
                                html += '<div class="card card-shadow" style="background-color: #111;border-radius: 30px">';
                                html += '<div class="card-body">';
                                html += '<div class="form-row">';
                                html += '<div class="col-lg-7 p-5">';
                                html += '<img class="w-50" src="' +route_home+ '/storage/public/logo/' + element.logo + '">';
                                html += '<p class="mt-3 text-muted">' +element.description+ '</p>';
                                html += '<a class="text-muted" href="' +route_home+ '/item/' +element.id+ '">Voir plus</a>';
                                html += '</div>';
                                html += '<div class="col-lg-5">';
                                html += '<img class="w-100" src="' +route_home+ '/storage/public/illustrations/' + element.image + '">';
                                html += '</div>';
                                html += '</div>';
                                html += '</div>';
                                html += '</div>';
                                html += '</div>';

                            }
                        }

                        html += '</div>';

                        $('#items').html(html);

                    }
                }
            });
        }

    </script>
    <script>

        var newrecord = function () {
            $('#newrecord').modal();
            $('#newrecord').find('[name="id"]').val('');
            $('#newrecord').find('[name="youtube"]').val('');
            $('#newrecord').find('[name="description"]').val('');
            $('#newrecord [name="logo"]').parent().find('.text-danger').html('*');
            $('#newrecord').find('[name="logo"]').prop('required', true).change();
            $('#newrecord [name="cover"]').parent().find('.text-danger').html('*');
            $('#newrecord').find('[name="cover"]').prop('required', true).change();
            $('#newrecord [name="image"]').parent().find('.text-danger').html('*');
            $('#newrecord').find('[name="image"]').prop('required', true).change();
        }

        var edit_item = function (id, youtube, description) {
            $('#newrecord').modal();
            $('#newrecord').find('[name="id"]').val(id);
            $('#newrecord').find('[name="youtube"]').val(youtube);
            $('#newrecord').find('[name="description"]').val(description);
            $('#newrecord [name="logo"]').parent().find('.text-danger').html('');
            $('#newrecord').find('[name="logo"]').prop('required', false).change();
            $('#newrecord [name="cover"]').parent().find('.text-danger').html('');
            $('#newrecord').find('[name="cover"]').prop('required', false).change();
            $('#newrecord [name="image"]').parent().find('.text-danger').html('');
            $('#newrecord').find('[name="image"]').prop('required', false).change();
        }

        var viewrecord = function () {
            $('#viewrecord').modal();
        }

        var back_init = function () {
            $.ajax({
                type: 'get',
                url: ajax_all_url,
                success: function(output) {

                    console.log('!! output');
                    console.log(output);

                    if (output) {

                        var html = '<div class="form-row">';

                        for (const key in output) {
                            if (Object.hasOwnProperty.call(output, key)) {
                                const element = output[key];

                                html += '<div class="col-lg-4 col-md-3 col-6 p-2">';
                                html += '<div class="card">';
                                html += '<div class="card-body">';
                                html += '<div class="w-100"><img class="w-100" style="object-fit: cover" src="' +route_home+ '/storage/public/illustrations/' + element.image + '"></div>';
                                html += '<p class="mt-2">' +element.description+ '</p>';
                                html += '</div>';
                                html += '<div class="card-footer">';
                                html += '<button onclick="edit_item(`'+element.id+'`,`'+element.youtube+'`,`'+element.description+'`)" class="btn btn-sm btn-success mr-1"><i class="fe fe-edit"></i></button>';
                                html += '<button onclick="edit_image_item('+element.id+')" class="btn btn-sm btn-primary mr-1"><i class="fe fe-image"></i></button>';
                                html += '<button onclick="destroy_item('+element.id+')" class="btn btn-sm btn-danger"><i class="fe fe-x"></i></button>';
                                html += '</div>';
                                html += '</div>';
                                html += '</div>';

                            }
                        }

                        html += '</div>';

                        $('#backitems').html(html);

                    }
                }
            });
        }

        var init = function () {
            front_init();
            back_init();
        }

        init();

    </script>
@endpush