@extends('back.main', ['title' => 'Expertises'])
@push('css')
@endpush
@section('content')
    @include('expertises')

    <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">
                    Expertises
                </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 text-white"></i></button>
                </div>
            </div>
        </div>
    </div>

    <div id="newrecord" class="modal fade text-dark">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <form
                method="post"
                action="{{ route('back.expertises.store') }}"
                class="modal-content">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">@lang('Nouvel enregistrement')</h5>
                </div>
                <div class="modal-body">
                    <div class="form-row">
                        <div class="col-lg-12 mb-2">
                            <label for="libelle">Libelle </label>
                            <input type="text" name="libelle" class="form-control" id="libelle">
                            <input type="hidden" name="id" class="form-control">
                        </div>
                        <div class="col-lg-12">
                            <label for="content">Contenu <span class="text-danger">*</span></label>
                            <textarea name="content" 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>


@endsection
@push('js')
    <script>

        var ajax_all_url = "{{ route('back.expertises.all') }}";
        var ajax_destroy_url = "{{ route('back.expertises.destroy') }}";

    </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-3 col-6 py-4" style="'+(((n<=4) ? n%2==0:n%2==1)?'background-color:#111':'')+'">';
                                html += '<div class="p-4">';
                                html += (element.libelle == null || element.libelle == '') ? '':'<h5 class="pr-5">' +element.libelle+ '</h5>';
                                html += '<p class="text-muted ff-gotham">' +element.content+ '</p>';
                                html += '</div>';
                                html += '</div>';

                            }
                        }

                        html += '</div>';

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

                    }
                }
            });
        }

    </script>
    <script>

        var newrecord = function () {
            $('#newrecord').modal();
            $('#newrecord').find('[name="id"]').val('');
            $('#newrecord').find('[name="content"]').val('');
            $('#newrecord').find('[name="libelle"]').val('');
        }

        var edit_item = function (id, content, libelle) {
            $('#newrecord').modal();
            $('#newrecord').find('[name="id"]').val(id);
            $('#newrecord').find('[name="content"]').val(content);
            $('#newrecord').find('[name="libelle"]').val(libelle);
        }
        
        var destroy_item = function (id) {
            $.ajax({
                type: 'delete',
                url: ajax_destroy_url,
                data:{
                    _token:"{{ csrf_token() }}",
                    id:id,
                },
                success: function(output) {

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

                    if (output) {
                        init();
                    }
                }
            });
        }

        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 += (element.libelle != null || element.libelle != '') ? '<h5>' +element.libelle+ '</h5>':'';
                                html += '<p>' +element.content+ '</p>';
                                html += '</div>';
                                html += '<div class="card-footer">';
                                html += '<button onclick="edit_item(`'+element.id+'`,`'+element.content+'`,`'+element.libelle+'`)" class="btn btn-sm btn-success mr-1"><i class="fe fe-edit"></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