@extends('layouts.master')
@push('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.css" rel="stylesheet">
    <style>
        #certificate-preview {
            border: 1px solid #000; /* Optional for visibility */
            position: relative;
            overflow: hidden;
            width: 100%; /* Set to desired width */
            height: auto; /* Allow height to adjust based on content */
            aspect-ratio: 16 / 11; /* Adjust as necessary for your layout */
            background-size: contain; /* Change to contain */
            background-repeat: no-repeat; /* Prevent repeating the background */
            background-position: center; /* Center the background image */
        }
    </style>
@endpush
@section('content')
<div class="card" id="app">
    <div class="card-header card-custom-bg d-flex flex-row align-items-center justify-content-between">
        <h5>Edit Certificate Template</h5>
        <a href="{{ route('certificate-templates.index') }}" class="btn btn-sm btn-primary" id="add-student-btn">Certificate Templates</a>
    </div>
    <div class="card-body">
        <form action="{{ route('certificate-templates.update', $certificateTemplate->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="form-group">
                <label for="title">Title:</label>
                <input type="text" class="form-control" id="title" name="title" value="{{ $certificateTemplate->title }}" placeholder="Enter certificate template title" required>
            </div>
            
            <div class="form-group">
                <label for="body">Body:</label>
                <textarea class="form-control" id="body" name="body" rows="10" required>{{ htmlspecialchars_decode($certificateTemplate->body) }}</textarea>
            </div>

            <p class="p-2">
                <span style="font-weight: bold; color:red;">Note:</span> 
                Use the below variable in you template exactly same. They will dynamically replace with exact value wehn createcertificate. 
                [School_Logo], [School_Name], [Branch_Name], [Student_Name], [Student_Class], 
                [Student_Section], [Student_Shift], [Student_Roll], [Last_Exam_Result], [Principal_Signature],
            </p>

            <div class="row">

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="background">Background Image:</label>
                        <input type="file" class="form-control" id="background" name="background_image" accept="image/*" @change="previewImage">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="padding_x">Padding X (Horizontal):</label>
                        <input type="number" class="form-control" id="padding_x" name="padding_x" v-model="padding_x" @input="updatePadding" value="{{ $certificateTemplate->padding_x }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="padding_y">Padding Y (Vertical):</label>
                        <input type="number" class="form-control" id="padding_y" name="padding_y" v-model="padding_y" @input="updatePadding" value="{{ $certificateTemplate->padding_y }}">
                    </div>
                </div>
            </div>
    
            <!-- Live Preview Section -->
            <div class="table-responsive">
                <h4>Live Preview</h4>
                <div class="mt-4">
                    <div id="certificate-preview" class="border" :style="`background-image: url(${imagePreview}); padding: ${padding_y}px ${padding_x}px;`">
                        <div v-html="bodyContent"></div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="status">Status:</label>
                <select class="form-control" id="status" name="status">
                    <option value="active" {{ $certificateTemplate->status === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ $certificateTemplate->status === 'inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            
            <button type="submit" class="btn btn-primary">Update Template</button>
        </form>
    </div>
</div>

@endsection
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                title: '{{ $certificateTemplate->title }}',
                bodyContent: '{!! htmlspecialchars_decode($certificateTemplate->body) !!}',
                imagePreview: '{{ $certificateTemplate->background_image ? asset($certificateTemplate->background_image) : "" }}',
                padding_x: '{{ $certificateTemplate->padding_x }}',
                padding_y: '{{ $certificateTemplate->padding_y }}'
            };
        },
        mounted() {
            $('#body').summernote({
                height: 200,
                callbacks: {
                    onChange: (contents) => {
                        this.bodyContent = contents;
                    }
                },
            });

            $('#title').on('input', (e) => {
                this.title = e.target.value;
            });
        },
        methods: {
            previewImage(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.imagePreview = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            },
            updatePadding() {
                // This method is called whenever padding values are changed
                // You can add additional logic here if needed
            }
        }
    });

    app.mount('#app');
</script>
@endsection