@extends('layouts.bootstrap.app')

@push('head')
<style>
    /* Style the Armenian keyboard component */
    #armenian-keyboard-container {
      border: 1px solid #ccc;
      padding: 10px;
      background-color: #fff;
    }

    #armenian-keyboard {
      display: flex;
      flex-direction: column;
    }

    .key-row {
      display: flex;
      margin-bottom: 2px;
    }

    .key {
      width: 30px;
      height: 30px;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 5px;
      cursor: pointer;
    }

    .key:hover {
        backgroud: lightblue;
    }
</style>
@endpush

@section('header')
{{--     <div class="d-flex py-3 font-semibold text-gray-800 tw-text-xl tw-space-x-2">
        <div>
            {{ __('Home') }}
        </div>
    </div> --}}
@endsection

@section('content')
    <div class="container">
        @if ($username)
            @if ($pair)
                <div class="row justify-content-center">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">EN</div>

                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        {{ $pair->text_en }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">HYW</div>

                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        {{ $pair->text_hyw }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center mt-3">
                    <div class="col-4 text-center">
                        <a href="#" id="wrong" class="w-25 btn btn-danger">Wrong<br>Սխալ</a>
                        <a href="#" id="edit" class="w-25 btn btn-info text-white">Edit<br>Շտկել</a>
                        <a href="#" id="correct" class="w-25 btn btn-success text-white">Correct<br>Ճիշդ</a>
                    </div>
                </div>
                <div class="corrections_row row justify-content-center mt-3" style="display: none;">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">EN</div>

                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <textarea name="correction_en_{{ time() + rand() }}" class="form-control" id="correction_en" cols="30" rows="5">{{ $pair->text_en }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">HYW</div>

                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <textarea name="correction_hyw_{{ time() + rand() }}" class="form-control" id="correction_hyw" cols="30" rows="5">{{ $pair->text_hyw }}</textarea>
                                    </div>
                                    <div class="col-12">

                                        <!-- The Armenian keyboard component -->
                                        <div id="armenian-keyboard-container" style="display: block; margin-top: 1rem;">
                                          {{-- <h2>Armenian Keyboard</h2> --}}
                                          <div id="armenian-keyboard">
                                            <div class="key-row">
                                              <div class="key">է</div>
                                              <div class="key">թ</div>
                                              <div class="key">փ</div>
                                              <div class="key">ձ</div>
                                              <div class="key">ջ</div>
                                              <div class="key">և</div>
                                              <div class="key">ր</div>
                                              <div class="key">չ</div>
                                              <div class="key">ճ</div>
                                              <div class="key">-</div>
                                              <div class="key">ժ</div>
                                            </div>
                                            <div class="key-row">
                                              <div class="key">ք</div>
                                              <div class="key">ո</div>
                                              <div class="key">ե</div>
                                              <div class="key">ռ</div>
                                              <div class="key">տ</div>
                                              <div class="key">ը</div>
                                              <div class="key">ւ</div>
                                              <div class="key">ի</div>
                                              <div class="key">օ</div>
                                              <div class="key">պ</div>
                                              <div class="key">խ</div>
                                              <div class="key">ծ</div>
                                            </div>
                                            <div class="key-row">
                                                <div class="key">ա</div>
                                                <div class="key">ս</div>
                                                <div class="key">դ</div>
                                                <div class="key">ֆ</div>
                                                <div class="key">գ</div>
                                                <div class="key">հ</div>
                                                <div class="key">յ</div>
                                                <div class="key">կ</div>
                                                <div class="key">լ</div>
                                                <div class="key">;</div>
                                                <div class="key">՛</div>
                                                <div class="key">շ</div>
                                              </div>
                                              <div class="key-row">
                                                <div class="key">զ</div>
                                                <div class="key">ղ</div>
                                                <div class="key">ց</div>
                                                <div class="key">վ</div>
                                                <div class="key">բ</div>
                                                <div class="key">ն</div>
                                                <div class="key">մ</div>
                                                <div class="key">,</div>
                                                <div class="key">․</div>
                                                <div class="key">/</div>
                                              </div>
                                          </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="corrections_row row justify-content-center mt-3" style="display: none;">
                    <div class="col-4 text-center">
                        <a href="#" id="save_edit" class="w-25 btn btn-primary">Save<br>Պահել</a>
                    </div>
                </div>
            @else
                Done
            @endif
        @else
            <div class="row justify-content-center">
                <div class="col-8">
                    <div class="alert alert-light border" role="alert">
                        <p><b>Hello and thank you for contributing for my master's thesis project.</b></p>
                        <p>Please read both sentences and determine if the pair is a direct translation of each other. It can either be:</p>
                        <ul class="mb-0">
                            <li class="text-danger">Wrong: The sentences are talking about different topics and it requires too much work for editing, i.e they are not translations of each other.</li>
                            <li class="text-info">Edit: The sentences are almost about the same topic but they contain different amount of information. In this case please delete the extra information from that side so that they contain the same amount of information.</li>
                            <li class="text-success">Correct: The sentences are direct translations of each other and they contain the same amount of information.</li>
                        </ul>
                    </div>
                </div>
                <div class="col-8">
                    <div class="alert alert-light border" role="alert">
                        <p><b>Բարեւ։ Կ'ուզեմ խնդրել իմ կանխայայտ շնորհակալութիւններս ձեր թանկագին օգնութեանը համար իմ մագիսդրոսական թէզիս մէջ։</b></p>
                        <p>Ձեր արջեւը պիտի գայ զոյգ մը նախադասութիւն․ մէկը անգլերէն՝ մէկն ալ արեւմտահայերէն։ Ձեզմէ խնդրանքս ան է, որ դուք ստուգէիք այս զոյքը թէ՝</p>

                        <ul class="mb-0">
                            <li class="text-danger">ՍԽԱԼ թարգմանութիւն է՝ այսինքն նախադասութիւնները տարբեր բաներ կը պատմեն։</li>
                            <li class="text-info">Պէտք է որ ՇՏԿՈՒԻ՝ այսինքն նախադասութիւնները մօտաւորապէս նոյն բանը կը պատմեն, բայց կը պարունակեն կարգ մը սխալներ եւ կամ տարբեր չափով տեղեկութիւններ, որ քանի մը դիւրին սրբագրութեամբ անոնք կրնան վերածուիլ ճիշդ թարգմանութեան մը։</li>
                            <li class="text-success">ՃԻՇԴ թարգմանութիւն է՝ այսինքն նախադասութիւնները նոյն բանը կը պատմեն եւ կը պարունակեն նոյնչափ տեղեկութիւն։</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">Please enter your name</div>

                        <div class="card-body">
                            <div class="row">
                                <div class="col-auto">
                                    <form id="username_form" action="{{ route('front.save-username') }}" autocomplete="off">
                                        <input type="text" name="new_username" autocomplete="off" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                                    </form>
                                </div>
                                <div class="col-auto">
                                    <button type="submit" form="username_form" class="btn btn-primary">Save</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('scripts')
    <script type="module">
        $(function() {
            $('#edit').on('click', function(event) {
                event.preventDefault();

                $('.corrections_row').slideDown();
            });

            $('#save_edit').on('click', function(event) {
                event.preventDefault();

                $.ajax({
                    url: '/pairs/{{ $pair->id }}/vote',
                    type: 'POST',
                    data: {
                        result: 'edit',
                        correction_en: $('#correction_en').val(),
                        correction_hyw: $('#correction_hyw').val(),
                    },
                    complete: function (jqXHR) {
                        ajax_complete_handler(jqXHR);

                        window.location.reload();
                    },
                });
            });

            $('#wrong').on('click', function(event) {
                event.preventDefault();

                $.ajax({
                    url: '/pairs/{{ $pair->id }}/vote',
                    type: 'POST',
                    data: {
                        result: 'wrong',
                    },
                    complete: function (jqXHR) {
                        ajax_complete_handler(jqXHR);

                        window.location.reload();
                    },
                });
            });

            $('#correct').on('click', function(event) {
                event.preventDefault();

                $.ajax({
                    url: '/pairs/{{ $pair->id }}/vote',
                    type: 'POST',
                    data: {
                        result: 'correct',
                    },
                    complete: function (jqXHR) {
                        ajax_complete_handler(jqXHR);

                        window.location.reload();
                    },
                });
            });

            $('.key').on('click', function () {
                let oldVal = $('#correction_hyw').val();
                $('#correction_hyw').val(oldVal + $(this).text());
            });
        });
    </script>
@endpush