@extends('admin.admin_dashboard')

@section('admin')
<div class="content-body default-height">
    <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 active">Office Application Templates</li>
            </ol>
        </div>

        <div class="row">
            <div class="col-xl-12">

                <!-- Create Form Card -->
                <div class="card h-auto mb-4">
                    <div class="card-header">
                        <h4 class="card-title mb-0">Create New Template</h4>
                    </div>
                    <div class="card-body">
                        <form id="createTemplateForm" action="{{ route('admin.office-application-templates.store') }}" method="POST">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label">Title<span class="text-danger">*</span></label>
                                <input type="text" name="title" class="form-control" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Serial</label>
                                <input type="number" name="serial" class="form-control" value="0">
                            </div>

                            <div class="mb-3 w-100">
                                <label class="form-label">Template Content<span class="text-danger">*</span></label>
                                <textarea id="content" name="content" class="form-control w-100" rows="10"></textarea>
                            </div>

                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-save me-2"></i>Save Template
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Template List -->
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Template List</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered align-middle">
                                <thead>
                                    <tr>
                                        <th>SL</th>
                                        <th>Title</th>
                                        <th>Serial</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($templates as $key => $template)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>{{ $template->title }}</td>
                                            <td>{{ $template->serial }}</td>
                                            <td class="text-nowrap">
                                                <button class="btn btn-info btn-sm" onclick="viewTemplate({{ $template->id }})">
                                                    <i class="fa fa-eye"></i>
                                                </button>

                                                <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#editModal{{ $template->id }}">
                                                    <i class="fa fa-edit"></i>
                                                </button>

                                                <form action="{{ route('admin.office-application-templates.destroy', $template->id) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger btn-sm"
                                                        onclick="return confirm('Are you sure you want to delete this template?')">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>

                                        <!-- Edit Modal -->
                                        <div class="modal fade" id="editModal{{ $template->id }}" tabindex="-1">
                                            <div class="modal-dialog modal-xl">
                                                <div class="modal-content">
                                                    <form id="editForm{{ $template->id }}"
                                                        action="{{ route('admin.office-application-templates.update', $template->id) }}"
                                                        method="POST">
                                                        @csrf

                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Edit Template</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                        </div>

                                                        <div class="modal-body">
                                                            <div class="mb-3">
                                                                <label class="form-label">Title</label>
                                                                <input type="text" name="title" class="form-control"
                                                                    value="{{ $template->title }}" required>
                                                            </div>

                                                            <div class="mb-3">
                                                                <label class="form-label">Serial</label>
                                                                <input type="number" name="serial" class="form-control"
                                                                    value="{{ $template->serial }}">
                                                            </div>

                                                            <div class="mb-3 w-100">
                                                                <label class="form-label">Template Content</label>
                                                                <textarea id="edit_content_{{ $template->id }}"
                                                                    name="content" class="form-control w-100" rows="10">{{ $template->content }}</textarea>
                                                            </div>
                                                        </div>

                                                        <div class="modal-footer">
                                                            <button type="submit" class="btn btn-primary">
                                                                <i class="fa fa-save me-2"></i>Update
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center">No templates found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- View Modal -->
                <div class="modal fade" id="viewModal" tabindex="-1">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">View Template</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body" id="viewContent"></div>
                            <div class="modal-footer">
                                <button class="btn btn-secondary" onclick="printContent()">
                                    <i class="fa fa-print me-2"></i>Print
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection


