@extends('layouts.admin')

@section('styles')
<style>
/* ===== Supported Currencies Select2 Style ===== */
.select2-container--default .select2-selection--multiple {
    min-height: 42px;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    padding: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 6px;
}

.select2-container--default
.select2-selection--multiple
.select2-selection__choice {
    background-color: #6366f1;
    border: none;
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 13px;
    margin: 3px 4px;
}

.select2-selection__choice__remove {
    color: #fff;
    margin-right: 6px;
    font-weight: bold;
    cursor: pointer;
}

.select2-search__field {
    min-width: 80px;
    font-size: 14px;
}
</style>
@endsection

@section('breadcrumb')
<div class="main-breadcrumb d-flex flex-wrap align-items-center my-4 gap-3">
    <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-16">{{ tr('settings') }}</h2>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li><i class="ri-home-4-line me-2 text-primary"></i></li>
            <li class="breadcrumb-item">
                <a href="{{ route('admin.dashboard') }}">{{ tr('home') }}</a>
            </li>
            <li class="breadcrumb-item active">{{ tr('settings') }}</li>
        </ol>
    </nav>
</div>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="card-title mb-0">{{ tr('settings') }}</h5>
    </div>

    <div class="card-body">
        <form action="{{ route('admin.settings.update') }}"
              method="POST"
              enctype="multipart/form-data">
            @csrf
            @method('PUT')

            @php
                $fileSettings = ['site_logo', 'site_icon'];
                $remitterSettings = ['remitter_kyc', 'remitter_kyb'];

                $supportedSelected = json_decode(
                    collect($settings)->get('supported_currencies'),
                    true
                ) ?? [];

                $supportedSelected = array_unique($supportedSelected);
                $supportedCurrencies = array_unique($supported_currencies);
            @endphp

            @foreach($settings as $key => $value)
                @if($key === 'supported_currencies')
                    @continue
                @endif

                @php
                    $label = ucwords(str_replace('_', ' ', $key));
                    $type = 'text';

                    if (str_contains($key, 'email')) $type = 'email';
                    elseif (str_contains($key, 'url')) $type = 'url';
                    elseif (is_numeric($value)) $type = 'number';
                @endphp

                <div class="mb-3">
                    <label class="form-label">{{ tr($key) ?? $label }}</label>

                    @if(in_array($key, $fileSettings))
                        @if($value)
                            <div class="mb-2">
                                <img src="{{ $value }}" alt="{{ $key }}" style="max-height:60px">
                            </div>
                        @endif
                        <input type="file" class="form-control" name="{{ $key }}">

                    @elseif(in_array($key, $remitterSettings))
                        <select class="form-control" name="{{ $key }}">
                            <option value="{{ REMITTER_AUTO_APPROVED }}"
                                {{ old($key, $value) == REMITTER_AUTO_APPROVED ? 'selected' : '' }}>
                                {{ tr('auto_approved') }}
                            </option>
                            <option value="{{ REMITTER_MANUAL_APPROVAL }}"
                                {{ old($key, $value) == REMITTER_MANUAL_APPROVAL ? 'selected' : '' }}>
                                {{ tr('manual_approval') }}
                            </option>
                        </select>

                    @elseif($key === 'kyc_service')
                        @php $kyc_services = kyc_services(); @endphp
                        <select class="form-control" name="{{ $key }}">
                            @foreach($kyc_services as $service_key => $service_value)
                                <option value="{{ $service_key }}"
                                    {{ old($key, $value) == $service_key ? 'selected' : '' }}>
                                    {{ $service_value }}
                                </option>
                            @endforeach
                        </select>

                    @elseif($key === 'compliance_panel')
                        <select class="form-control" name="{{ $key }}">
                            <option value="1" {{ old($key, $value) == ENABLED ? 'selected' : '' }}>
                                {{ tr('enabled') }}
                            </option>
                            <option value="0" {{ old($key, $value) == DISABLED ? 'selected' : '' }}>
                                {{ tr('disabled') }}
                            </option>
                        </select>

                    @elseif(strlen($value) > 150)
                        <textarea class="form-control" name="{{ $key }}" rows="3">{{ old($key, $value) }}</textarea>
                    @else
                        <input type="{{ $type }}"
                               class="form-control"
                               name="{{ $key }}"
                               value="{{ old($key, $value) }}">
                    @endif
                </div>
            @endforeach

           <!-- <div class="mb-3 currency-wrapper">
                <label class="form-label">{{ tr('supported_currencies') }}</label>

                <div id="currencyBox" class="currency-box">
                    @foreach($supportedSelected as $currency)
                        <span class="currency-badge" data-currency="{{ $currency }}">
                            {{ $currency }}
                            <span class="remove-currency">&times;</span>
                            <input type="hidden" name="supported_currencies[]" value="{{ $currency }}">
                        </span>
                    @endforeach

                    <span class="add-placeholder">{{ tr('select_currency') }}</span>
                </div>

                <ul id="currencyDropdown" class="currency-dropdown d-none">
                    @foreach($supportedCurrencies as $currency)
                        @unless(in_array($currency, $supportedSelected))
                            <li class="currency-option" data-currency="{{ $currency }}">
                                {{ $currency }}
                            </li>
                        @endunless
                    @endforeach
                </ul>
            </div> -->

            <div class="d-flex justify-content-end mt-3">
                <button class="btn btn-primary">
                    {{ tr('update_settings') }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection


@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {

    const box = document.getElementById('currencyBox');
    const drop = document.getElementById('currencyDropdown');
    const placeholder = box.querySelector('.add-placeholder');

    const togglePlaceholder = () => {
        placeholder.style.display =
            box.querySelectorAll('.currency-badge').length ? 'none' : 'inline';
    };

    togglePlaceholder();

    box.addEventListener('click', e => {
        e.stopPropagation();
        drop.classList.remove('d-none');

        if (!e.target.classList.contains('remove-currency')) return;

        const badge = e.target.closest('.currency-badge');
        const currency = badge.dataset.currency;

        badge.remove();

        drop.insertAdjacentHTML(
            'beforeend',
            `<li class="currency-option" data-currency="${currency}">
                ${currency}
            </li>`
        );

        togglePlaceholder();
    });

    drop.addEventListener('click', e => {
        e.stopPropagation();
        if (!e.target.classList.contains('currency-option')) return;

        const currency = e.target.dataset.currency;

        box.insertAdjacentHTML(
            'beforeend',
            `<span class="currency-badge" data-currency="${currency}">
                ${currency}
                <span class="remove-currency">&times;</span>
                <input type="hidden" name="supported_currencies[]" value="${currency}">
            </span>`
        );

        e.target.remove();
        drop.classList.add('d-none');
        togglePlaceholder();
    });

    document.addEventListener('click', () => {
        drop.classList.add('d-none');
    });

});
</script>
@endsection