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

    @include('clients')

    <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">
                    Clients
                </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" style="background-color: rgba(50,50,50, .3)" 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.clients.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">
                    <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">
                        </div>
                        <div class="col-lg-12">
                            <label for="illustration">Illustration <span class="text-danger">*</span></label>
                            <input type="file" name="file" class="form-control" id="illustration" required>
                        </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.clients.all') }}";
        var ajax_remove_url = "{{ route('back.clients.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">';

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

                                html += '<div class="col-lg-2 col-md-3 col-6">';
                                html += '<img class="img-fluid" src="' +route_home+ '/storage/public/clients/' + element.image + '">';
                                html += '</div>';

                            }
                        }

                        html += '</div>';

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

                    }
                }
            });
        }

    </script>
    <script>

        var newrecord = function () {
            $('#newrecord').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-2 col-md-3 col-6">';
                                html += '<div class="my-2 mx-1">';
                                html += '<button onclick="remove_client(' + element.id + ')" class="btn btn-sm btn-danger"><i class="fe fe-x"></i></button>';
                                html += '<img class="img-fluid" src="' +route_home+ '/storage/public/clients/' + element.image + '">';
                                html += '</div>';
                                html += '</div>';

                            }
                        }

                        html += '</div>';

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

                    }
                }
            });
        }

        var remove_client = function (id) {
            $.ajax({
                type: 'delete',
                url: ajax_remove_url,
                data:{
                    _token:"{{ csrf_token() }}",
                    id:id,
                },
                success: function(output) {

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

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

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

        init();

    </script>
@endpush