@section('customjs')
    <!-- Roboto Google Font -->
    <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: #f1e6fa !important;
            border-bottom: 1px solid #e8dff1 !important;
        }

        .sun-editor .se-wrapper {
            min-height: 500px !important;
            background: #fff !important;
        }

        .sun-editor .se-wrapper-wysiwyg {
            width: 100% !important;
            max-width: 100% !important;
            min-height: 500px !important;
            margin: 0 !important;
            padding: 16px !important;
            background: #fff !important;
            box-sizing: border-box !important;
            box-shadow: none !important;
            overflow-wrap: break-word !important;
            word-break: normal !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,
        #viewContent .se-wrapper-view ol,
        #viewContent .se-wrapper-view ul {
            list-style: revert !important;
            list-style-position: outside !important;
            padding-left: 32px !important;
            margin: 6px 0 !important;
        }

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

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

        .sun-editor .se-wrapper-wysiwyg ul,
        #viewContent .se-wrapper-view ul {
            list-style-type: disc !important;
        }

        #viewContent .se-wrapper-view {
            font-family: SutonnyMJ, Arial, 'Times New Roman', Roboto, sans-serif !important;
            font-size: 14px !important;
            line-height: 1.6 !important;
            overflow-wrap: break-word !important;
        }

        #viewContent .se-wrapper-view * {
            font-family: inherit !important;
        }

        #viewContent .se-wrapper-view p {
            margin: 0 0 8px 0 !important;
        }

        #viewContent .se-wrapper-view [style*="text-align: right"] { text-align: right !important; }
        #viewContent .se-wrapper-view [style*="text-align: center"] { text-align: center !important; }
        #viewContent .se-wrapper-view [style*="text-align: left"] { text-align: left !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: '500px',
                buttonList: [
                    ['undo', 'redo'],
                    ['font', 'fontSize', 'formatBlock'],
                    ['bold', 'italic', 'underline', 'strike', 'subscript', 'superscript'],
                    ['fontColor', 'hiliteColor'],
                    ['removeFormat'],
                    ['outdent', 'indent'],
                    ['align', 'list', 'lineHeight'],
                    ['table', 'link', 'image'],
                    ['fullScreen', 'showBlocks', 'codeView'],
                    ['preview', 'print']
                ],
                font: [
                    'Arial',
                    'Times New Roman',
                    'Roboto',
                    'SutonnyMJ',
                    'Georgia',
                    'Tahoma',
                    'Verdana'
                ],
                fontSizeUnit: 'px',
                lang: getLangSafe()
            };
        }

        document.addEventListener("DOMContentLoaded", function () {
            if (typeof SUNEDITOR === 'undefined') return;

            const contentEl = document.getElementById('content');
            const createForm = document.getElementById('createTemplateForm');

            if (!contentEl || !createForm) return;

            const createEditor = SUNEDITOR.create(contentEl, editorOptions());

            createForm.addEventListener('submit', function (e) {
                const html = createEditor.getContents().trim();
                if (html === '' || html === '<p><br></p>') {
                    e.preventDefault();
                    alert('Please enter template content before saving.');
                    return;
                }
                contentEl.value = html;
            });

            @foreach($templates as $template)
                let editEditor{{ $template->id }} = null;
                const modalEl{{ $template->id }} = document.getElementById('editModal{{ $template->id }}');
                const formEl{{ $template->id }} = document.getElementById('editForm{{ $template->id }}');

                if (modalEl{{ $template->id }}) {
                    modalEl{{ $template->id }}.addEventListener('shown.bs.modal', function () {
                        if (editEditor{{ $template->id }}) return;
                        const el = document.getElementById('edit_content_{{ $template->id }}');
                        if (!el) return;
                        editEditor{{ $template->id }} = SUNEDITOR.create(el, editorOptions());
                    });
                }

                if (formEl{{ $template->id }}) {
                    formEl{{ $template->id }}.addEventListener('submit', function (e) {
                        if (!editEditor{{ $template->id }}) {
                            const el = document.getElementById('edit_content_{{ $template->id }}');
                            if (el) {
                                editEditor{{ $template->id }} = SUNEDITOR.create(el, editorOptions());
                            }
                        }

                        if (!editEditor{{ $template->id }}) return;

                        const html = editEditor{{ $template->id }}.getContents().trim();
                        if (html === '' || html === '<p><br></p>') {
                            e.preventDefault();
                            alert('Please enter template content before updating.');
                            return;
                        }
                        document.getElementById('edit_content_{{ $template->id }}').value = html;
                    });
                }
            @endforeach
        });

        function viewTemplate(id) {
            fetch(`/admin/office-application-templates/${id}/get`)
                .then(res => res.json())
                .then(data => {
                    document.getElementById('viewContent').innerHTML =
                        `<h5>${data.title}</h5><hr>
                         <div class="se-wrapper-view">${data.content}</div>`;
                    new bootstrap.Modal(document.getElementById('viewModal')).show();
                });
        }

        function printContent() {
            const inner = document.querySelector("#viewContent .se-wrapper-view")?.innerHTML
                || document.getElementById("viewContent").innerHTML;

            const sutonnyWoff2 = {!! json_encode(asset('fonts/SutonnyMJ.woff2')) !!};
            const sutonnyWoff  = {!! json_encode(asset('fonts/SutonnyMJ.woff')) !!};
            const sutonnyTtf   = {!! json_encode(asset('fonts/SutonnyMJ.ttf')) !!};

            const w = window.open('', '', 'height=800,width=1000');

            w.document.write(`<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Print</title>

<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">

<style>
@font-face{
  font-family:'SutonnyMJ';
  src:
    url('${sutonnyWoff2}') format('woff2'),
    url('${sutonnyWoff}') format('woff'),
    url('${sutonnyTtf}') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

body{
  font-family: SutonnyMJ, Arial, 'Times New Roman', Roboto, sans-serif !important;
  padding: 20px;
  font-size: 14px;
  line-height: 1.6;
}

body * { font-family: inherit !important; }

p { margin: 0 0 8px 0 !important; }

ol, ul {
  padding-left: 32px;
  margin: 6px 0;
  list-style: revert;
  list-style-position: outside;
}

li { display:list-item; }

[style*="text-align: right"] { text-align:right !important; }
[style*="text-align: center"] { text-align:center !important; }
[style*="text-align: left"] { text-align:left !important; }
</style>
</head>
<body>
  <div class="se-wrapper-view">${inner}</div>
</body>
</html>`);

            w.document.close();

            w.onload = () => {
                setTimeout(() => {
                    w.focus();
                    w.print();
                }, 300);
            };
        }
    </script>
@endsection