@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Crane Maintenance Status</a></li>
    <li class="breadcrumb-item active" aria-current="page">List all Field Cranes</li>
  </ol>
</nav>
<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-4">
          <h6 class="card-title mb-0">List all Field Cranes</h6>
          <button class="btn btn-primary" id="addDprBtn" data-bs-toggle="modal" data-bs-target="#createEventModal">
            <i class="fas fa-plus me-2"></i> Add New DPR
          </button>
        </div>
        <div class="row">
          @foreach ($cranesFields as $cranesField)
          <div class="col-md-4 col-sm-6 mb-4">
            <div class="card h-100">
              <a href="cranesList/{{ $cranesField->id }}">
                <img class="card-img-top img-fluid"src="{{ asset('storage/CranesField/'.$cranesField->field_image) }}" alt="{{ $cranesField->field_name }}"
                style="height: 270px; object-fit: cover;">
              </a>
              <div class="card-body">
                <h5 class="card-title">{{ $cranesField->field_name }}</h5>
              </div>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Include the DPR Modal -->
@include('pages.craneMaintenance.dprForm')
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
  <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@endpush

@push('custom-scripts')
  <script type="text/javascript" src="{{ asset('js/createCraneManagementJs.js') }}"></script>
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  
<script>
$(document).ready(function() {
    // Configuration object
    const CONFIG = {
        select2: {
            placeholder: "Search or select user...",
            allowClear: true
        },
        statusOptions: {
            operational: 'Operational',
            underMaintenance: 'Under Maintenance',
            faulty: 'Faulty',
            outOfService: 'Out of Service'
        },
        findingStatusOptions: {
            open: 'open',
            inProgress: 'in_progress',
            resolved: 'resolved',
            closed: 'closed'
        },
        recommendationOptions: {
            repair: 'repair',
            replace: 'replace',
            remove: 'remove',
            notRequired: 'not_required'
        },
        routes: {
            store: '{{ route("dpr.store") }}',
            createUser: '/createUser',
            print: '{{ route("crane-maintenance.print", ["craneId" => "CRANE_ID", "reportDate" => "REPORT_DATE"]) }}'
        },
        csrfToken: '{{ csrf_token() }}'
    };

    // Cache DOM elements
    const $modal = $('#createEventModal');
    const $form = $('#createMaintenanceReport');
    const $tagNoSelect = $('#tag_no_select');
    const $maintenanceStatus = $('#maintenance_status');
    const $facility = $('#facility');
    const $date = $('#date');
    const $task = $('#task');
    const $manufacturer = $('#manufacturer');
    const $modelNo = $('#model_no');
    const $serialNo = $('#serial_no');
    const $approvalNotice = $('#approval-notice');
    const $allSections = $('#allSections');
    const $toggleAll = $('#toggleAll');
    const $userSelect = $('#user_id');
    const $newUserSection = $('#new_user_section');
    const $addNewUserBtn = $('#add_new_user_btn');
    const $submitBtn = $('#createMaintenanceReportButton');
    const $viewReportBtn = $('#viewReportButton');
    const $craneInventoryId = $('#craneInventoryId');
    const $addManpowerBtn = $('#add_manpower');

    // Store submission state
    let isSubmitted = false;

    // Initialize Select2
    function initializeSelect2() {
        $userSelect.select2({
            ...CONFIG.select2,
            dropdownParent: $modal
        });
    }

    // Initialize date field with today's date
    function initializeDateField() {
        $date.val(new Date().toISOString().split('T')[0]);
    }

    // Handle crane selection
    function handleCraneSelection() {
        const selectedOption = $(this).find('option:selected');
        const craneId = selectedOption.val();
        
        if (!craneId) return;
        
        $craneInventoryId.val(craneId);
        populateCraneDetails(selectedOption);
        setFacilityLocation(selectedOption);
    }

    function populateCraneDetails(selectedOption) {
        $manufacturer.val(selectedOption.data('manufacturer'));
        $modelNo.val(selectedOption.data('model'));
        $serialNo.val(selectedOption.data('serial'));
    }

    function setFacilityLocation(selectedOption) {
        const platform = selectedOption.data('platform');
        const company = selectedOption.data('company');
        const field = selectedOption.data('field');
        
        let location = '';
        if (platform && company) {
            location = `${platform} - ${company}`;
        } else if (platform) {
            location = platform;
        } else if (company) {
            location = company;
        } else if (field) {
            location = field;
        }
        
        $facility.val(location);
    }

    // Handle maintenance status change
    function handleMaintenanceStatusChange() {
        const requiresApproval = $(this).find('option:selected').data('requires-approval');
        $approvalNotice.toggle(!!requiresApproval);
    }

    // Section B - User Management
    function showNewUserSection() {
        $newUserSection.show();
        $addNewUserBtn.hide();
    }

    function hideNewUserSection() {
        $newUserSection.hide();
        $addNewUserBtn.show();
        $('#new_user_name').val('');
        $('#new_user_role').val('');
        $('#new_user_designation').val('');
    }

    // Enhanced Add Manpower to Team function
    function handleAddManpower() {
        // If new user section is visible, create new user first
        if ($newUserSection.is(':visible')) {
            createNewUserAndAddToTeam();
        } else {
            // Add existing user to team
            addExistingUserToTeam();
        }
    }

    // Function to create new user and add to team
    function createNewUserAndAddToTeam() {
        let newUserName = $('#new_user_name').val().trim();
        let newUserRole = $('#new_user_role').val();
        let newUserDesignation = $('#new_user_designation').val();

        // Validation
        if (!newUserName) {
            showAlert('Error', 'Please enter user name!', 'error');
            return;
        }

        if (!newUserRole) {
            showAlert('Error', 'Please select a role for the new user!', 'error');
            return;
        }

        if (!newUserDesignation) {
            showAlert('Error', 'Please select a designation for the new user!', 'error');
            return;
        }

        // Show loading
        Swal.fire({
            title: 'Creating New User',
            text: 'Please wait...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            type: "POST",
            url: CONFIG.routes.createUser,
            data: {
                name: newUserName,
                role_id: newUserRole,
                designation_id: newUserDesignation,
                _token: CONFIG.csrfToken,
            },
            success: function (response) {
                Swal.close();
                
                if (response.success) {
                    // Add the newly created user to the table
                    addTeamMemberRow(response.user.id, response.user.name, response.user.designation_name || 'N/A');

                    // Reset new user form
                    hideNewUserSection();

                    // Update the user dropdown with the new user
                    updateUserDropdown(response.user);

                    showAlert('Success', 'New user created and added to team successfully!', 'success');
                } else {
                    showAlert('Error', response.message || "Failed to create user!", 'error');
                }
            },
            error: function (xhr) {
                Swal.close();
                let errorMessage = "Error creating user!";
                
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                    errorMessage = Object.values(xhr.responseJSON.errors).join('<br>');
                }
                
                showAlert('Error', errorMessage, 'error');
            },
        });
    }

    // Function to add existing user to team
    function addExistingUserToTeam() {
        const userId = $userSelect.val();
        const userName = $userSelect.find('option:selected').text();
        const userDesignation = $userSelect.find('option:selected').data('designation') || 'Not specified';
        
        if (!userId) {
            showAlert('Error', 'Please select a user first or click "Add New User" to create one', 'error');
            return;
        }
        
        if ($(`#sectionB tbody tr[data-user-id="${userId}"]`).length > 0) {
            showAlert('Info', 'This user is already in the team', 'info');
            return;
        }
        
        addTeamMemberRow(userId, userName, userDesignation);
        $userSelect.val(null).trigger('change');
        
        showAlert('Success', 'User added to team successfully!', 'success');
    }

    function addTeamMemberRow(userId, userName, designation) {
        const rowCount = getRowCount('#sectionB');
        const rowHtml = `
            <tr data-user-id="${userId}">
                <td>${rowCount}</td>
                <td>${userId}</td>
                <td>${userName}</td>
                <td>${designation}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-row">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;
        $('#sectionB tbody').append(rowHtml);
    }

    // Function to update user dropdown with newly created user
    function updateUserDropdown(user) {
        const newOption = new Option(user.name, user.id, false, false);
        newOption.setAttribute('data-designation', user.designation_name || 'Not specified');
        $userSelect.append(newOption).trigger('change');
    }

    // Dynamic Row Addition Functions
    function addActivityRow(e) {
        e.preventDefault();
        const rowCount = getRowCount('#sectionC');
        const rowHtml = `
            <tr>
                <td>${rowCount}</td>
                <td>
                    <input type="text" class="form-control form-control-sm" name="activities[]" placeholder="Enter activity description">
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-row">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;
        addDynamicRow('#sectionC', rowHtml);
    }

    function addEquipmentStatusRow(e) {
        e.preventDefault();
        addSystemStatusRow('#sectionCA', 'component');
    }

    function addPrimarySystemRow(e) {
        e.preventDefault();
        addSystemStatusRow('#sectionCB', 'primary_system');
    }

    function addSubPrimarySystemRow(e) {
        e.preventDefault();
        addSystemStatusRow('#sectionCC', 'sub_primary_system');
    }

    function addSecondarySystemRow(e) {
        e.preventDefault();
        addSystemStatusRow('#sectionCD', 'secondary_system');
    }

    function addSystemStatusRow(tableSelector, systemType) {
        const rowCount = getRowCount(tableSelector);
        const rowHtml = `
            <tr>
                <td>${rowCount}</td>
                <td>
                    <input type="text" class="form-control form-control-sm" name="${systemType}_names[]" placeholder="Enter ${systemType.replace('_', ' ')} name">
                </td>
                <td>
                    <select class="form-select form-select-sm" name="${systemType}_statuses[]">
                        <option value="${CONFIG.statusOptions.operational}">Operational</option>
                        <option value="${CONFIG.statusOptions.underMaintenance}">Under Maintenance</option>
                        <option value="${CONFIG.statusOptions.faulty}">Faulty</option>
                        <option value="${CONFIG.statusOptions.outOfService}">Out of Service</option>
                    </select>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-row">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;
        addDynamicRow(tableSelector, rowHtml);
    }

    function addTomorrowPlanRow(e) {
        e.preventDefault();
        const rowCount = getRowCount('#sectionD');
        const rowHtml = `
            <tr>
                <td>${rowCount}</td>
                <td>
                    <input type="text" class="form-control form-control-sm" name="tomorrow_plans[]" placeholder="Enter plan for tomorrow">
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-row">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;
        addDynamicRow('#sectionD', rowHtml);
    }

    function addFindingsRow(e) {
        e.preventDefault();
        const rowCount = getRowCount('#sectionE');
        const uniqueId = generateUniqueId();
        
        const rowHtml = `
            <tr data-finding-id="${uniqueId}">
                <td>${rowCount}</td>
                <td>
                    <input type="text" class="form-control form-control-sm" name="finding_systems[]" placeholder="Enter system name">
                </td>
                <td>
                    <textarea class="form-control form-control-sm wide-text-input" name="finding_remarks[]" placeholder="Enter remarks" rows="2"></textarea>
                </td>
                <td>
                    <textarea class="form-control form-control-sm wide-text-input" name="finding_actions[]" placeholder="Enter action to do" rows="2"></textarea>
                </td>
                <td>
                    <select class="form-select form-select-sm recommendation-dropdown" name="finding_recommendations[]">
                        <option value="">Select Recommendation</option>
                        <option value="${CONFIG.recommendationOptions.repair}">Repair</option>
                        <option value="${CONFIG.recommendationOptions.replace}">Replace</option>
                        <option value="${CONFIG.recommendationOptions.remove}">Remove</option>
                        <option value="${CONFIG.recommendationOptions.notRequired}">Not Required</option>
                    </select>
                </td>
                <td>
                    <input type="file" class="form-control form-control-sm finding-before-images" 
                        name="findings[${rowCount-1}][images][]" multiple accept="image/*" 
                        data-finding-id="${uniqueId}" data-image-type="before">
                    <div class="image-preview mt-2" id="before-images-preview-${uniqueId}"></div>
                </td>
                <td>
                    <input type="file" class="form-control form-control-sm finding-after-images" 
                        name="findings[${rowCount-1}][image_after][]" multiple accept="image/*" 
                        data-finding-id="${uniqueId}" data-image-type="after">
                    <div class="image-preview mt-2" id="after-images-preview-${uniqueId}"></div>
                </td>
                <td>
                    <select class="form-select form-select-sm" name="finding_statuses[]">
                        <option value="${CONFIG.findingStatusOptions.open}">Open</option>
                        <option value="${CONFIG.findingStatusOptions.inProgress}">In Progress</option>
                        <option value="${CONFIG.findingStatusOptions.resolved}">Resolved</option>
                        <option value="${CONFIG.findingStatusOptions.closed}">Closed</option>
                    </select>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-row">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;
        addDynamicRow('#sectionE', rowHtml);
    }

    function addGeneralDescriptionRow(e) {
        e.preventDefault();
        const rowCount = getRowCount('#sectionF');
        const uniqueId = generateUniqueId();
        
        const rowHtml = `
            <tr data-description-id="${uniqueId}">
                <td>${rowCount}</td>
                <td>
                    <textarea class="form-control form-control-sm wide-text-input" 
                        name="general_descriptions[${rowCount-1}][description]" 
                        placeholder="Enter general description" 
                        rows="3"></textarea>
                </td>
                <td>
                    <input type="file" class="form-control form-control-sm general-description-images" 
                        name="general_descriptions[${rowCount-1}][images][]" 
                        multiple accept="image/*" 
                        data-description-id="${uniqueId}">
                    <div class="image-preview mt-2" id="description-images-preview-${uniqueId}"></div>
                    <small class="text-muted">You can select multiple images</small>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-row">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;
        addDynamicRow('#sectionF', rowHtml);
    }

    // Image Handling
    function handleFindingImageChange() {
        const findingId = $(this).data('finding-id');
        const imageType = $(this).data('image-type');
        const previewContainer = $(`#${imageType}-images-preview-${findingId}`);
        createImagePreviews(this, previewContainer);
    }

    function handleDescriptionImageChange() {
        const descriptionId = $(this).data('description-id');
        const previewContainer = $(`#description-images-preview-${descriptionId}`);
        createImagePreviews(this, previewContainer);
    }

    function createImagePreviews(fileInput, previewContainer) {
        previewContainer.empty();
        const files = fileInput.files;
        
        Array.from(files).forEach((file, index) => {
            if (!file.type.match('image.*')) return;
            
            const reader = new FileReader();
            reader.onload = function(e) {
                const thumb = createThumbnail(e.target.result, fileInput, index);
                previewContainer.append(thumb);
            };
            reader.readAsDataURL(file);
        });
    }

    function createThumbnail(imageSrc, fileInput, fileIndex) {
        const thumb = document.createElement('div');
        thumb.className = 'thumb-container d-inline-block me-2 mb-2 position-relative';
        thumb.innerHTML = `
            <img src="${imageSrc}" class="img-thumbnail" style="height: 60px; width: auto;">
            <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 p-0 remove-image" 
                    style="width: 18px; height: 18px; font-size: 10px; line-height: 1;">
                ×
            </button>
        `;
        
        $(thumb).find('.remove-image').click(function() {
            removeImageFromInput(fileInput, fileIndex, thumb);
        });
        
        return thumb;
    }

    function removeImageFromInput(fileInput, fileIndex, thumbElement) {
        if (fileInput && fileInput.files.length > 0) {
            const dt = new DataTransfer();
            Array.from(fileInput.files).forEach((file, index) => {
                if (index !== fileIndex) {
                    dt.items.add(file);
                }
            });
            fileInput.files = dt.files;
        }
        
        $(thumbElement).remove();
    }

    // Utility Functions
    function toggleAllSections() {
        const isVisible = $allSections.is(':visible');
        $allSections.toggle(!isVisible);
        $toggleAll.text(isVisible ? 'Show All Sections' : 'Hide All Sections');
    }

    function removeRow() {
        const row = $(this).closest('tr');
        const table = row.closest('table');
        
        row.remove();
        renumberTableRows(table);
    }

    function addDynamicRow(tableSelector, rowHtml) {
        $(`${tableSelector} tbody`).append(rowHtml);
    }

    function getRowCount(tableSelector) {
        return $(`${tableSelector} tbody tr`).length + 1;
    }

    function renumberTableRows(table) {
        table.find('tbody tr').each(function(index) {
            $(this).find('td:first').text(index + 1);
        });
    }

    function generateUniqueId() {
        return Date.now() + Math.floor(Math.random() * 1000);
    }

    function showAlert(title, text, icon, timer = 3000) {
        return Swal.fire({ 
            title, 
            text, 
            icon,
            timer: timer,
            showConfirmButton: false
        });
    }

    // Form Validation
    function validateForm() {
        const errors = [];
        
        if (!$tagNoSelect.val()) errors.push('Please select a crane');
        if (!$maintenanceStatus.val()) errors.push('Please select a maintenance status');
        if (!$facility.val().trim()) errors.push('Please enter facility/location');
        if (!$date.val()) errors.push('Please select a date');
        if (!$task.val().trim()) errors.push('Please enter task/job description');
        
        return errors;
    }

    // Form Data Collection
    function collectFormData() {
        const formData = new FormData();
        
        // Section A - Required fields
        formData.append('craneInventoryId', $craneInventoryId.val());
        formData.append('date', $date.val());
        formData.append('task', $task.val());
        formData.append('maintenance_status', $maintenanceStatus.val());
        
        // Section B - Team members
        const userIds = $('#sectionB tbody tr').map(function() {
            return $(this).data('user-id');
        }).get();
        if (userIds.length) formData.append('user_ids', JSON.stringify(userIds));
        
        // Section C - Activities
        const activities = collectInputValues('#sectionC', 'input[name="activities[]"]');
        if (activities.length) formData.append('activities', JSON.stringify(activities));
        
        // System status sections
        collectSystemStatusData(formData);
        
        // Section D - Tomorrow's plans
        const tomorrowPlans = collectInputValues('#sectionD', 'input[name="tomorrow_plans[]"]');
        if (tomorrowPlans.length) formData.append('tomorrow_plans', JSON.stringify(tomorrowPlans));
        
        // Section E - Findings
        collectFindingsData(formData);
        
        // Section F - General descriptions
        collectGeneralDescriptionsData(formData);
        
        // CSRF token
        formData.append('_token', CONFIG.csrfToken);
        
        return formData;
    }

    function collectInputValues(tableSelector, inputSelector) {
        return $(`${tableSelector} tbody tr`).map(function() {
            return $(this).find(inputSelector).val().trim();
        }).get().filter(val => val);
    }

    function collectSystemStatusData(formData) {
        const systemTypes = [
            { selector: '#sectionCA', nameKey: 'component_names', statusKey: 'component_statuses' },
            { selector: '#sectionCB', nameKey: 'primary_system_names', statusKey: 'primary_system_statuses' },
            { selector: '#sectionCC', nameKey: 'sub_primary_system_names', statusKey: 'sub_primary_system_statuses' },
            { selector: '#sectionCD', nameKey: 'secondary_system_names', statusKey: 'secondary_system_statuses' }
        ];
        
        systemTypes.forEach(systemType => {
            const systems = [];
            $(`${systemType.selector} tbody tr`).each(function() {
                const name = $(this).find(`input[name="${systemType.nameKey}[]"]`).val().trim();
                const status = $(this).find(`select[name="${systemType.statusKey}[]"]`).val();
                if (name) systems.push({ name, status });
            });
            if (systems.length) formData.append(systemType.nameKey.replace('_names', '_systems'), JSON.stringify(systems));
        });
    }

    function collectFindingsData(formData) {
        let findingIndex = 0;

        $('#sectionE tbody tr').each(function() {
            const system = $(this).find('input[name="finding_systems[]"]').val()?.trim() || '';
            const remarks = $(this).find('textarea[name="finding_remarks[]"]').val()?.trim() || '';
            const action = $(this).find('textarea[name="finding_actions[]"]').val()?.trim() || '';
            const recommendation = $(this).find('select[name="finding_recommendations[]"]').val() || '';
            const status = $(this).find('select[name="finding_statuses[]"]').val() || 'open';
            const findingId = $(this).data('finding-id');

            // Get images
            const beforeImagesInput = $(`.finding-before-images[data-finding-id="${findingId}"]`)[0];
            const afterImagesInput = $(`.finding-after-images[data-finding-id="${findingId}"]`)[0];
            const hasBeforeImages = beforeImagesInput?.files.length > 0;
            const hasAfterImages = afterImagesInput?.files.length > 0;

            // Only add finding if at least one field has data or images
            if (system || remarks || action || recommendation || hasBeforeImages || hasAfterImages) {
                // Add text data as FormData fields
                formData.append(`findings[${findingIndex}][system]`, system);
                formData.append(`findings[${findingIndex}][remarks]`, remarks);
                formData.append(`findings[${findingIndex}][action]`, action);
                formData.append(`findings[${findingIndex}][recommendation]`, recommendation);
                formData.append(`findings[${findingIndex}][status]`, status);

                // Add before images
                if (hasBeforeImages) {
                    Array.from(beforeImagesInput.files).forEach(file => {
                        formData.append(`findings[${findingIndex}][images][]`, file);
                    });
                }

                // Add after images
                if (hasAfterImages) {
                    Array.from(afterImagesInput.files).forEach(file => {
                        formData.append(`findings[${findingIndex}][image_after][]`, file);
                    });
                }

                findingIndex++;
            }
        });
    }

    function collectGeneralDescriptionsData(formData) {
        const descriptions = [];
        
        $('#sectionF tbody tr').each(function(index) {
            const textarea = $(this).find('textarea');
            let description = textarea.val() || '';
            const descriptionId = $(this).data('description-id');
            
            // Always add the description, but ensure it's not empty
            if (description.trim() === '') {
                description = 'No description provided';
            }
            
            // ALWAYS add to array
            descriptions.push({ description: description.trim() });
            
            // Handle images
            const imagesInput = $(`.general-description-images[data-description-id="${descriptionId}"]`)[0];
            if (imagesInput?.files.length) {
                Array.from(imagesInput.files).forEach(file => {
                    formData.append(`general_descriptions[${index}][images][]`, file);
                });
            }
        });
        
        if (descriptions.length) {
            formData.append('general_descriptions', JSON.stringify(descriptions));
        }
    }

    // Form Submission Handler
    async function handleFormSubmission(e) {
        e.preventDefault();
        
        // Check if already submitted
        if (isSubmitted) {
            showAlert('Info', 'DPR has already been submitted', 'info');
            return;
        }
        
        // Validate form
        const errors = validateForm();
        if (errors.length) {
            showAlert('Validation Error', errors.join('<br>'), 'error');
            return;
        }
        
        // Show loading
        const swalInstance = await showAlert('Submitting DPR', 'Please wait...', 'info');
        Swal.showLoading();
        
        try {
            const formData = collectFormData();
            const response = await submitFormData(formData);
            
            await Swal.fire({
                icon: 'success',
                title: 'Success',
                text: 'DPR created successfully',
                timer: 2000,
                showConfirmButton: false
            });
            
            // Set submission state
            isSubmitted = true;
            
            // Update button states
            updateButtonStatesAfterSubmission();
            
            // Automatically open the report in new tab
            openReportInNewTab($craneInventoryId.val(), $date.val());
            
        } catch (error) {
            console.error('Submission error:', error);
            handleSubmissionError(error);
        }
    }

    function submitFormData(formData) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: CONFIG.routes.store,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: resolve,
                error: reject
            });
        });
    }

    function handleSubmissionError(xhr) {
        let errorMessage = 'An error occurred while creating the DPR';
        
        if (xhr.responseJSON?.message) {
            errorMessage = xhr.responseJSON.message;
        } else if (xhr.responseJSON?.errors) {
            errorMessage = Object.values(xhr.responseJSON.errors).join('<br>');
        } else if (xhr.responseJSON?.error) {
            errorMessage = xhr.responseJSON.error;
        }
        
        showAlert('Error', errorMessage, 'error');
    }

    // Function to open report in new tab using your existing route
    function openReportInNewTab(craneId, reportDate) {
        if (!craneId || !reportDate) {
            console.error('Missing craneId or reportDate');
            return;
        }
        
        // Construct the report URL using your existing route structure
        const reportUrl = CONFIG.routes.print
            .replace('CRANE_ID', craneId)
            .replace('REPORT_DATE', reportDate);
        
        // Open in new tab
        window.open(reportUrl, '_blank');
    }

    // Update button states after submission
    function updateButtonStatesAfterSubmission() {
        $viewReportBtn
            .removeClass('btn-info')
            .addClass('btn-success')
            .html('<i class="fas fa-external-link-alt me-2"></i>View Report');
        
        $submitBtn
            .prop('disabled', true)
            .text('Submitted')
            .removeClass('btn-primary')
            .addClass('btn-secondary');
    }

    // Handle View Report button click
    function handleViewReport() {
        if (isSubmitted) {
            // If submitted, open the report in new tab
            openReportInNewTab($craneInventoryId.val(), $date.val());
        } else {
            // Otherwise show preview modal
            generateReportPreview();
            $('#viewReportModal').modal('show');
        }
    }

    // Generate Report Preview
    function generateReportPreview() {
        let previewHtml = '';
        
        // Section A: General Information
        previewHtml += '<div class="section-title">SECTION (A): GENERAL INFORMATION</div>';
        previewHtml += '<table class="table table-bordered">';
        previewHtml += '<tr><th>Facility/Location:</th><td>' + ($facility.val() || 'N/A') + '</td></tr>';
        previewHtml += '<tr><th>Date:</th><td>' + ($date.val() || 'N/A') + '</td></tr>';
        previewHtml += '<tr><th>Task/Job Description:</th><td>' + ($task.val() || 'N/A') + '</td></tr>';
        previewHtml += '<tr><th>Crane:</th><td>' + ($tagNoSelect.find('option:selected').text() || 'N/A') + '</td></tr>';
        previewHtml += '<tr><th>Manufacturer:</th><td>' + ($manufacturer.val() || 'N/A') + '</td></tr>';
        previewHtml += '<tr><th>Model No:</th><td>' + ($modelNo.val() || 'N/A') + '</td></tr>';
        previewHtml += '<tr><th>Serial No:</th><td>' + ($serialNo.val() || 'N/A') + '</td></tr>';
        previewHtml += '<tr><th>Maintenance Status:</th><td>' + ($maintenanceStatus.find('option:selected').text() || 'N/A') + '</td></tr>';
        previewHtml += '</table>';
        
        // Section B: Manpower
        previewHtml += '<div class="section-title mt-4">SECTION (B): MAN POWER / PERSONNEL</div>';
        const manpowerRows = $('#sectionB tbody tr');
        if (manpowerRows.length > 0) {
            previewHtml += '<table class="table table-bordered">';
            previewHtml += '<tr><th>No</th><th>ID</th><th>Name</th><th>Designation</th></tr>';
            manpowerRows.each(function(index) {
                const cells = $(this).find('td');
                previewHtml += '<tr>';
                previewHtml += '<td>' + (index + 1) + '</td>';
                previewHtml += '<td>' + $(cells[1]).text() + '</td>';
                previewHtml += '<td>' + $(cells[2]).text() + '</td>';
                previewHtml += '<td>' + $(cells[3]).text() + '</td>';
                previewHtml += '</tr>';
            });
            previewHtml += '</table>';
        } else {
            previewHtml += '<div class="alert alert-warning">No manpower data added</div>';
        }
        
        // Section C: Today's Work Activity
        previewHtml += '<div class="section-title mt-4">SECTION (C): TODAY\'S WORK ACTIVITY</div>';
        const activityRows = $('#sectionC tbody tr');
        if (activityRows.length > 0) {
            previewHtml += '<table class="table table-bordered">';
            previewHtml += '<tr><th>No</th><th>Activity</th></tr>';
            activityRows.each(function(index) {
                const activity = $(this).find('input').val();
                if (activity) {
                    previewHtml += '<tr>';
                    previewHtml += '<td>' + (index + 1) + '</td>';
                    previewHtml += '<td>' + activity + '</td>';
                    previewHtml += '</tr>';
                }
            });
            previewHtml += '</table>';
        } else {
            previewHtml += '<div class="alert alert-warning">No activities added</div>';
        }
        
        // Section D: Tomorrow's Plan
        previewHtml += '<div class="section-title mt-4">SECTION (D): TOMORROW PLAN</div>';
        const tomorrowRows = $('#sectionD tbody tr');
        if (tomorrowRows.length > 0) {
            previewHtml += '<table class="table table-bordered">';
            previewHtml += '<tr><th>No</th><th>Plan</th></tr>';
            tomorrowRows.each(function(index) {
                const plan = $(this).find('input').val();
                if (plan) {
                    previewHtml += '<tr>';
                    previewHtml += '<td>' + (index + 1) + '</td>';
                    previewHtml += '<td>' + plan + '</td>';
                    previewHtml += '</tr>';
                }
            });
            previewHtml += '</table>';
        } else {
            previewHtml += '<div class="alert alert-warning">No tomorrow plans added</div>';
        }
        
        // Section E: Findings & Remarks
        previewHtml += '<div class="section-title mt-4">SECTION (E): FINDINGS & REMARKS</div>';
        const findingRows = $('#sectionE tbody tr');
        if (findingRows.length > 0) {
            previewHtml += '<table class="table table-bordered">';
            previewHtml += '<tr><th>No</th><th>System Name</th><th>Remarks</th><th>Action to do</th><th>Recommendation</th><th>Status</th></tr>';
            findingRows.each(function(index) {
                const system = $(this).find('input[name="finding_systems[]"]').val();
                const remarks = $(this).find('textarea[name="finding_remarks[]"]').val();
                const action = $(this).find('textarea[name="finding_actions[]"]').val();
                const recommendation = $(this).find('select[name="finding_recommendations[]"]').val();
                const status = $(this).find('select[name="finding_statuses[]"]').val();
                
                if (system || remarks || action || recommendation) {
                    previewHtml += '<tr>';
                    previewHtml += '<td>' + (index + 1) + '</td>';
                    previewHtml += '<td>' + (system || 'N/A') + '</td>';
                    previewHtml += '<td>' + (remarks || 'N/A') + '</td>';
                    previewHtml += '<td>' + (action || 'N/A') + '</td>';
                    previewHtml += '<td>' + (recommendation || 'N/A') + '</td>';
                    previewHtml += '<td>' + (status || 'N/A') + '</td>';
                    previewHtml += '</tr>';
                }
            });
            previewHtml += '</table>';
        } else {
            previewHtml += '<div class="alert alert-warning">No findings added</div>';
        }
        
        // Section F: General Descriptions & Images
        previewHtml += '<div class="section-title mt-4">SECTION (F): GENERAL DESCRIPTIONS & IMAGES</div>';
        const descriptionRows = $('#sectionF tbody tr');
        if (descriptionRows.length > 0) {
            previewHtml += '<table class="table table-bordered">';
            previewHtml += '<tr><th>No</th><th>Description</th></tr>';
            descriptionRows.each(function(index) {
                const description = $(this).find('textarea').val();
                if (description) {
                    previewHtml += '<tr>';
                    previewHtml += '<td>' + (index + 1) + '</td>';
                    previewHtml += '<td>' + description + '</td>';
                    previewHtml += '</tr>';
                }
            });
            previewHtml += '</table>';
        } else {
            previewHtml += '<div class="alert alert-warning">No general descriptions added</div>';
        }
        
        $('#reportPreview').html(previewHtml);
    }

    // Reset form when modal closes
    function resetForm() {
        $form[0].reset();
        $('table tbody').empty();
        $newUserSection.hide();
        $addNewUserBtn.show();
        $allSections.hide();
        $toggleAll.text('Show All Sections');
        $approvalNotice.hide();
        
        // Reset button states
        $viewReportBtn
            .removeClass('btn-success')
            .addClass('btn-info')
            .html('<i class="fas fa-file-alt me-2"></i>View Report');
            
        $submitBtn
            .prop('disabled', false)
            .text('Submit DPR')
            .removeClass('btn-secondary')
            .addClass('btn-primary')
            .html('<i class="fas fa-paper-plane me-2"></i>Submit DPR');
        
        // Reset submission state
        isSubmitted = false;
    }

    // Initialize everything
    function initialize() {
        initializeSelect2();
        initializeDateField();
        
        // Bind event listeners
        $tagNoSelect.on('change', handleCraneSelection);
        $maintenanceStatus.on('change', handleMaintenanceStatusChange);
        $addNewUserBtn.on('click', showNewUserSection);
        $('#cancel_new_user').on('click', hideNewUserSection);
        $addManpowerBtn.on('click', handleAddManpower);
        $toggleAll.on('click', toggleAllSections);
        $('#add_activity').on('click', addActivityRow);
        $('#add_equipment_status').on('click', addEquipmentStatusRow);
        $('#add_primary_status').on('click', addPrimarySystemRow);
        $('#add_sub_primary_status').on('click', addSubPrimarySystemRow);
        $('#add_secondary_status').on('click', addSecondarySystemRow);
        $('#add_tomorrow_plan').on('click', addTomorrowPlanRow);
        $('#add_findings').on('click', addFindingsRow);
        $('#add_general_description').on('click', addGeneralDescriptionRow);
        $submitBtn.on('click', handleFormSubmission);
        $viewReportBtn.on('click', handleViewReport);
        
        // Delegated events
        $(document)
            .on('click', '.remove-row', removeRow)
            .on('change', '.finding-before-images, .finding-after-images', handleFindingImageChange)
            .on('change', '.general-description-images', handleDescriptionImageChange);

        // Modal cleanup
        $modal.on('hidden.bs.modal', resetForm);
    }

    // Start the application
    initialize();
});
</script>
@endpush