@extends('back.main', ['title' => 'Réalisations'])
@push('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-container .select2-selection--single {
            padding-top: 4px;
            padding-bottom: 4px;
            height: 37px;
        }
        .select2-results__option {
            color: black;
        }
        .select2-container {
            width: 100%
        }
        /*
        .realization_img:hover {
            filter: blur(2px) brightness(80%) contrast(120%);
        }
        */
        .parent_realization .legend {
            display:none;
        }
        .parent_realization:hover .legend {
            display:block;
        }
        .realization_img .overlay {
            position: absolute;
            top: 0;
            left: 0;
            height: 0%;
            width: 0%;
            background: #000;
            opacity: 0.9;
            border-radius: 5px;
            transition: width 0.2s;
        }
        .realization_img:hover .overlay {
            height: 310px;
            width: 100%;
        }
    </style>
@endpush
@section('content')

    @include('realizations')

    <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">
                    Réalisations
                </div>
                <div class="modal-body" style="overflow-y:auto">
                    <div class="form-row my-5">
                        <div class="col-lg-3">
                            <select name="config_type_blocs" class="select2 form-control w-100"></select>
                        </div>
                    </div>
                    <!--
                    <div class="form-row my-3">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title">
                                        Illustrations des réalisations
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="form-row">
                                        @for ($i = 1; $i <= 6; $i++)
                                            <div class="col-lg-4 my-1">
                                                <form
                                                    method="post"
                                                    enctype="multipart/form-data"
                                                    action="{{ route('back.settings.store.image') }}" class="card">
                                                    @csrf
                                                    <img
                                                        class="card-img-top w-100"
                                                        style="height: 150px;object-fit: cover;"
                                                        id="config_realization_image{{ $i }}"
                                                        src="{{ asset('assets/img.png') }}" alt="">
                                                    <div class="card-body">
                                                        <label for="">Image {{ $i }} <span class="text-danger">*</span></label>
                                                        <input type="hidden" class="form-control" name="meta_key" value="config_realization_image{{ $i }}">
                                                        <input type="file" class="form-control" name="file" required>
                                                    </div>
                                                    <div class="card-footer">
                                                        <button type="submit" class="btn btn-sm btn-success">
                                                            <i class="fe fe-check"></i>
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    -->
                    <div class="form-row my-3">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title h3">
                                        Réalisations
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="form-row">
                                        <div class="col-lg-12">
                                            <button onclick="newrecord()" class="btn btn-sm btn-primary my-3">Nouvelle enregistrement</button>
                                        </div>
                                    </div>
                                    <div class="form-row" id="realisation_items"></div>
                                </div>
                            </div>
                        </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-xl modal-dialog-centered">
            <form method="post" action="{{ route('back.realizations.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 my-2">
                            <div class="form-row">
                                <div class="col-lg-7">
                                    <label for="libelle">Libelle <span class="text-danger">*</span></label>
                                    <input type="text" name="title" class="form-control" id="libelle" required>
                                </div>
                                <div class="col-lg-3">
                                    <label for="libelle">Types <span class="text-danger">*</span></label>
                                    <select name="type_id" class="form-control select2" id="libelle" required></select>
                                </div>
                                <div class="col-lg-2">
                                    <label for="annee">Année <span class="text-danger">*</span></label>
                                    <input type="number" name="annee" class="form-control" id="annee" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 my-2">
                            <div class="form-row">
                                <div class="col-lg-8">
                                    <label for="context">Contexte <span class="text-danger">*</span></label>
                                    <input type="text" name="context" class="form-control" id="context" required>
                                </div>
                                <div class="col-lg-4">
                                    <label for="file">Illustration <span class="text-danger">*</span></label>
                                    <input type="file" name="file" class="form-control" id="file" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 my-2">
                            <div class="form-row">
                                <div class="col-lg-6">
                                    <label for="why">Pourquoi ? <span class="text-danger">*</span></label>
                                    <textarea name="why" cols="5" class="form-control" id="why" required></textarea>
                                </div>
                                <div class="col-lg-6">
                                    <label for="how">Pourquoi ? <span class="text-danger">*</span></label>
                                    <textarea name="how" cols="5" class="form-control" id="how" required></textarea>
                                </div>
                            </div>
                        </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="imagerecord" class="modal fade text-dark">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">@lang('Nouvel enregistrement')</h5>
                </div>
                <div class="modal-body" style="overflow-y:auto;max-height: 550px">
                    <div class="form-row my-2 py-3 border bg-light">
                        <div class="col-lg-3">
                            <img src="" class="form-image" style="height: 100px;object-fit: cover;">
                        </div>
                        <div class="col">
                            <b class="title"></b><br>
                            <span class="text-muted context"></span>
                        </div>
                    </div>
                        <div class="form-row">
                            @for ($i = 1; $i <= 6; $i++)
                                <div class="col-lg-4 my-1">
                                    <form
                                        method="post"
                                        enctype="multipart/form-data"
                                        action="{{ route('back.realizations.store.image') }}" class="card">
                                        @csrf
                                        <img
                                            class="card-img w-100"
                                            style="height: 150px;object-fit: cover;"
                                            id="realization_image{{ $i }}"
                                            src="{{ asset('assets/img.png') }}" alt="">
                                        <div class="card-body">
                                            <label for="">Image {{ $i }} <span class="text-danger">*</span></label>
                                            <input type="hidden" class="form-control" name="id" value="">
                                            <input type="hidden" class="form-control" name="index" value="{{ $i }}">
                                            <input type="file" class="form-control" name="file" required>
                                        </div>
                                        <div class="card-footer">
                                            <button type="submit" class="btn btn-sm btn-success">
                                                <i class="fe fe-check"></i>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            @endfor
                        </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>

