@extends('layouts.simple.master')

@section('title', trans(app()->getLocale() . '.edit_package'))

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/quill.snow.css') }}">
@endsection

@section('main_content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-sm-6">
                    <h3>{{ trans(app()->getLocale() . '.edit_package') }}</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"> <svg class="stroke-icon">
                                    <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                                </svg></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.package.index') }}">{{ trans(app()->getLocale() . '.packages') }}</a></li>
                        <li class="breadcrumb-item active">{{ trans(app()->getLocale() . '.update') }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid starts-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <form class="row g-3 custom-input" id="packageForm" action="{{ route('admin.package.update', $package->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            @include('admin.package.fields', ['package' => $package])
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid Ends-->
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/bookmark/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/js/custom-validation/validation.js') }}"></script>
    <script src="{{ asset('assets/js/editors/quill/quill.min.js') }}"></script>
    <script src="{{ asset('assets/js/editors/custom-quill.js') }}"></script>
    <script src="{{ asset('assets/js/editors/quill.js') }}"></script>
    <script>
        $(document).ready(function() {
            var editor8 = new Quill("#editor8", {
                modules: { toolbar: "#toolbar8" },
                theme: "snow",
                placeholder: "{{ trans(app()->getLocale() . '.enter_package_description') }}",
            });

            var quillEditor = document.getElementById('quill-editor-area');
            editor8.on('text-change', function() {
                quillEditor.value = editor8.root.innerHTML;
            });

            if (quillEditor.value) {
                editor8.root.innerHTML = quillEditor.value;
            }

            // Handle icon file preview
            $('input[name="icon"]').on('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    if (file.type.startsWith('image/')) {
                        reader.onload = function(e) {
                            $('#iconPreview').html('<img src="' + e.target.result + '" alt="Preview" style="max-width: 200px; max-height: 200px; border-radius: 4px;">').show();
                        };
                        reader.readAsDataURL(file);
                    }
                } else {
                    $('#iconPreview').hide();
                }
            });
        });
    </script>
@endsection