@extends('admin::layouts.master')

@push('styles')
    <style>
        table#country-table tr td a.button {
            display: none;
        }

        table#country-table tr:hover td a.button {
            display: inline-block;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <form class="" id="" action="" method="POST">
            @csrf
            <div class="card-header row gutters-5">
                <div class="col text-center text-md-left">
                    <h5 class="mb-md-0 h6">{{ translate('Countries') }}</h5>
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control" id="sort_country" name="filters[name]"
                        @isset(request()->get('filters')['name']) value="{{ request()->get('filters')['name'] }}" @endisset
                        placeholder="{{ translate('Type country name & Enter') }}">
                </div>

                <div class="col-md-1">

                    <a href="javascript:void(0)" onClick="initCountryCreation();"
                        class="btn btn-success">{{ translate('New') }}</a>
                </div>
            </div>
        </form>

        <div class="card-body">
            <table id="country-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th width="10%">SN</th>
                        <th>{{ translate('Name') }}</th>
                        <th>{{ translate('Code') }}</th>
                        <th>{{ translate('Languages') }}</th>
                        <th>{{ translate('Currency') }}</th>
                        <th>{{ translate('Currency Symbol') }}</th>
                        <th>{{ translate('Symbol Position') }}</th>
                        <th>{{ translate('Auth Type') }}</th>
                        <th>{{ translate('Decimal') }}</th>
                        <th>{{ translate('Status') }}</th>
                        <th>{{ translate('Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($countries as $key => $country)
                        <tr>
                            <td>{{ $key + 1 + ($countries->currentPage() - 1) * $countries->perPage() }}</td>
                            <td>
                                {{ $country->name }}




                            </td>
                            <td>{{ $country->code }}</td>
                            <td>
                                @foreach ($country->languages as $language)
                                    <span
                                        class="badge badge-inline badge-md bg-soft-dark mb-1">{{ $language->name }}</span>
                                @endforeach
                            </td>
                            <td>{{ $country->currency_name }}</td>
                            <td>{{ $country->currency_symbol }}</td>
                            <td>{{ $country->symbol_position }}</td>
                            <td>
                                @if ($country->auth_type)
                                    @if ($country->auth_type == 'auth_app')
                                        Auth App
                                    @elseif($country->auth_type == 'firebase')
                                        Firebase
                                    @elseif($country->auth_type == 'sms_auth')
                                        SMS Auth
                                    @endif
                                @else
                                    Nothing Selected
                                @endif
                            </td>
                            <td>{{ $country->decimal_points }}</td>

                            <td>
                                <label class="aiz-switch aiz-switch-success mb-0">
                                    <input onchange="updateStatus(this)" value="{{ $country->id }}" type="checkbox"
                                        >
                                    <span class="slider round"></span>
                                </label>


                            </td>
                            <td>
                                <a class="btn btn-soft-info btn-icon btn-circle btn-sm"
                                    href="{{ route('admin.countries.edit', $country->id) }}"
                                    title="{{ translate('Edit') }}">
                                    <i class="las la-edit"></i>
                                </a>
                                <a href="#" class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete"
                                    data-href="{{ route('admin.countries.delete', $country->id) }}"
                                    title="{{ translate('Delete') }}">
                                    <i class="las la-trash"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="aiz-pagination">
                {{ $countries->links() }}
            </div>
        </div>
    </div>

    <!--  -->

    <!--  -->
@endsection

@section('modal')
    @include('admin::modals.delete_modal')
    @include('admin::modals.confirm_modal')
    @include('country::modals.create_modal')
    <div id="edit-modal">
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            // Listen for changes on the auth_type select field
            $('select[name="auth_type"]').on('change', function() {
                // Check if the selected value is 'auth_app'
                if (this.value == 'auth_app') {
                    // Show the phone number input field and make it required
                    $('#phoneNumberInput').show();
                    $('#phone_number').attr('required', true);
                } else {
                    // Hide the phone number input field and remove the required attribute
                    $('#phoneNumberInput').hide();
                    $('#phone_number').removeAttr('required');
                }
            });
        });
    </script>
    @include('country::scripts.index_scripts')

    <script>
        function validateNumberInputNoDecimal(input) {
            // Remove all characters that are not digits
            input.value = input.value.replace(/[^0-9]/g, "");

            // Parse the input value as a float
            let value = parseFloat(input.value);

            // Check if the value exceeds the maximum allowed value
            if (value > 5) {
                // If it does, set the input value to the maximum allowed value
                input.value = 5;
            }

            // Ensure only valid numbers
            if (isNaN(value)) {
                input.value = '';
            }
        }
    </script>
@endsection