@extends('layouts.app',['path'=>'employeeLetter'])
@section('title', 'Employee Letters - HRMS')

@section('content')
    <div class="content" data-color="primary">
        <!-- Breadcrumb -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Employee Letters</h2>
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}"><i class="ti ti-smart-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            Reports
                        </li>
                        <li class="breadcrumb-item">
                            HR
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Employee Letters</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- /Breadcrumb -->

        @include('partials.new_alerts')

        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Employee Letters</h4>
            </div>
            <div class="card-body">
                <form id="employeeLetterForm" method="GET">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="employee_id" class="form-label">Employee <span class="text-danger">*</span></label>
                                <select class="select form-control" id="employee_id" name="employee_id">
                                    <option value="">Select</option>
                                    @foreach($employees ?? [] as $employee)
                                        <option value="{{ enCryptData($employee['id']) }}" {{ ($requestData['employee_id'] ?? '') == $employee['id'] ? 'selected' : '' }}>
                                            {{ $employee['name'] }}
                                        </option>
                                    @endforeach
                                </select>
                                <span class="error-validation" id="employee_id-error"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="template_type" class="form-label">Template Type <span class="text-danger">*</span></label>
                                <select class="select form-control" id="template_type" name="template_type">
                                    <option value="">Select</option>
                                    @foreach($templateTypes ?? [] as $template)
                                        <option value="{{ $template }}" {{ ($requestData['template_type'] ?? '') == $template ? 'selected' : '' }}>
                                            {{ $template }}
                                        </option>
                                    @endforeach
                                </select>
                                <span class="error-validation" id="template_type-error"></span>
                            </div>
                        </div>
                        <div class="col-md-6" id="date_range_container" style="display: {{ ($requestData['template_type'] ?? '') == 'Increment Letter' ? 'block' : 'none' }};">
                            <div class="mb-3">
                                <label for="date_range" class="form-label">Select Date Range</label>
                                <input type="text" class="form-control date-range" id="date_range" name="{{ ($requestData['template_type'] ?? '') == 'Increment Letter' ? 'date_range' : '' }}" value="{{ $requestData['date_range'] ?? '' }}" placeholder="dd/mm/yyyy - dd/mm/yyyy">
                                <span class="error-validation" id="date_range-error"></span>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end mt-2">
                        <a href="{{ route('employeeLetter') }}" class="btn btn-light border me-2" id="clearBtn">
                            <i class="ti ti-refresh me-2"></i>Clear
                        </a>
                        <button type="submit" class="btn btn-primary" id="applyBtn">
                            <i class="ti ti-filter me-2"></i>Apply
                        </button>
                    </div>
                </form>
            </div>
        </div>

        @if(isset($letterContent) && !empty($letterContent))
            <div class="card mt-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">Letter Preview</h4>
                    <div id="letterActions">
                        <button type="button" class="btn btn-sm btn-primary me-2" id="editLetterBtn">
                            <i class="ti ti-edit me-2"></i>Edit
                        </button>
                        <div class="dropdown d-inline-block">
                            <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="ti ti-download me-2"></i>Export
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="exportWordBtn">
                                        <i class="ti ti-file-word me-2"></i>Export Word
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="exportPdfBtn">
                                        <i class="ti ti-file-type-pdf me-2"></i>Export PDF
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div id="letterPreview" style="background: #fff; padding: 10px 20px; min-height: 400px; max-width: 800px; margin: 0 auto;">
                        {!! $letterContent !!}
                    </div>
                    <div id="letterEditor" style="display: none;">
                        <textarea id="letterEditorContent"></textarea>
                        <div class="modal-footer mt-3">
                            <button type="button" class="btn btn-light border me-2" id="cancelEditBtn">
                                <i class="ti ti-x me-2"></i>Cancel
                            </button>
                            <button type="button" class="btn btn-primary" id="saveEditBtn">
                                <i class="ti ti-check me-2"></i>Save
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('css')
    <style>
        p{
            margin-bottom: 10px !important;   
        }
    </style>
