@extends('admin.admin_dashboard')

@section('admin')
<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.office-applications.index') }}">Office Applications</a></li>
                <li class="breadcrumb-item active">Edit Application</li>
            </ol>
        </div>

        <div class="row">
            <div class="col-lg-10 offset-lg-1">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title mb-0">Edit Office Application</h4>
                    </div>
                    <div class="card-body">
                        <form id="applicationForm" action="{{ route('admin.office-applications.update', $application->id) }}" method="POST">
                            @csrf

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="template_id" class="form-label">Select Template (Optional)</label>
                                    <select name="template_id" id="template_id" class="form-control @error('template_id') is-invalid @enderror">
                                        <option value="">-- Select Template --</option>
                                        @foreach($templates as $template)
                                            <option value="{{ $template->id }}" {{ old('template_id', $application->template_id) == $template->id ? 'selected' : '' }}>
                                                {{ $template->title }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('template_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Select a template to load its content</small>
                                </div>

                                <div class="col-md-6">
                                    <label for="application_date" class="form-label">Application Date</label>
                                    <input type="date" name="application_date" id="application_date"
                                           class="form-control @error('application_date') is-invalid @enderror"
                                           value="{{ old('application_date', $application->application_date ? $application->application_date->format('Y-m-d') : date('Y-m-d')) }}">
                                    @error('application_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="title" class="form-label">
                                    Application Title <span class="text-danger">*</span>
                                </label>
                                <input type="text" name="title" id="title"
                                       class="form-control @error('title') is-invalid @enderror"
                                       value="{{ old('title', $application->title) }}"
                                       placeholder="Enter application title"
                                       required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3 w-100">
                                <label for="content" class="form-label">
                                    Application Content <span class="text-danger">*</span>
                                </label>
                                <textarea name="content" id="content"
                                          class="form-control w-100 @error('content') is-invalid @enderror"
                                          rows="6">{{ old('content', $application->content) }}</textarea>
                                @error('content')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="d-flex justify-content-between">
                                <a href="{{ route('admin.office-applications.index') }}" class="btn btn-secondary">
                                    <i class="fa fa-arrow-left me-2"></i>Back
                                </a>
                                <div>

                                    <button type="submit" class="btn btn-primary">
                                        <i class="fa fa-save me-2"></i>Update Application
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customjs')
    <!-- Roboto -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

    <!-- SunEditor -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/suneditor@2.45.1/dist/css/suneditor.min.css">
    <script src="https://cdn.jsdelivr.net/npm/suneditor@2.45.1/dist/suneditor.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/suneditor@2.45.1/src/lang/en.js"></script>

    <style>
        @font-face{
            font-family: 'SutonnyMJ';
            src:
              url('{{ asset("fonts/SutonnyMJ.woff2") }}') format('woff2'),
              url('{{ asset("fonts/SutonnyMJ.woff") }}') format('woff'),
              url('{{ asset("fonts/SutonnyMJ.ttf") }}') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        .sun-editor {
            width: 195mm !important;
            /* A4 width */
            max-width: 100% !important;
            /* mobile fallback */
            margin: 0 auto !important;
            /* center */
            background-color: #f8f4fb !important;
            border-radius: 8px !important;
            border: 1px solid #ddd !important;
        }

        .sun-editor .se-toolbar {
            background-color: #f1e6fa !important;
            border-bottom: 1px solid #e8dff1 !important;
            border-top-left-radius: 8px !important;
            border-top-right-radius: 8px !important;
        }

        .sun-editor .se-wrapper {
            min-height: 350px !important;
        }

        .sun-editor-editable {
            min-height: 500px !important;
        }

        .sun-editor.se-full-screen {
            z-index: 99999 !important;
        }

        .sun-editor.se-full-screen .se-wrapper {
            height: calc(100vh - 120px) !important;
        }

        .sun-editor .se-wrapper-wysiwyg ol,
        .sun-editor .se-wrapper-wysiwyg ul {
            list-style: revert !important;
            list-style-position: outside !important;
            padding-left: 32px !important;
            margin: 6px 0 !important;
        }

        .sun-editor .se-wrapper-wysiwyg li {
            display: list-item !important;
            list-style: inherit !important;
        }

        .sun-editor .se-wrapper-wysiwyg ol {
            list-style-type: decimal !important;
        }

        .sun-editor .se-wrapper-wysiwyg ul {
            list-style-type: disc !important;
        }
    </style>

    <script>
        function getLangSafe(){
            try{
                if (typeof SUNEDITOR_LANG !== 'undefined' && SUNEDITOR_LANG['en']) {
                    return SUNEDITOR_LANG['en'];
                }
            } catch(e) {}
            return 'en';
        }

        function editorOptions(){
            return {
                width: '100%',
                height: '500px',
                minHeight: '350px',
                buttonList: [
                    ['undo', 'redo'],
                    ['font', 'fontSize', 'formatBlock'],
                    ['bold', 'italic', 'underline', 'strike', 'subscript', 'superscript'],
                    ['fontColor', 'hiliteColor'],
                    ['removeFormat'],
                    ['outdent', 'indent'],
                    ['align', 'horizontalRule', 'list', 'lineHeight'],
                    ['table', 'link', 'image'],
                    ['fullScreen', 'showBlocks', 'codeView'],
                    ['preview', 'print']
                ],
                formats: ['p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre'],
                font: [
                    'Arial',
                    'Times New Roman',
                    'Roboto',
                    'SutonnyMJ',
                    'Comic Sans MS',
                    'Courier New',
                    'Impact',
                    'Georgia',
                    'Tahoma',
                    'Trebuchet MS',
                    'Verdana'
                ],
                fontSize: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68, 70, 72],
                fontSizeUnit: 'px',
                attributesWhitelist: {
                    all: 'style',
                    table: 'cellpadding|cellspacing|border',
                    input: 'checked|type'
                },
                lang: getLangSafe()
            };
        }

        document.addEventListener("DOMContentLoaded", function () {
            const textarea = document.getElementById('content');
            const templateSelect = document.getElementById('template_id');
            const titleInput = document.getElementById('title');
            const form = document.getElementById('applicationForm');

            if (!textarea) {
                console.error('Textarea #content not found.');
                return;
            }

            if (typeof SUNEDITOR === 'undefined') {
                console.error('SUNEDITOR not loaded');
                return;
            }

            const originalTemplateId = templateSelect ? templateSelect.value : '';
            const editor = SUNEDITOR.create(textarea, editorOptions());

            if (templateSelect) {
                templateSelect.addEventListener('change', function () {
                    const templateId = this.value;
                    if (!templateId) return;

                    if (confirm('Loading template will replace current content. Continue?')) {
                        fetch(`/admin/office-application-templates/${templateId}/get`)
                            .then(res => res.json())
                            .then(data => {
                                editor.setContents(data.content || '');
                                if (titleInput) {
                                    titleInput.value = data.title || '';
                                }
                            })
                            .catch(err => console.error('Error loading template:', err));
                    } else {
                        this.value = originalTemplateId;
                    }
                });
            }

            if (form) {
                form.addEventListener('submit', function (e) {
                    const html = editor.getContents().trim();

                    if (html === '' || html === '<p><br></p>') {
                        e.preventDefault();
                        alert('Please enter application content before saving.');
                        return;
                    }

                    textarea.value = html;
                });
            }
        });
    </script>
@endsection