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

@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">Add New Content</h5>
                    </div>

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

                            <!-- Title -->
                            <div class="mb-3">
                                <label class="form-label">Title</label>
                                <input type="text"
                                       name="title"
                                       class="form-control"
                                       placeholder="Enter title"
                                       value="{{$data->title?$data->title:''}}"
                                       required>
                            </div>

                            <!-- Image Upload -->
                            <div class="mb-3">
                                <label class="form-label">Upload Image</label>
                                <input type="file"
                                       name="image"
                                       id="imageInput"
                                       class="form-control"
                                       accept="image/*">

                                <img id="previewImage"
                                     src="{{ $data->image ? asset('storage/' . $data->image) : '' }}"
                                     class="image-preview">
                            </div>

                            <!-- Summernote Editor -->
                            <div class="mb-3">
                                <label class="form-label">Description / Content</label>
                                <textarea id="summernote" name="description">
                                    {{$data->description?$data->description:''}}
                                </textarea>
                            </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']]
            ]
        });

        // Image Preview
        document.getElementById('imageInput').addEventListener('change', function(e){
            const reader = new FileReader();
            reader.onload = function(){
                const preview = document.getElementById('previewImage');
                preview.src = reader.result;
                preview.style.display = 'block';
            }
            reader.readAsDataURL(e.target.files[0]);
        });
    </script>
@endpush