@extends('tenant.settings.general.all-general-settings')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.general_settings') => route('tenant.settings.general.show-page', ['type' => 'company-information']),
            __('breadcrumb.currencies') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'settings.general.currencies'])
@endsection

@section('settings-content')
    <div class="inner-content-layout form-bg-color p-4 rounded-form">

        <div class="d-flex align-items-center justify-content-between">
            <h4>@lang('settings/general/currencies.currencies')</h4>
        </div>

        <div>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>@lang('settings/general/currencies.currency')</th>
                        <th> @lang('settings/general/currencies.arabic_symbole')</th>
                        <th>@lang('settings/general/currencies.english_symbole')</th>
                        <th> @lang('settings/general/currencies.countries')</th>
                        <th>
                            @lang('settings/general/currencies.exchange_rate') <x-tooltip
                                content="{{trans('settings/general/currencies.exchange_rate_content')}}"></x-tooltip>
                            <br>
                            <button class="btn btn-sm btn-outline-light rounded-pill" id="get-today-currencies-btn">
                                @lang('settings/general/currencies.fetch_today\'s_rate')
                            </button>
                        </th>
                        <th> @lang('settings/general/currencies.procedures')</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse ($currencies as $currency)
                        @php $is_default = $default_currency_id == $currency->id; @endphp

                        <tr data-currencyId="{{ $currency->id }}">
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $currency->name }}</td>
                            <td>{{ $currency->ar_symbol }}</td>
                            <td>{{ $currency->symbol }}</td>
                            <td>
                                @foreach ($currency->countries as $country)
                                    <span>- {{ $country->ar_name }}</span> <br>
                                @endforeach
                            </td>
                            <td>
                                <input type="number" min="0" class="form-control" name="exchange_price" step="0.00001"
                                    value="{{ number_format($currency->exchange_price, 5, '.', '') }}"
                                    placeholder="{{__('settings/general/currencies.exchange_price')}}" {{ $is_default ? 'disabled readonly' : '' }}>
                            </td>

                            <td style="max-width: 150px;">
                                @if (!$is_default)
                                    <button type="button" class="btn orange-btn save-currency-btn">@lang('general.save')</button>
                                @else
                                    <span> @lang('settings/general/currencies.default_currency')</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="100%">
                                @lang('settings/general/currencies.no_currencies_yet')
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            <form action="{{ route('tenant.settings.general.currencies.get-today-prices') }}" method="post"
                id="getTodayPricesForm">
                @csrf
            </form>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(() => {
            $('.save-currency-btn').on('click', function() {
                const tr = $(this).closest('tr');
                const parent = $(this).closest('td');
                const currency_id = tr.attr('data-currencyId');
                const exchange_price = tr.find('input[name="exchange_price"]').val();

                $.confirm({
                    title: $lang(
                            'settings.general.currencies.are_you_sure_you_want_to_save_the_changes'
                            ),
                    content: $lang('settings.general.currencies.your_changes_will_be_saved'),
                    type: "blue",
                    buttons: {
                        ok: {
                            text: $lang('settings.general.currencies.yes'),
                            btnClass: "btn orange-btn",
                            keys: ["enter"],
                            action: function() {
                                let formData = new FormData();
                                formData.append('_method', 'PUT');
                                formData.append('exchange_price', exchange_price);

                                axios.post(`/settings/general/currencies/${currency_id}`,
                                        formData)
                                    .then((response) => {
                                        const message = $(
                                            `<span class="text-success temp-show">${response.data.message}</span>`
                                        );
                                        parent.append(message);

                                    })
                                    .catch((error) => {
                                        const message = $(
                                            `<span class="text-danger temp-show">حدث خطأ ما !</span>`
                                        );
                                        parent.append(message);
                                    })
                                    .finally(() => {
                                        setTimeout(() => {
                                            $('.temp-show').remove();
                                        }, 3000);
                                    });
                            },
                        },
                        cancel: {
                            text: $lang('settings.general.currencies.cancle'),
                            btnClass: "btn-default",
                            keys: ["esc"],
                        },
                    },
                });
            });


            $('#get-today-currencies-btn').on('click', function() {
                $.confirm({
                    title: text: $lang(
                        'settings.general.currencies.are_you_sure_you_want_to_update_currency_rates_for_today'
                        ),
                    ,
                    content: $lang(
                        'settings.general.currencies.s_rates_will_be_fetched_based_on_the_defined_base_currency'
                        ),
                    type: "red",
                    buttons: {
                        ok: {
                            text: @lang('settings/general/currencies.yes'),
                            btnClass: "btn orange-btn",
                            keys: ["enter"],
                            action: function() {
                                $('#getTodayPricesForm').trigger('submit');
                            },
                        },
                        cancel: {
                            text: $lang('settings.general.currencies.cancle'),
                            btnClass: "btn-default",
                            keys: ["esc"],
                        },
                    },
                });
            });
        });
    </script>
@endpush