@extends('layouts.app')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <h4 class="py-3 breadcrumb-wrapper mb-4">
                <a href="{{ route('dashboard') }}" class="text-muted fw-light">Dashboard /</a> Settings
            </h4>

            <!-- Alerts for Success/Error -->
            <div class="col-md-12 mb-4">
                @if (session('success') || session('status') === 'settings-updated')
                    <div class="alert alert-success alert-dismissible d-flex align-items-center" role="alert">
                        <i class="bx bx-xs bx-command align-top me-2"></i>
                        {{ session('success') ?? __('Settings updated successfully.') }}
                        <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 d-flex align-items-center" role="alert">
                        <i class="bx bx-xs bx-error-circle align-top me-2"></i>
                        {{ 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">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>

            <!-- Settings Form -->
            <div class="card">
                <h5 class="card-header">{{ __('Settings') }}</h5>
                <div class="card-body">
                    <p class="text-muted mb-4">{{ __('Setup your project') }}</p>
                    <form method="POST" action="{{ route('settings.update') }}" enctype="multipart/form-data" class="space-y-4">
                        @csrf

                        <!-- App Name -->
                        <div class="col-12 fv-plugins-icon-container">
                            <label class="form-label" for="app_name">{{ __('App Name') }}</label>
                            <input type="text" name="app_name" id="app_name" class="form-control" placeholder="{{ __('Enter app name') }}"
                                value="{{ old('app_name', $settings['app_name'] ?? '') }}" required autocomplete="app_name" />
                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                @if ($errors->has('app_name'))
                                    {{ $errors->first('app_name') }}
                                @endif
                            </div>
                        </div>

                        <!-- App Currency -->
                        <div class="col-12 fv-plugins-icon-container">
                            <label class="form-label" for="app_currency">{{ __('App Currency') }}</label>
                            <input type="text" name="app_currency" id="app_currency" class="form-control" placeholder="{{ __('Enter app currency') }}"
                                value="{{ old('app_currency', $settings['app_currency'] ?? '') }}" required autocomplete="app_currency" />
                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                @if ($errors->has('app_currency'))
                                    {{ $errors->first('app_currency') }}
                                @endif
                            </div>
                        </div>

                        <!-- Callback URL -->
                        <div class="col-12 fv-plugins-icon-container">
                            <label class="form-label" for="app_callback_url">{{ __('Callback URL') }}</label>
                            <input type="url" name="app_callback_url" id="app_callback_url" class="form-control" placeholder="{{ __('Enter callback URL') }}"
                                value="{{ old('app_callback_url', $settings['app_callback_url'] ?? '') }}" required autocomplete="app_callback_url" />
                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                @if ($errors->has('app_callback_url'))
                                    {{ $errors->first('app_callback_url') }}
                                @endif
                            </div>
                        </div>

                        <!-- Logo -->
                        <div class="col-12 fv-plugins-icon-container">
                            <label class="form-label" for="logo">{{ __('App Logo') }}</label>
                            @if (!empty($settings['logo']))
                                <img src="{{ asset($settings['logo']) }}" alt="App Logo" class="d-block rounded" height="100" width="100">
                            @endif
                            <input type="file" name="logo" id="logo" class="form-control" />
                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                @if ($errors->has('logo'))
                                    {{ $errors->first('logo') }}
                                @endif
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary mt-2">
                            <i class="bx bx-save me-sm-1"></i> {{ __('Update Settings') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function() {
            // Form validation for Settings
            $('form[action="{{ route('settings.update') }}"]').validate({
                rules: {
                    app_name: {
                        required: true,
                        maxlength: 255
                    },
                    app_currency: {
                        required: true,
                        maxlength: 10
                    },
                    app_callback_url: {
                        required: true,
                        url: true,
                        maxlength: 255
                    },
                    logo: {
                        extension: "jpg|jpeg|png|gif"
                    }
                },
                messages: {
                    app_name: {
                        required: "{{ __('Please enter the app name') }}",
                        maxlength: "{{ __('App name cannot exceed 255 characters') }}"
                    },
                    app_currency: {
                        required: "{{ __('Please enter the app currency') }}",
                        maxlength: "{{ __('Currency code cannot exceed 10 characters') }}"
                    },
                    app_callback_url: {
                        required: "{{ __('Please enter the callback URL') }}",
                        url: "{{ __('Please enter a valid URL') }}",
                        maxlength: "{{ __('Callback URL cannot exceed 255 characters') }}"
                    },
                    logo: {
                        extension: "{{ __('Please upload a valid image file (jpg, jpeg, png, gif)') }}"
                    }
                },
                errorPlacement: function(error, element) {
                    error.appendTo(element.closest('.fv-plugins-icon-container').find('.fv-plugins-message-container'));
                },
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                    $(element).closest('.fv-plugins-icon-container').find('.fv-plugins-message-container').addClass('fv-plugins-message-container--enabled');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                    $(element).closest('.fv-plugins-icon-container').find('.fv-plugins-message-container').removeClass('fv-plugins-message-container--enabled').empty();
                }
            });
        });
    </script>
@endsection