@extends('crudbooster::admin_template')
@push("bottom")
    <style>
        .panel-heading{
            padding: 8px 15px;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('/css/application.css') }}">

    <script type="text/javascript">
        let dash_right_progress = `
            <div class="alert alert-info">
                <strong>INFO!</strong> This info box indicates the rules for <code>"dash_right_progress"</code> data changes.
                <ol>
                    <li>Remember while sorting, you always have to separate by commas.</li>
                    <li>Sort all Translation columns must be at the same index like:
                        <li>
                            <span>[En-> family index is 0]</span>
                            <span>[De-> Familie index is 0]</span>
                            <span>[Pt-> família index is 0]</span>
                        </li>
                    </li>
                </ol>
            </div>
        `;
        $(document).ready( function () {
            const createdCell = function(cell) {
                if(cell.className == 'readonly') return;
                let original
                let text
                cell.setAttribute('spellcheck', false)
                cell.setAttribute('contenteditable', true)

                cell.addEventListener('mouseout', function(e) {
                    cell.setAttribute('contenteditable', true)
                })

                cell.addEventListener('focus', function(e) {
                    original = e.target.textContent
                    const row = table.row(e.target.parentElement)
                    if(row.data()[0] == 'dash_right_progress'){
                        $('#dash_right_progress_info').empty().append(dash_right_progress);
                    } else {
                        $('#dash_right_progress_info').empty();
                    }
                    let $cell = $(this);
                    $cell.addClass('reg');
                    let header = $cell.closest('table').find('th').eq($cell.index()).text();
                    $('.edit-modal').find('#lang').val(header[0] + header[1])
                    $('.edit-modal').find('#lang_code').val(row.data()[0])
                    $('.edit-modal').find('#lang_text').val(original)
                    $('.edit-modal').modal('toggle')
                })
            }

            table = $('#translation_table').DataTable({

                columnDefs: [
                    {
                        targets: '_all', "orderable": false,
                        createdCell: createdCell,
                    }
                ],
                "aaSorting": [], pageLength : 25
            });

            
            $('#new-translation').on('click',function(){
                console.log("Hello");
                $('#add_new_translation').modal('toggle').fadeIn()
            })
        });
    </script>
@endpush

@section('content')
<!-- Your html goes here -->
<div class='panel panel-default'>
    <div class='panel-heading eap-box'>
        <div class="dark-color">
            <h4 style="display: inline-block;"><b><i class="fa fa-language text-normal"></i> Tranlation Lists</b></h4>
            <div class="pull-right" >
                <button class="btn btn-success" id="new-translation"><p class="fa fa-language" style="margin: 0px">&nbsp;</p>Add New</button>
            </div>
        </div>
    </div>

    <div class='panel-body'>

        <div class="card-datatable table-responsive">
            <table class="table table-striped table-bordered" id="translation_table">
                <thead>
                    <tr>
                        <th>Lang Code</th>
                        @forelse ($languages as $lang)
                            <th>{{ucfirst($lang)}}-Translation</th>
                        @empty

                        @endforelse
                    </tr>
                </thead>
                <tbody>
                    @foreach (array_keys($lang_collection['de']) as $code)
                        <tr>
                            <td contenteditable="false" class="readonly">{{$code}}</td>
                            @foreach ($languages as $item)
                                <td>{{$lang_collection[$item][$code]}}</td>
                            @endforeach
                        </tr>
                    @endforeach

                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- edit translation section --}}
<div class="modal edit-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div id="dash_right_progress_info"></div>
        <h5 class="modal-title"><i class="fa fa-language text-normal"></i> Translation modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="bootbox-body">
            <form class="bootbox-form translationEditBox">
                <input type="hidden" id="lang">
                <input type="hidden" id="lang_code">
                <textarea class="bootbox-input bootbox-input-text form-control" rows="5" cols="80" id="lang_text" autocomplete="off" style="resize: none;" type="text"></textarea>
            </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="change_translation_file()">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{{-- Add translation section --}}
<div class="modal fade" id="add_new_translation" tabindex="-1" role="dialog" aria-labelledby="add_new_translation" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-primary">
            <div style="display: flex;justify-content: space-between;">
                <h5 class="modal-title" id="exampleModalLabel">Add New Translation Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
        <form method="POST" action="{{ route('translation.add_new_trans') }}">
            @csrf
            <div class="modal-body">
                <div class="form-group arrow-derection">
                    <label for="key_name" style="margin-bottom: 8px !important;">Keyword Name</label>
                    <input type="text" class="form-control" required id="key_name" name="keyword" placeholder="Key Name">
                </div>
                @foreach ($languages as $lang)
                    <div class="form-group arrow-derection">
                        <label for="{{ $lang }}_text" style="margin-bottom: 8px !important;">{{ $lang }}</label>
                        <input type="text" class="form-control" required id="{{ $lang }}_text" name="{{ $lang }}_name" placeholder="New {{ $lang }} Text">
                    </div>
                @endforeach
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary"> <p class="fa fa-plus" style="margin: 0px">&nbsp;</p>Add New</button>
            </div>
        </form>
      </div>
    </div>
  </div>

<script>
    function change_translation_file() {
        if ($('.edit-modal').find('#lang').val() != "" && $('.edit-modal').find('#lang_code').val() != "" != ''  && $('.edit-modal').find('#lang_text').val() != "" != '') {
            $.ajax({
                type: "POST",
                url: "{{ route('translation.update')}}",
                data: {
                    code:$('.edit-modal').find('#lang_code').val(),
                    lang:$('.edit-modal').find('#lang').val(),
                    text:$('.edit-modal').find('#lang_text').val()
                },
                beforeSend: function(){
                    swal({
                        title: `{{__('action.processing')}}`,
                        imageUrl: "{!! asset('/') !!}"+"ezgif.com-gif-maker.webp",
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        confirm: true,
                        showLoaderOnConfirm: true,
                        width: '300px',
                        height: '180px'
                    })
                },
                success: function(res) {
                    if(res.status == true){
                        $('.reg').text($('.edit-modal').find('#lang_text').val())
                        $('td').removeClass('reg');
                        swal.close();
                        $('.edit-modal').modal('hide');
                    } else console.log(res.error);

                }
            });
        }
    };
</script>
@endsection