@extends('layouts.app')
@php
    $title = 'Settings Panel';
@endphp
@section('title', $title)
@section('content')
    <link rel="stylesheet" href="{{ asset('css/summernote.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/bootstrap-tagsinput.css') }}">
    <style>
        .radio-group {
            display: flex;
            align-items: center;
            gap: 20px;
            /* Adjust spacing between radio options */
            margin-top: 5px;
        }

        .radio-option {
            display: flex;
            align-items: center;
            gap: 5px;
            /* Space between radio button and label text */
        }
    </style>
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ $title }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">{{ $title }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">{{ $title }}</h3>
                        </div>

                        <form action="{{ route('setting.update') }}" method="POST">
                            @csrf

                            <div class="card-body">
                                <h4>Settings Details</h4>
                                <div class="row">
                                    @foreach ($settings as $setting)
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label for="setting_{{ $setting->id }}" class="font-weight-bold">
                                                    {{ ucfirst($setting->display_name) }}
                                                </label>

                                                @if ($setting->name === 'payment gateway charges')
                                                    <div class="input-group">
                                                        <input type="text" name="settings[{{ $setting->id }}]"
                                                            id="setting_{{ $setting->id }}" class="form-control"
                                                            value="{{ old('settings.' . $setting->id, $setting->value) }}"
                                                            style="font-size: 16px; width: 120px;">
                                                        <div class="input-group-append">
                                                            <span class="input-group-text">%</span>
                                                        </div>
                                                    </div>
                                                @elseif ($setting->name === 'cash')
                                                    <div class="custom-control custom-switch mt-2">
                                                        <input type="hidden" name="settings[{{ $setting->id }}]"
                                                            value="0"> <!-- Hidden fallback -->
                                                        <input type="checkbox" class="custom-control-input cash-toggle"
                                                            id="setting_{{ $setting->id }}"
                                                            name="settings[{{ $setting->id }}]" value="1"
                                                            {{ old('settings.' . $setting->id, $setting->value) == '1' ? 'checked' : '' }}>
                                                        <label class="custom-control-label"
                                                            for="setting_{{ $setting->id }}"></label>
                                                    </div>
                                                    @elseif ($setting->name === 'email')
                                                    <div class="input-group">
                                                        <input type="text" name="settings[{{ $setting->id }}]"
                                                            id="setting_{{ $setting->id }}" class="form-control"
                                                            value="{{ old('settings.' . $setting->id, $setting->value) }}"
                                                            style="font-size: 16px; width: 120px;">
                                                    </div>
                                                @elseif ($setting->name == 'otp_type')
                                                    <div class="form-group">
                                                        <div class="radio-group">
                                                            <div class="radio-option">
                                                                <input type="radio" id="sms_twilio_{{ $setting->id }}"
                                                                    name="settings[{{ $setting->id }}]" value="sms"
                                                                    {{ old('settings.' . $setting->id, $setting->value) == 'sms' ? 'checked' : '' }}>
                                                                <label for="sms_twilio_{{ $setting->id }}"
                                                                    style="margin: 0;">SMS Twilio</label>
                                                            </div>
                                                            <div class="radio-option">
                                                                <input type="radio" id="email_{{ $setting->id }}"
                                                                    name="settings[{{ $setting->id }}]" value="email"
                                                                    {{ old('settings.' . $setting->id, $setting->value) == 'email' ? 'checked' : '' }}>
                                                                <label for="email_{{ $setting->id }}"
                                                                    style="margin: 0;">Email</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @else
                                                    <input type="text" name="settings[{{ $setting->id }}]"
                                                        id="setting_{{ $setting->id }}" class="form-control"
                                                        value="{{ old('settings.' . $setting->id, $setting->value) }}"
                                                        style="font-size: 16px;">
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                    <div class="col-sm-6">
                                        <div class="card shadow-sm border rounded p-3 mb-3">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <label class="font-weight-bold mb-1">Current Cache Size</label>
                                                    <div id="cache_size" class="text-muted h5 mb-0">{{ $cacheSize }}
                                                    </div>
                                                </div>
                                                <button type="button" class="btn btn-outline-danger btn-sm"
                                                    id="clear_cache">
                                                    <i class="fa fa-trash"></i> Clear Cache
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary">Cancel</a>
                                <button type="submit" class="btn btn-primary">Update Settings</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('scripts')
    <script src="{{ asset('js/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('js/additional-methods.min.js') }}"></script>
    <script src="{{ asset('js/custom.js') }}"></script>
    <script src="{{ asset('js/summernote-bs4.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap-tagsinput.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2();
            setTimeout(function() {
                $('.bootstrap-tagsinput').css('width', '100%');
            }, 500);
        });
        $('.cash-toggle').on('change', function() {
            console.log('Cash toggle is now:', $(this).is(':checked') ? '1' : '0');
        });

        $('#clear_cache').on('click', function() {
            $.ajax({
                url: "{{ route('clear_cache') }}",
                type: "GET",
                success: function(response) {
                    if (response.status) {
                        toastr.success(response.message);
                        $('#cache_size').text(response.data.after_clear);
                    }
                },
                error: function(xhr) {
                    console.log('Basic Details Error:', xhr);
                }
            });
        })
    </script>
@endsection