@extends('layouts.app')

@section('title', 'Acknowledge Document Management')

@section('content')
<section class="content-header">
    <h1>
        {{ isset($document) && $document->id ? 'Edit' : 'Create' }} Acknowledge Document
        <small>{{ isset($document) && $document->id ? 'Update existing' : 'Create new' }} policy & procedure document</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="{{ url('/') }}"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="{{ route('acknowledge_document.index') }}">Acknowledge Documents</a></li>
        <li class="active">{{ isset($document) && $document->id ? 'Edit' : 'Create' }}</li>
    </ol>
</section>

<section class="content">
    <!-- Flash Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h4><i class="icon fa fa-check"></i> Success!</h4>
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h4><i class="icon fa fa-ban"></i> Error!</h4>
            {{ session('error') }}
        </div>
    @endif

    <div class="row">
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">
                        <i class="fa fa-file-text-o"></i> 
                        {{ isset($document) && $document->id ? 'Edit' : 'Create' }} Policy & Procedure Document
                    </h3>
                    <div class="box-tools pull-right">
                        <a href="{{ route('acknowledge_document.index') }}" class="btn btn-default">
                            <i class="fa fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form method="POST" action="{{ route('acknowledge_document.store') }}" id="ackDocForm">
                    @csrf
                    @if(isset($document) && $document->id)
                        <input type="hidden" name="document_id" value="{{ $document->id }}">
                        <input type="hidden" name="original_content" id="original_content" value="{{ htmlspecialchars($document->content, ENT_QUOTES, 'UTF-8') }}">
                        <input type="hidden" name="create_new_document" id="create_new_document" value="0">
                    @endif
                    
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="title">Document Title</label>
                                    <span class="text-red">*</span>
                                    <input type="text" 
                                           class="form-control {{ $errors->has('title') ? 'is-invalid' : '' }}" 
                                           id="title" 
                                           name="title" 
                                           value="{{ old('title', (isset($document) && $document->id) ? $document->title : '') }}" 
                                           placeholder="Enter document title (e.g., Company Policy & Procedures)"
                                           required>
                                    @if ($errors->has('title'))
                                        <span class="text-red">
                                            <strong>{{ $errors->first('title') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="type">Document Type</label>
                                    <span class="text-red">*</span>
                                    <select name="type" 
                                            id="type" 
                                            class="form-control {{ $errors->has('type') ? 'is-invalid' : '' }}" 
                                            required>
                                        <option value="">Select Document Type</option>
                                        <option value="Policy and Procedures" 
                                            {{ old('type', (isset($document) && $document->type) ? $document->type : '') == 'Policy and Procedures' ? 'selected' : '' }}>
                                            Policy and Procedures
                                        </option>
                                        <option value="Other" 
                                            {{ old('type', (isset($document) && $document->type) ? $document->type : '') == 'Other' ? 'selected' : '' }}>
                                            Other
                                        </option>
                                    </select>
                                    @if ($errors->has('type'))
                                        <span class="text-red">
                                            <strong>{{ $errors->first('type') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="row" id="other_document_name_row" style="display: none;">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="other_document_name">Document Name</label>
                                    <span class="text-red">*</span>
                                    <input type="text" 
                                           class="form-control {{ $errors->has('other_document_name') ? 'is-invalid' : '' }}" 
                                           id="other_document_name" 
                                           name="other_document_name" 
                                           value="{{ old('other_document_name', (isset($document) && $document->other_document_name) ? $document->other_document_name : '') }}" 
                                           placeholder="Enter document name (e.g., Employee Handbook, Safety Manual)"
                                           >
                                    @if ($errors->has('other_document_name'))
                                        <span class="text-red">
                                            <strong>{{ $errors->first('other_document_name') }}</strong>
                                        </span>
                                    @endif
                                    <small class="help-block">Required when document type is "Other"</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="is_active">Status</label>
                                    <select name="is_active" 
                                            id="is_active" 
                                            class="form-control {{ $errors->has('is_active') ? 'is-invalid' : '' }}">
                                        <option value="0" 
                                            {{ old('is_active', (isset($document) && $document->id) ? ($document->is_active ? '1' : '0') : '0') == '0' ? 'selected' : '' }}>
                                            Inactive
                                        </option>
                                        <option value="1" 
                                            {{ old('is_active', (isset($document) && $document->id) ? ($document->is_active ? '1' : '0') : '0') == '1' ? 'selected' : '' }}>
                                            Active
                                        </option>
                                    </select>
                                    @if ($errors->has('is_active'))
                                        <span class="text-red">
                                            <strong>{{ $errors->first('is_active') }}</strong>
                                        </span>
                                    @endif
                                    <small class="help-block">Only active documents will be shown to users for signing</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="roles">Document For Roles</label>
                                    <span class="text-red">*</span>
                                    <div style="margin-top: 10px;">
                                        @php
                                            $selectedRoles = old('roles', (isset($document) && $document->roles) ? $document->roles : []);
                                            // Normalize roles to strings for comparison
                                            $selectedRoles = array_map('strval', $selectedRoles);
                                            $isAllRolesSelected = empty($selectedRoles) || in_array('1', $selectedRoles) || in_array(1, $selectedRoles);
                                        @endphp
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" 
                                                       name="roles[]" 
                                                       value="1" 
                                                       id="role_all"
                                                       {{ $isAllRolesSelected ? 'checked' : '' }}
                                                       onchange="handleRoleAll(this)">
                                                <strong>All</strong>
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" 
                                                       name="roles[]" 
                                                       value="2" 
                                                       id="role_admin"
                                                       {{ (!$isAllRolesSelected && (in_array('2', $selectedRoles) || in_array(2, $selectedRoles))) ? 'checked' : '' }}
                                                       onchange="handleRoleChange(this)">
                                                Admin
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" 
                                                       name="roles[]" 
                                                       value="3" 
                                                       id="role_agent"
                                                       {{ (!$isAllRolesSelected && (in_array('3', $selectedRoles) || in_array(3, $selectedRoles))) ? 'checked' : '' }}
                                                       onchange="handleRoleChange(this)">
                                                Agents
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" 
                                                       name="roles[]" 
                                                       value="4" 
                                                       id="role_ar"
                                                       {{ (!$isAllRolesSelected && (in_array('4', $selectedRoles) || in_array(4, $selectedRoles))) ? 'checked' : '' }}
                                                       onchange="handleRoleChange(this)">
                                                AR
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" 
                                                       name="roles[]" 
                                                       value="team_manager" 
                                                       id="role_team_manager"
                                                       {{ (!$isAllRolesSelected && in_array('team_manager', $selectedRoles)) ? 'checked' : '' }}
                                                       onchange="handleRoleChange(this)">
                                                Team Manager
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" 
                                                       name="roles[]" 
                                                       value="distributor" 
                                                       id="role_distributor"
                                                       {{ (!$isAllRolesSelected && in_array('distributor', $selectedRoles)) ? 'checked' : '' }}
                                                       onchange="handleRoleChange(this)">
                                                Distributor
                                            </label>
                                        </div>
                                    </div>
                                    @if ($errors->has('roles'))
                                        <span class="text-red">
                                            <strong>{{ $errors->first('roles') }}</strong>
                                        </span>
                                    @endif
                                    <small class="help-block">Select which user roles this document applies to. "All" is selected by default.</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="companies">Document For</label>
                                    <select name="companies[]" 
                                            id="companies" 
                                            class="form-control select2" 
                                            multiple="multiple" 
                                            data-placeholder="Select companies"
                                            style="width: 100%;">
                                        @php
                                            // Get selected companies from pivot table (or old input)
                                            $selectedCompanies = old('companies', (isset($document) && $document->companies) ? $document->companies->pluck('id')->toArray() : []);
                                            $isAllSelected = empty($selectedCompanies) || in_array('all', $selectedCompanies);
                                        @endphp
                                        <option value="all" {{ $isAllSelected ? 'selected' : '' }}>All</option>
                                        @if(isset($companies) && $companies->count() > 0)
                                            @foreach($companies as $company)
                                                <option value="{{ $company->id }}" 
                                                    {{ (!$isAllSelected && in_array($company->id, $selectedCompanies)) ? 'selected' : '' }}>
                                                    {{ $company->mgmt_name }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <small class="help-block">Select companies for this document. "All" is selected by default, but can be removed to select specific companies only.</small>
                                    @if ($errors->has('companies'))
                                        <span class="text-red">
                                            <strong>{{ $errors->first('companies') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        @if(Auth::check() && Auth::user()->user_role == 1)
                        <div class="row">
                            <div class="col-md-12">
                                <div class="callout callout-info">
                                    <h4><i class="fa fa-info-circle"></i> Accepted Parameters</h4>
                                    <p>You can use the following placeholders in your document content that will be automatically replaced when users view or sign the document:</p>
                                    <ul style="margin-top: 10px; margin-bottom: 5px;">
                                        <li><code>[Agent Name]</code> or <code>[agent_name]</code> - Will be replaced with the user's full name</li>
                                        <li><code>[Agent Email]</code> or <code>[agent_email]</code> - Will be replaced with the user's email address</li>
                                        <li><code>[Company Name]</code> or <code>[company_name]</code> - Will be replaced with the user's company name</li>
                                        <li><code>[Super Admin Signature]</code> or <code>[super_admin_signature]</code> - Will be replaced with the Super Admin signature image</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        @endif

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="content">Document Content</label>
                                    <span class="text-red">*</span>
                                    <textarea name="content" 
                                              id="content" 
                                              class="form-control {{ $errors->has('content') ? 'is-invalid' : '' }}"
                                              rows="20"
                                              required>{{ old('content', (isset($document) && $document->id) ? $document->content : '') }}</textarea>
                                    @if ($errors->has('content'))
                                        <span class="text-red">
                                            <strong>{{ $errors->first('content') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        @if(isset($document) && $document->id)
                        <div class="row">
                            <div class="col-md-12">
                                <div class="callout callout-info">
                                    <h4><i class="fa fa-info-circle"></i> Document Information</h4>
                                    <p>
                                        <strong>Created:</strong> {{ $document->created_at->format('M d, Y g:i A') }}<br>
                                        <strong>Last Updated:</strong> {{ $document->updated_at->format('M d, Y g:i A') }}<br>
                                        <strong>Type:</strong> {{ $document->type ?? 'Policy and Procedures' }}<br>
                                        <strong>Created By:</strong> {{ $document->creator->first_name ?? 'Unknown' }} {{ $document->creator->last_name ?? '' }}<br>
                                        <strong>Status:</strong> 
                                        @if($document->is_active)
                                            <span class="label label-success">Active</span>
                                        @else
                                            <span class="label label-default">Inactive</span>
                                        @endif
                                        <br>
                                        @if($document->pdf_path)
                                            <strong>PDF Generated:</strong> <a href="{{ asset('storage/' . $document->pdf_path) }}" target="_blank">View PDF</a>
                                        @endif
                                    </p>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fa fa-save"></i> 
                            {{ isset($document) && $document->id ? 'Update Document' : 'Create Document' }}
                        </button>
                        @if(isset($document) && $document->id && $document->pdf_path)
                            <a href="{{ asset('storage/' . $document->pdf_path) }}" 
                               target="_blank" 
                               class="btn btn-info btn-lg">
                                <i class="fa fa-file-pdf-o"></i> View PDF
                            </a>
                        @endif
                        <a href="{{ route('acknowledge_document.index') }}" class="btn btn-default btn-lg">
                            <i class="fa fa-times"></i> Cancel
                        </a>
                    </div>
                </form>
            </div>
            <!-- /.box -->
        </div>
    </div>
    <!-- /.row -->
</section>
<script>
    $(function () {
        // Function to toggle other_document_name field based on type
        function toggleOtherDocumentNameField() {
            var selectedType = $('#type').val();
            if (selectedType === 'Other') {
                $('#other_document_name_row').show();
                $('#other_document_name').prop('required', true);
            } else {
                $('#other_document_name_row').hide();
                $('#other_document_name').prop('required', false);
            }
        }

        // Check on page load
        toggleOtherDocumentNameField();

        // Handle type change
        $('#type').on('change', function() {
            toggleOtherDocumentNameField();
        });

        // Handle "All" roles checkbox
        function handleRoleAll(checkbox) {
            if (checkbox.checked) {
                // Uncheck all other role checkboxes
                $('input[name="roles[]"]:not(#role_all)').prop('checked', false);
            }
        }

        // Handle individual role checkbox changes
        function handleRoleChange(checkbox) {
            if (checkbox.checked) {
                // Uncheck "All" if any specific role is selected
                $('#role_all').prop('checked', false);
            } else {
                // If all specific roles are unchecked, check "All"
                var anyChecked = $('input[name="roles[]"]:not(#role_all):checked').length > 0;
                if (!anyChecked) {
                    $('#role_all').prop('checked', true);
                }
            }
        }

        // Make functions globally accessible
        window.handleRoleAll = handleRoleAll;
        window.handleRoleChange = handleRoleChange;

        // Initialize Select2 for companies dropdown
        $('#companies').select2({
            allowClear: false,
            placeholder: 'Select companies',
            width: '100%'
        });

        // Handle "All" option selection
        $('#companies').on('select2:select', function (e) {
            var data = e.params.data;
            var selectedValues = $(this).val() || [];
            
            if (data.id === 'all') {
                // If "All" is selected, deselect all other options
                $(this).val(['all']).trigger('change');
            } else {
                // If a specific company is selected, remove "All" from selection
                var filteredValues = selectedValues.filter(function(val) {
                    return val !== 'all';
                });
                $(this).val(filteredValues).trigger('change');
            }
        });

        // Ensure proper state based on current selection - only remove "All" if both are selected
        var currentValues = $('#companies').val() || [];
        var hasAll = currentValues.indexOf('all') !== -1;
        var hasSpecificCompanies = currentValues.some(function(val) {
            return val !== 'all';
        });

        if (hasAll && hasSpecificCompanies) {
            // If both "All" and specific companies are selected, remove "All"
            var filteredValues = currentValues.filter(function(val) {
                return val !== 'all';
            });
            $('#companies').val(filteredValues).trigger('change');
        }

        // Store original content for comparison (if editing)
        // We'll capture this after CKEditor loads to get the actual formatted content
        var originalContent = '';
        var ckEditorInstance = null;
        
        // Replace the textarea with a CKEditor instance with auto-resize functionality
        ckEditorInstance = CKEDITOR.replace('content', {
            // Auto-resize the editor as content grows
            autoGrow_onStartup: true,
            autoGrow_minHeight: 300,
            autoGrow_maxHeight: 800,
            autoGrow_bottomSpace: 50,
            
            // Remove the resize handle since auto-resize handles it
            resize_enabled: false,
            
            // Enable auto-resize plugin
            extraPlugins: 'autogrow',
            
            // Set initial height
            height: 300,
            
            // Full toolbar for rich editing
            toolbar: [
                { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },
                { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
                { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll' ] },
                '/',
                { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
                { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
                { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
                { name: 'insert', items: [ 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak' ] },
                '/',
                { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
                { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
                { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] }
            ],
            
            // Capture original content after CKEditor is ready and has processed the content
            on: {
                instanceReady: function(ev) {
                    @if(isset($document) && $document->id)
                        // Wait a bit for CKEditor to fully process the content
                        setTimeout(function() {
                            // Get the content from CKEditor after it's been processed
                            originalContent = ev.editor.getData();
                        }, 500);
                    @endif
                }
            }
        });

        // Function to normalize HTML content for comparison
        // This removes formatting differences that CKEditor might introduce
        function normalizeContentForComparison(content) {
            if (!content) return '';
            
            // Decode HTML entities first (in case content is HTML-encoded)
            var tempDiv = $('<div>').html(content);
            var decodedContent = tempDiv.html();
            
            // Create another div to parse the decoded HTML
            var parseDiv = $('<div>').html(decodedContent);
            
            // Get text content (removes all HTML tags)
            var textContent = parseDiv.text().trim();
            
            // Also normalize whitespace (replace multiple spaces/tabs/newlines with single space)
            textContent = textContent.replace(/\s+/g, ' ');
            
            return textContent;
        }

        // Form submission validation
        $('#ackDocForm').on('submit', function(e) {
            // Update CKEditor instance
            for (instance in CKEDITOR.instances) {
                CKEDITOR.instances[instance].updateElement();
            }

            // Validate content
            if (!$('#content').val().trim()) {
                e.preventDefault();
                alert('Please enter document content.');
                return false;
            }

            // Check if editing existing document and content has changed
            @if(isset($document) && $document->id)
                // Get current content from CKEditor (after updateElement)
                var currentContent = '';
                if (ckEditorInstance && CKEDITOR.instances.content) {
                    currentContent = CKEDITOR.instances.content.getData();
                } else {
                    currentContent = $('#content').val();
                }
                
                // If originalContent is still empty, get it from CKEditor or hidden field
                // This handles the case where CKEditor hasn't finished loading yet
                if (!originalContent) {
                    if (CKEDITOR.instances.content) {
                        // Try to get from CKEditor if available
                        originalContent = CKEDITOR.instances.content.getData();
                    } else if ($('#original_content').length) {
                        // Fallback to hidden field
                        originalContent = $('#original_content').val();
                    }
                }
                
                // Normalize both contents for comparison (compare text content, not HTML structure)
                var normalizedOriginal = normalizeContentForComparison(originalContent);
                var normalizedCurrent = normalizeContentForComparison(currentContent);
                
                // Debug logging (can be removed in production)
                // console.log('Original normalized:', normalizedOriginal);
                // console.log('Current normalized:', normalizedCurrent);
                // console.log('Content changed:', normalizedOriginal !== normalizedCurrent);
                
                // Only consider content changed if the actual text content is different
                var contentChanged = normalizedOriginal !== normalizedCurrent && normalizedOriginal !== '' && normalizedCurrent !== '';
                var createNewConfirmed = $('#create_new_document').val() === '1';

                // If content changed and not yet confirmed, show alert
                if (contentChanged && !createNewConfirmed) {
                    e.preventDefault();
                    
                    swal({
                        title: 'Content Changed',
                        text: 'You have edited the document content. This will create a new document and set the existing document to inactive. The existing document will not be deleted. Do you want to continue?',
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, create new document',
                        cancelButtonText: 'Cancel'
                    }, function(isConfirm) {
                        if (isConfirm) {
                            // Set flag to indicate user confirmed
                            $('#create_new_document').val('1');
                            // Submit the form
                            $('#ackDocForm').submit();
                        }
                    });
                    
                    return false;
                }
            @endif
        });
    });
</script>
@endsection