@extends('layouts.admin')

@section('content')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap4-toggle/css/bootstrap4-toggle.min.css">

<div class="card">
    <div class="card-header">
        <h4>{{ trans('cruds.general_settings.title') }}</h4>
    </div>
    <div class="card-body">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <form action="{{ route('admin.general_settings.update') }}" method="POST">
            @csrf
            @foreach ($settings as $key => $value)
                <div class="form-group">
                    <label>{{ ucwords(str_replace('_', ' ', $value->key)) }}</label>
                    @if($value->type == 'text')
                        <input type="text" name="{{ $value->key }}" value="{{ $value->value }}" class="form-control" required>
                    @elseif($value->type == 'dropdown')
                        <select name="{{ $value->key }}" class="form-control" required>
                            <option value="enable" {{ $value->value == 'enable' ? 'selected' : '' }}>Enable</option>
                            <option value="disable" {{ $value->value == 'disable' ? 'selected' : '' }}>Disable</option>
                        </select>  
                    @elseif($value->type == 'switch')
                        @php
                            $payment_option = json_decode($value->value, true);
                            $text = $payment_option['text'] ?? 'Cash Payment';
                            $currentValue = $payment_option['value'] ?? 0;
                        @endphp

                        <div class="payment-switch-wrapper">
                            <br><label>{{ $text }}</label>

                            <!-- Hidden input -->
                            <input type="hidden" name="{{ $value->key }}" class="payment-hidden" value='{{ json_encode(["text" => $text, "value" => $currentValue]) }}'>

                            <!-- Toggle -->
                            <input type="checkbox" class="toggle-flag" data-toggle="toggle" data-on="Enable" data-off="Disable" data-size="sm" data-onstyle="success" data-offstyle="danger" {{ $currentValue == 1 ? 'checked' : '' }} >
                        </div>
                    @endif
                </div>
            @endforeach
            {{-- <label>{{ trans('cruds.general_settings.add_new_setting') }}</label>
            <div class="form-group">
                <input type="text" name="new_key" placeholder="{{ trans('cruds.general_settings.key_placeholder') }}" class="form-control">
                <select name="type" class="form-control mt-2">
                    <option value="text">Text</option>
                    <option value="dropdown">Dropdown</option>
                    <option value="switch">Switch</option>
                </select>
                <input type="text" name="new_value" placeholder="{{ trans('cruds.general_settings.value_placeholder') }}" class="form-control mt-2">
            </div> --}}
            <div class="row">
                <div class="col-12 text-end">
                    <button class="btn btn-primary btn-primary-hover" type="submit">{{ trans('global.save') }}</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

    <script>
        $(document).ready(function () {
            $('.toggle-flag').on('change', function () {
                let $wrapper = $(this).closest('.payment-switch-wrapper');
                let $hiddenInput = $wrapper.find('.payment-hidden');

                if ($hiddenInput.length === 0) {
                    console.error('Hidden input not found');
                    return;
                }

                let data = JSON.parse($hiddenInput.val());

                // ✅ Enable = 1, Disable = 0
                data.value = $(this).prop('checked') ? 1 : 0;

                $hiddenInput.val(JSON.stringify(data));

                console.log('Updated value:', $hiddenInput.val());
            });
        });
    </script>
@endsection