@extends('backoffice.layouts.app')
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    {{-- HEADER --}}
    <div class="card border-0 shadow-sm overflow-hidden position-relative mb-4 glass-card">

        <div class="position-absolute top-0 end-0" style="
                width:240px;
                height:240px;
                background:
                radial-gradient(circle,
                rgba(99,102,241,.14) 0%,
                transparent 72%);
                pointer-events:none;">
        </div>

        <div class="card-body position-relative z-1 d-flex justify-content-between align-items-center flex-wrap gap-3">

            <div>

                <h5 class="mb-1 text-white fw-semibold">
                    API Settings
                </h5>

                <small class="text-body-secondary">
                    Manage API games provider and payment gateway credentials
                </small>

            </div>

            <span class="badge rounded-pill bg-label-primary px-3 py-2">
                System / API Settings
            </span>

        </div>

    </div>

    {{-- ALERT --}}
    @if (session('success'))

    <div class="alert alert-success alert-dismissible" role="alert">

        {{ session('success') }}

        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>

    </div>

    @endif

    @if (session('error'))

    <div class="alert alert-danger alert-dismissible" role="alert">

        {{ session('error') }}

        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>

    </div>

    @endif

    @if ($errors->any())

    <div class="alert alert-danger" role="alert">

        <div class="fw-semibold mb-1">
            Please check the form again.
        </div>

        <ul class="mb-0 ps-3">

            @foreach ($errors->all() as $error)

            <li>{{ $error }}</li>

            @endforeach

        </ul>

    </div>

    @endif

    <div class="row g-4">

        {{-- API GAMES --}}
        <div class="col-xl-6">

            <div class="card border-0 shadow-sm h-100 overflow-hidden glass-card ">

                <div class="card-header card-header-custom">

                    <h5 class="card-title mb-1 text-white">
                        API Games
                    </h5>

                    <small class="text-body-secondary">
                        Update provider API key, secret, endpoint, and status
                    </small>

                </div>

                <form method="POST" action="{{ route('admin.settings.apigames.update') }}" class="js-loading-form">

                    @csrf

                    <div class="card-body">

                        {{-- PROVIDER --}}
                        <div class="mb-3">

                            <label for="apiSelect" class="form-label">

                                Select Provider

                            </label>

                            <select id="apiSelect" class="form-select" required>

                                @forelse ($apiGames as $index => $api)

                                <option value="{{ $api->id }}" data-key="{{ $api->api_key }}" data-secret="{{ $api->secret_key }}" data-url="{{ $api->urlRequest }}" data-status="{{ $api->status }}" {{ $index === 0 ? 'selected' : '' }}>

                                    {{ $api->provider }}

                                </option>

                                @empty

                                <option value="">
                                    No provider available
                                </option>

                                @endforelse

                            </select>

                            <input type="hidden" name="id" id="api_id" value="{{ $apiGames[0]->id ?? '' }}">

                        </div>

                        {{-- API KEY --}}
                        <div class="mb-3">

                            <label for="api_key" class="form-label">

                                API Key

                            </label>

                            <input type="text" name="api_key" id="api_key" class="form-control @error('api_key') is-invalid @enderror" value="{{ old('api_key') }}" maxlength="255" required>

                            @error('api_key')

                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>

                            @enderror

                        </div>

                        {{-- SECRET --}}
                        <div class="mb-3">

                            <label for="api_secret" class="form-label">

                                Secret Key

                            </label>

                            <div class="input-group input-group-merge">

                                <input type="password" name="secret_key" id="api_secret" class="form-control @error('secret_key') is-invalid @enderror" maxlength="255" required>

                                <button class="input-group-text cursor-pointer js-toggle-password" type="button">

                                    <i class="icon-base ti tabler-eye-off"></i>

                                </button>

                            </div>

                            @error('secret_key')

                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>

                            @enderror

                        </div>

                        {{-- URL --}}
                        <div class="mb-3">

                            <label for="api_url" class="form-label">

                                URL Request

                            </label>

                            <input type="url" name="urlRequest" id="api_url" class="form-control @error('urlRequest') is-invalid @enderror" value="{{ old('urlRequest') }}" maxlength="255" required>

                            @error('urlRequest')

                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>

                            @enderror

                        </div>

                        {{-- STATUS --}}
                        <div>

                            <label for="api_status" class="form-label">

                                Status

                            </label>

                            <select name="status" id="api_status" class="form-select @error('status') is-invalid @enderror" required>

                                <option value="1">
                                    Active
                                </option>

                                <option value="0">
                                    Disabled
                                </option>

                            </select>

                            @error('status')

                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>

                            @enderror

                        </div>

                    </div>

                    <div class="card-footer border-0 bg-transparent d-flex justify-content-end">

                        <button type="submit" class="btn btn-primary px-4 js-submit-btn">

                            <span class="submit-text">

                                <i class="ti tabler-device-floppy me-1"></i>
                                Save API

                            </span>

                            <span class="submit-loading d-none">

                                <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true">
                                </span>

                                Saving...

                            </span>

                        </button>

                    </div>

                </form>

            </div>

        </div>

        {{-- PAYMENT --}}
        <div class="col-xl-6">

            <div class="card border-0 shadow-sm h-100 overflow-hidden glass-card payment-card">

                <div class="card-header card-header-custom">

                    <h5 class="card-title mb-1 text-white">
                        Payment Gateway
                    </h5>

                    <small class="text-body-secondary">
                        Update payment API credential, endpoint, and gateway status
                    </small>

                </div>

                <form method="POST" action="{{ route('admin.settings.payapi.update') }}" class="js-loading-form">

                    @csrf

                    <div class="card-body">

                        {{-- PAYMENT SELECT --}}
                        <div class="mb-3">

                            <label for="paySelect" class="form-label">

                                Select Payment

                            </label>

                            <select id="paySelect" class="form-select" required>

                                @forelse ($payApis as $pay)

                                <option value="{{ $pay->id }}" data-key="{{ $pay->api_key }}" data-secret="{{ $pay->secret_key }}" data-url="{{ $pay->endpoint }}" data-status="{{ $pay->status }}">

                                    {{ $pay->name }}

                                </option>

                                @empty

                                <option value="">
                                    No payment gateway available
                                </option>

                                @endforelse

                            </select>

                            <input type="hidden" name="id" id="pay_id" value="{{ $payApis[0]->id ?? '' }}">

                        </div>

                        {{-- API KEY --}}
                        <div class="mb-3">

                            <label for="pay_key" class="form-label">

                                API Key

                            </label>

                            <input type="text" name="pay_api_key" id="pay_key" class="form-control @error('pay_api_key') is-invalid @enderror" value="{{ old('pay_api_key') }}" maxlength="255" required>

                            @error('pay_api_key')

                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>

                            @enderror

                        </div>

                        {{-- SECRET --}}
                        <div class="mb-3">

                            <label for="pay_secret" class="form-label">

                                Secret Key

                            </label>

                            <div class="input-group input-group-merge">

                                <input type="password" name="pay_secret_key" id="pay_secret" class="form-control @error('pay_secret_key') is-invalid @enderror" maxlength="255" required>

                                <button class="input-group-text cursor-pointer js-toggle-password" type="button">

                                    <i class="icon-base ti tabler-eye-off"></i>

                                </button>

                            </div>

                            @error('pay_secret_key')

                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>

                            @enderror

                        </div>

                        {{-- ENDPOINT --}}
                        <div class="mb-3">

                            <label for="pay_url" class="form-label">

                                Endpoint

                            </label>

                            <input type="url" name="endpoint" id="pay_url" class="form-control @error('endpoint') is-invalid @enderror" value="{{ old('endpoint') }}" maxlength="255" required>

                            @error('endpoint')

                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>

                            @enderror

                        </div>

                        {{-- STATUS --}}
                        <div>

                            <label for="pay_status" class="form-label">

                                Status

                            </label>

                            <select name="pay_status" id="pay_status" class="form-select @error('pay_status') is-invalid @enderror" required>

                                <option value="active">
                                    Active
                                </option>

                                <option value="nonactive">
                                    Non Active
                                </option>

                            </select>

                            @error('pay_status')

                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>

                            @enderror

                        </div>

                    </div>

                    <div class="card-footer border-0 bg-transparent d-flex justify-content-end">

                        <button type="submit" class="btn btn-success px-4 js-submit-btn">

                            <span class="submit-text">

                                <i class="ti tabler-device-floppy me-1"></i>
                                Save Payment

                            </span>

                            <span class="submit-loading d-none">

                                <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true">
                                </span>

                                Saving...

                            </span>

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {

        function setValue(id, value) {

            const element =
                document.getElementById(id);

            if (element) {
                element.value = value ?? '';
            }
        }

        function selectedOption(select) {

            if (!select || select.selectedIndex < 0) {
                return null;
            }

            return select.options[
                select.selectedIndex
            ] || null;
        }

        // =========================
        // API GAMES
        // =========================
        const apiSelect =
            document.getElementById('apiSelect');

        function loadApiData() {

            const selected =
                selectedOption(apiSelect);

            if (!selected || !selected.value) return;

            setValue('api_id', selected.value);
            setValue('api_key', selected.dataset.key);
            setValue('api_secret', selected.dataset.secret);
            setValue('api_url', selected.dataset.url);
            setValue('api_status', selected.dataset.status || '0');

        }

        apiSelect?.addEventListener(
            'change',
            loadApiData
        );

        loadApiData();

        // =========================
        // PAYMENT
        // =========================
        const paySelect =
            document.getElementById('paySelect');

        function loadPayData() {

            const selected =
                selectedOption(paySelect);

            if (!selected || !selected.value) return;

            setValue('pay_id', selected.value);
            setValue('pay_key', selected.dataset.key);
            setValue('pay_secret', selected.dataset.secret);
            setValue('pay_url', selected.dataset.url);

            setValue(
                'pay_status',
                selected.dataset.status === 'active' ?
                'active' :
                'nonactive'
            );

        }

        paySelect?.addEventListener(
            'change',
            loadPayData
        );

        loadPayData();

        // =========================
        // TOGGLE PASSWORD
        // =========================
        document.querySelectorAll('.js-toggle-password')
            .forEach(function(toggle) {

                toggle.addEventListener('click', function() {

                    const input =
                        this.closest('.input-group')
                        ?.querySelector('input');

                    const icon =
                        this.querySelector('i');

                    if (!input || !icon) return;

                    const visible =
                        input.type === 'text';

                    input.type =
                        visible ? 'password' : 'text';

                    icon.classList.toggle(
                        'tabler-eye',
                        !visible
                    );

                    icon.classList.toggle(
                        'tabler-eye-off',
                        visible
                    );

                });

            });

        // =========================
        // BUTTON LOADING
        // =========================
        document.querySelectorAll('.js-loading-form')
            .forEach(function(form) {

                form.addEventListener('submit', function() {

                    const btn =
                        form.querySelector('.js-submit-btn');

                    if (!btn) return;

                    btn.disabled = true;

                    btn.querySelector('.submit-text')
                        ?.classList.add('d-none');

                    btn.querySelector('.submit-loading')
                        ?.classList.remove('d-none');

                });

            });

    });
</script>
@endpush
@endsection