@endsection
@push('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>

        var ajax_type_blocs_url = "{{ route('back.realizations.types.blocs') }}";
        var ajax_type_realizations_url = "{{ route('back.realizations.types') }}";
        var ajax_realizations_url = "{{ route('back.realizations.all') }}";
        var ajax_realizations_show_url = "{{ route('back.realizations.show') }}";
        var ajax_configs_url = "{{ route('back.settings.all') }}";
        var array_images_extensions = ['jpg', 'jpeg', 'png', 'gif', 'tiff'];

        var ajax_front_realizations_url = "{{ route('front.realizations.all') }}";
        var ajax_front_settings_url = "{{ route('front.settings.all') }}";

        $(document).ready(function() {
            $('.select2').select2({
                width: '100%'
            });
        });

        $('[type="file"]').on('change', function(event) {
            var extension = event.target.files[0].name.split('.')[1];
            if (event.target.files[0]) {
                if (array_images_extensions.includes(extension)) {
                    $(this).parent().parent().find('.card-img-top').attr({
                        'src':URL.createObjectURL(event.target.files[0])
                    });
                }
            }
        });

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

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

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

                    if (output) {

                        $('[name="config_type_blocs"]').empty();

                        for (const key in output) {
                            if (Object.hasOwnProperty.call(output, key)) {
                                const element = output[key];
                                $('[name="config_type_blocs"]').append('<option class="text-dark" value="' +element.id+ '">' +element.libelle+ '</option>');
                            }
                        }
                    }
                }
            });
        }

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

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

                    if (output) {

                        $('#newrecord').find('[name="type_id"]').empty();

                        for (const key in output) {
                            if (Object.hasOwnProperty.call(output, key)) {
                                const element = output[key];
                                $('#newrecord').find('[name="type_id"]').append('<option class="text-dark" value="' +element.id+ '">' +element.libelle+ '</option>');
                            }
                        }
                    }
                }
            });
        }

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

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

                    if (output) {

                        var html = '';

                        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/realizations/' + element.image + '"></div>';
                                html += '<p class="mt-3">' +element.title+ '<br>' +element.context+ '</p>';
                                html += '</div>';
                                html += '<div class="card-footer">';
                                html += '<button onclick="edit_item(`'+element.id+'`)" 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>';

                            }
                        }

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

                    }
                }
            });
        }

        var edit_item = function (id) {
            $('#newrecord').modal();
            $.ajax({
                type: 'get',
                url: ajax_realizations_show_url,
                data:{
                    id:id
                },
                success: function(output) {

                    console.log('!! edit_item('+id+')');
                    console.log(output);

                    if (output) {

                        $('#newrecord').find('[name="id"]').val(output.id);
                        $('#newrecord').find('[name="context"]').val(output.context);
                        $('#newrecord').find('[name="title"]').val(output.title);
                        $('#newrecord').find('[name="type_id"]').val(output.type_id).val();
                        $('#newrecord').find('[name="annee"]').val(output.annee);
                        $('#newrecord').find('[name="why"]').val(output.why);
                        $('#newrecord').find('[name="how"]').val(output.how);
                        $('#newrecord').find('.form-image').attr('src', route_home + '/storage/public/realizations/' + output.image);

                    }
                }
            });
        }

        var edit_image_item = function (id) {
            $('#imagerecord').modal();
            $('#imagerecord').find('[name="id"]').val(id);
            $.ajax({
                type: 'get',
                url: ajax_realizations_show_url,
                data:{
                    id:id
                },
                success: function(output) {

                    console.log('!! edit_image_item('+id+')');
                    console.log(output);

                    if (output) {

                        $('#imagerecord').find('.title').html(output.title);
                        $('#imagerecord').find('.context').html(output.context);
                        $('#imagerecord').find('.form-image').attr('src', route_home + '/storage/public/realizations/' + output.image);

                        var html = '';

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

                                $('#realization_image' + key).attr('src', route_home + '/storage/public/realizations/' + element);

                            }
                        }
                    }
                }
            });
        }

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

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

                    if (output) {

                        var html = '';

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

                                if (key.indexOf('config_realization_image') != -1) {
                                    $('#' + key).attr({
                                        'src': route_home + '/storage/public/config_websites/' + element
                                    });
                                }
                                else if (key.indexOf('realization_resume') != -1) {
                                    if (key == 'realization_resume_image') {
                                        $('#' + key).attr({
                                            'src': route_home + '/storage/public/config_websites/' + element
                                        });
                                    }
                                    else {
                                        $('[name="'+key+'"]').val(element);
                                    }
                                }
                            }
                        }
                    }
                }
            });
        }

        var init = function () {
            init_realizations();
            init_configs();
        }

        init();

        init_types_blocs();
        init_types_realizations();
    </script>
    <script>

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

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

                    if (output) {

                        var html = '';

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

                                if (key.indexOf('config_realization_image') != -1) {
                                    $('#front_' + key).attr({
                                        'src': route_home + '/storage/public/config_websites/' + element
                                    });
                                }
                                else if (key.indexOf('realization_resume') != -1) {
                                    if (key == 'realization_resume_image') {
                                        $('#front_' + key).attr({
                                            'src': route_home + '/storage/public/config_websites/' + element
                                        });
                                    }
                                    else {
                                        $('[name="'+key+'"]').val(element);
                                    }
                                }
                            }
                        }
                    }
                }
            });
            $.ajax({
                type: 'get',
                url: ajax_front_realizations_url,
                success: function(output) {

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

                    if (output) {

                        var html = '';

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

                                html += '<div class="col-lg-6 col-12 p-2">';
                                html += '<div class="parent_realization">';
                                html += '<div class="w-100 realization_img" style="border-radius: 30px;height: 300px;background-image: url(' +route_home+ '/storage/public/realizations/' + element.image + ');background-position: center;background-size: cover;background-repeat: no-repeat">';
                                html += '<div class="overlay"></div>';
                                html += '</div>';
                                html += '<div class="fs-25 w-100 legend" style="position: absolute;top: 40%;text-align: center">'+element.type.libelle+'</div>';
                                html += '</div>';
                                html += '<a style="display: block;text-decoration: none;color: white" href="' +route_home+'/admin/realizations/item/'+element.id+'/'+element.slug+ '" class="mt-3"><span class="fs-20">' +element.title+ '</span><br><span class="text-muted">' +element.context+ '</span></a>';
                                html += '</div>';

                            }
                        }

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

                    }
                }
            });
        }

    </script>
    <script>

        init_front();

    </script>
@endpush