@extends('admin.layout.app')
@section('content')
    <div>
        <!-- Page Header -->
        <div class="flex flex-col sm:flex-row items-center justify-between mb-6">
            <div>
                <h3 class="text-xl font-bold text-gray-800">Security</h3>
                <p class="text-sm text-gray-500 mt-1">Manage application Security Policy</p>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-6">
                <form id="add_security">
                    <input type="hidden" name="id" value="{{ $security->id ?? '' }}">
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Security Content</label>
                        <div class="border border-gray-200 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-transparent transition-all">
                            <textarea id="summernote" name="security" class="w-full">{{ $security->security ?? '' }}</textarea>
                        </div>
                    </div>
                    
                    <div class="flex items-center gap-3 pt-2">
                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                            Submit
                        </button>
                        <button type="button" class="bg-white hover:bg-gray-50 text-gray-700 border border-gray-200 font-medium py-2 px-6 rounded-lg transition-colors focus:outline-none" onclick="window.history.back()">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('customJs')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.js"></script>
    <script type="text/javascript">
        $('#summernote').summernote({
            placeholder: 'Description',
            tabsize: 2,
            height: 400,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript', 'forecolor',
                    'backcolor'
                ]], // Added forecolor and backcolor
                ['para', ['ul', 'ol', 'paragraph']],
                ['view', ['undo', 'redo']]
            ],
        });
        $(document).on('submit', '#add_security', function(event) {
            event.preventDefault();
            $.ajax({
                url: "{{ route('admin_general_add') }}",
                method: 'POST',
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                processData: false,
                success: function(data) {
                    webinaToast({
                        type: data.type,
                        message: data.text
                    });
                    if (data.type == 'success') {
                        location.reload();
                    }
                }
            });
        });
    </script>
@endsection