@extends('Admin.layouts.app')
@section('content')

<div class="card mb-4">
    <div class="card-body">
        <form method="POST" action="{{ route('storeCountry') }}" id="countryForm">
            @csrf
            <div class="row">
                <div class="col-12 col-xl-2">
                    <div class="card mb-4">
                        <div class="card-body">
                            <ul class="nav flex-column tab">
                                @foreach($countries as $country)
                                    <li class="nav-item">
                                        <a href="javascript:void(0)" class="nav-link tablinks btn"
                                        data-country="{{ $country }}" id="{{ $loop->first ? 'defaultOpen' : '' }}">
                                            {{ $country }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-xl-10">
                    <div class="card mb-4">
                        <div class="card-body">
                            @foreach($countries as $country)
                                <div id="{{ $country }}" class="tabcontent" style="display: {{ $loop->first ? 'block' : 'none' }};">
                                    <h5>{{ $country }}</h5>
                                    <div class="form-group has-float-label">
                                        <input class="form-control" type="text"
                                            name="data[{{ $country }}][multi_num]"
                                            value="{{ $settings[$country]->multi_num ?? '' }}" required />
                                        <span>Multiplication number</span>
                                    </div>
                                    <div class="form-group has-float-label">
                                        <input class="form-control" type="text"
                                            name="data[{{ $country }}][per_num]"
                                            value="{{ $settings[$country]->per_num ?? '' }}" required />
                                        <span>Percentage number</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>                        
                    </div>
                    <button class="btn btn-primary mt-3" type="submit">Submit</button>
                </div>
            </div>
        </form>         
    </div>
</div>
<script>
$(document).ready(function () {
    $('.tablinks').on('click', function (e) {
        e.preventDefault();
        const cityName = $(this).data('country');
        $('.tabcontent').hide();
        $('.tablinks').removeClass("active bg-primary text-white");
        $('#' + cityName).show();
        $(this).addClass("active bg-primary text-white");
    });

    $('#defaultOpen').trigger('click');

    $('#countryForm').on('submit', function (e) {
        e.preventDefault();
        const formData = $(this).serialize();

        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: formData,
            success: function (res) {
                window.location.href = "/admin/dashboard";

            },
            error: function (xhr) {
                console.error(xhr.responseText);
                alert('Something went wrong!');
            }
        });
    });
});

</script>

@endsection