@endpush
@push('scripts')
    <script src="https://cdn.tiny.cloud/1/oz3nbjo57360s7rqle4rw1vg7tvxd64z50vjin3rvd8gg00p/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script src="{{ asset('assets/validation/employee-letter.js?v='.config('api.version')) }}"></script>
    <script>
        $(function() {
            let originalContent = `{!! addslashes($letterContent ?? '') !!}`;
            
            @php
                $selectedEmployee = collect($employees ?? [])->firstWhere('id', $requestData['employee_id'] ?? null);
                $employeeName = $selectedEmployee['name'] ?? 'Employee';
            @endphp
            
            const employeeName = `{{ $employeeName }}`;
            const templateType = `{{ $requestData['template_type'] ?? 'Letter' }}`;
            const fileName = employeeName.replace(/\s+/g, '_') + '_' + templateType.replace(/\s+/g, '_');

            // Edit button
            $('#editLetterBtn').on('click', function() {
                $('#letterPreview').hide();
                $('#letterEditor').show();
                $('#letterActions').hide();
                
                tinymce.init({
                    selector: '#letterEditorContent',
                    height: 600,
                    menubar: false,
                    plugins: 'lists link table code image textcolor colorpicker',
                    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist | link image table | code',
                    setup: function(editor) {
                        editor.on('init', function() {
                            editor.setContent(originalContent);
                        });
                    }
                });
            });

            // Save changes
            $('#saveEditBtn').on('click', function() {
                originalContent = tinymce.get('letterEditorContent').getContent();
                $('#letterPreview').html(originalContent).show();
                tinymce.get('letterEditorContent').remove();
                $('#letterEditor').hide();
                $('#letterActions').show();
            });

            // Cancel edit
            $('#cancelEditBtn').on('click', function() {
                tinymce.get('letterEditorContent').remove();
                $('#letterEditor').hide();
                $('#letterPreview').show();
                $('#letterActions').show();
            });

            // Export to Word
            $('#exportWordBtn').on('click', function(e) {
                e.preventDefault();
                const btn = $(this);
                const originalHtml = btn.html();
                btn.prop('disabled', true).html('<span class="spinner-border me-2" style="width: 12px; height: 12px; border-width: 2px;"></span>Exporting...');
                
                setTimeout(function() {
                    const content = $('#letterPreview').html();
                    const blob = new Blob(['\ufeff', '<html><head><meta charset="utf-8"></head><body>' + content + '</body></html>'], {
                        type: 'application/msword'
                    });
                    const url = URL.createObjectURL(blob);
                    const link = document.createElement('a');
                    link.href = url;
                    link.download = fileName + '.doc';
                    link.click();
                    URL.revokeObjectURL(url);
                    
                    btn.prop('disabled', false).html(originalHtml);
                }, 300);
            });

            // Export to PDF
            $('#exportPdfBtn').on('click', function(e) {
                e.preventDefault();
                const btn = $(this);
                const originalHtml = btn.html();
                btn.prop('disabled', true).html('<span class="spinner-border me-2" style="width: 12px; height: 12px; border-width: 2px;"></span>Exporting...');
                
                const element = document.getElementById('letterPreview');
                const opt = {
                    margin: [0.5, 0.5, 0.5, 0.5],
                    filename: fileName + '.pdf',
                    image: { type: 'jpeg', quality: 0.98 },
                    html2canvas: { 
                        scale: 2,
                        useCORS: true,
                        logging: false,
                        scrollY: 0,
                        scrollX: 0,
                        windowHeight: element.scrollHeight + element.offsetTop
                    },
                    jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' },
                    pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
                };
                
                html2pdf().set(opt).from(element).save().then(function() {
                    btn.prop('disabled', false).html(originalHtml);
                });
            });
        });
    </script>
@endpush