@extends("common.layout")

@section("header")
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
@endsection

@section("content")
<h1>
    <a href="{{ route('config.country') }}">국가 설정</a>
</h1>
<div class="alert alert-info">
    드래그로 정렬순서를 조절할 수 있습니다. - 드래그를 마친 순간의 순서대로 정렬이 됩니다.
</div>

<section class="mb-3">
    <main>
        <form action="{{ route('config.country') }}" class="search-form" method="GET">
            @csrf
        
            <input type="hidden" name="order_by"
                @if (Request::get("order_by"))
                    value="{{ Request::get("order_by") }}"
                @else
                    value="id"
                @endif
            >
            <input type="hidden" name="sort"
                @if (Request::get("sort"))
                    value="{{ Request::get("sort") }}"
                @else
                    value="desc"
                @endif
            >
        
            <div class="search-input-wrap">
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="keyword">국가명, 코드</label>
                    <input type="text" name="keyword" id="keyword" class="form-control" value="{{ Request::get("keyword") }}">
                    <span class="input-group-text"><input type="checkbox" name="show_hidden" @checked(Request::get("show_hidden"))> 전체보이기</span>
                </div>
            </div>

            <button type="submit" class="btn btn-sm btn-outline-dark search-button"><i class="bi bi-search"></i> 조회</button>
        </form>
    </main>
</section>


<section>
    <header>
        국가 설정
    </header>
    <main>
        <table class="table table-striped table-hover" style="width: auto">
            <thead>
                <tr>
                    {!! \BaseHelper::sortHead('순서', 'sort', 'text-end', 'asc') !!}
                    {!! \BaseHelper::sortHead('국가명', 'name') !!}
                    {!! \BaseHelper::sortHead('코드', 'iso_code') !!}
                    {!! \BaseHelper::sortHead('전화코드', 'phone_code') !!}
                    {!! \BaseHelper::sortHead('노출여부', 'activated', 'text-center') !!}
                </tr>
            </thead>
            <tbody class="sortable">
            @foreach ($countries as $country)
                <tr @if (!$country->activated) class="deactivated" @endif>
                    <td class="text-end">{{ $country->sort }}</td>
                    <td>{{ $country->name }}</td>
                    <td>{{ $country->iso_code }}</td>
                    <td>
                        <div class="input-group">
                            <input type="text" class="form-control form-control-sm" name="phone_codes[{{ $country->id }}]" value="{{ $country->phone_code }}">
                            <button type="button" class="btn btn-sm btn-outline-secondary" disabled><i class="bi bi-check-lg"></i></button>
                        </div>
                    </td>
                    <td class="text-center">
                        <input type="hidden" name="order[]" value="{{ $country->id }}">
                        <input type="checkbox" name="activated[]" value="{{ $country->id }}" @checked($country->activated)>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </main>
</section>

@endsection

@push("script")
    <script>
        const sortable = new Sortable(document.querySelector('.sortable'), {
            animation: 150,
            onEnd: function (evt) {
                let order = '';
                document.querySelectorAll('input[name="order[]"]').forEach(function(input) {
                    order += input.value + ',';
                });

                let eurl = '{{ route('config.country.sort') }}?sort=' + order;
                fetch(eurl)
                    .then(response => response.text())
                    .then(result => {
                        window.location.reload();
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            }
        });

        document.addEventListener('DOMContentLoaded', () => {
            // activate
            const checkboxes = document.querySelectorAll('input[name="activated[]"]');

            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', event => {
                    const checkbox = event.target;
                    const isChecked = checkbox.checked;
                    const value = checkbox.value;
                    const row = checkbox.closest('tr');

                    if (isChecked) {
                        row.classList.remove('deactivated');
                    } else {
                        row.classList.add('deactivated');
                    }
                    
                    // Send the AJAX request
                    fetch('{{ route('config.country.activate') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({
                            id: value,
                            activated: isChecked
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        window.location.reload();
                    })
                    .catch((error) => {
                        console.error('Error:', error);
                    });
                });
            });

            // phone_codes
            const countryInputs = document.querySelectorAll('input[name^="phone_codes["]');

            countryInputs.forEach(input => {
                const button = input.nextElementSibling;
                let originalValue = input.value;

                input.addEventListener('input', function() {
                    button.disabled = this.value === originalValue;
                    button.classList.toggle('btn-outline-secondary', this.value === originalValue);
                    button.classList.toggle('btn-primary', this.value !== originalValue);
                });

                button.addEventListener('click', function() {
                    const countryId = input.name.match(/\d+/)[0];
                    const newValue = input.value;

                    fetch('{{ route("config.country.update") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({
                            id: countryId,
                            phone_code: newValue
                        })
                    })
                    .then(response => response.text())
                    .then(result => {
                        if (result === 'success') {
                            originalValue = newValue;
                            button.disabled = true;
                            button.classList.remove('btn-primary');
                            button.classList.add('btn-outline-secondary');
                            console.log('Country code updated successfully');
                        } else {
                            console.error('Failed to update country code');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
                });
            });
        });

    </script>
@endpush