@extends('Root.layout.master')
@section('title', 'Benefit')
@section('page_name', 'Benefit')

@push('styles')
    <!-- Summernote CSS -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.css" rel="stylesheet">

    <style>
        .note-editor.note-frame {
            border-radius: 8px;
        }
        .image-preview{
            max-height:120px;
            margin-top:10px;
            border-radius:8px;

        }
    </style>
@endpush

@section('content')
    <div class="container-fluid py-4">

        <!-- Form Row -->
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div class="card shadow-sm">
                    <div class="card-header">
                        <h5 class="mb-0">Benefit</h5>
                    </div>

                    <div class="card-body">
                        <form action="{{route('admin.benefit.store')}}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <!-- Summernote Editor -->
                            <div class="mb-3">
                                <label class="form-label">Description / Content</label>
                                <textarea id="summernote" name="benefit">
                                    {!! $data->content !!}
                                </textarea>
                                @error('benefit')
                                 <small class="text-danger">{{$message}}</small>
                                @enderror
                            </div>

                            <!-- Submit -->
                            <div class="text-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-save me-2"></i>Submit
                                </button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection


@push('scripts')
    <!-- jQuery (Required for Summernote) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Summernote JS -->
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"></script>

    <script>
        // Summernote Init
        $('#summernote').summernote({
            placeholder: 'Write content here...',
            tabsize: 2,
            height: 250,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold','italic','underline','clear']],
                ['color', ['color']],
                ['para', ['ul','ol','paragraph']],
                ['insert', ['link','picture']],
                ['view', ['codeview']]
            ]
        });

    </script>
@endpush