@extends('layouts.app')
@section('title', 'Manage Checklist Items')

@section('content')
    <div class="fixed-action-bar">
        <div class="fw-semibold fixed-nav-title">Managing Items for: {{ $checklistTemplate->name }}</div>
        <div class="d-flex align-items-center">
             <a href="{{ route('csm.checklist-templates.index') }}">
                 <i class="fa-solid fa-xmark fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center ms-1"
                data-toggle="tooltip" title="Back to Templates"></i>
            </a>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-lg-8">
            <div class="card rounded-border">
                <div class="card-body">
                    <h5 class="card-title">Checklist Items</h5>
                    <div class="table-responsive">
                        <table class="table table-striped">
                             <thead class="bg-light">
                                <tr>
                                    <th style="width: 20px;"></th>
                                    <th>Item Text</th>
                                    <th style="width: 100px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="sortable-items">
                                @forelse ($items as $item)
                                    <tr data-id="{{ $item->id }}">
                                        <td><i class="fa-solid fa-grip-vertical" style="cursor: grab;"></i></td>
                                        <td>
                                            <span id="item-text-{{ $item->id }}">{{ $item->item_text }}</span>
                                            <textarea class="form-control d-none" id="item-input-{{ $item->id }}" style="resize: vertical; min-height: 40px;" maxlength="100">{{ $item->item_text }}</textarea>
                                        </td>
                                        <td>
                                            <div class="d-inline-flex table-action-btns" style="vertical-align: top;">
                                                <a href="#" class="action-btn edit-btn" data-id="{{ $item->id }}" title="Edit">
                                                    <i class="fa-solid fa-pencil rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue"></i>
                                                </a>
                                                 <a href="#" class="action-btn save-btn d-none" data-id="{{ $item->id }}" title="Save">
                                                    <i class="fa-solid fa-save rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-yellow"></i>
                                                </a>
                                                <a href="#" class="action-btn" title="Delete" onclick="event.preventDefault(); confirmDeleteItem('{{ $item->id }}');">
                                                    <i class="fa-solid fa-trash-can rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-red"></i>
                                                </a>
                                                <form id="delete-item-form-{{ $item->id }}" action="{{ route('csm.checklist-templates.items.destroy', [$checklistTemplate, $item]) }}" method="POST" style="display: none;">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center">No items have been added to this checklist yet.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card rounded-border">
                <div class="card-body">
                    <h5 class="card-title">Add New Item</h5>
                    <form action="{{ route('csm.checklist-templates.items.store', $checklistTemplate) }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="item_text" class="form-label">Item Text</label>
                            <textarea class="form-control @error('item_text') is-invalid @enderror" id="item_text" name="item_text" rows="3" required maxlength="100" oninput="updateCharCounter(this, 'char-counter')">{{ old('item_text') }}</textarea>
                            <small id="char-counter" class="form-text text-muted">0 / 100 characters</small>
                            @error('item_text')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-primary" style="background-color: var(--Brand-1); border-color: var(--Brand-1);">Add Item</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function updateCharCounter(textarea, counterId) {
    var currentLength = textarea.value.length;
    var maxLength = textarea.maxLength;
    document.getElementById(counterId).innerText = currentLength + ' / ' + maxLength + ' characters';
}

document.addEventListener('DOMContentLoaded', function() {
    var newItemTextarea = document.getElementById('item_text');
    if (newItemTextarea) {
        updateCharCounter(newItemTextarea, 'char-counter');
    }
});


$(document).ready(function() {
    // Edit and Save functionality
    $('.edit-btn').on('click', function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        $('#item-text-' + id).addClass('d-none');
        $('#item-input-' + id).removeClass('d-none').focus();
        $(this).addClass('d-none');
        $('.save-btn[data-id="' + id + '"]').removeClass('d-none');
    });

    $('.save-btn').on('click', function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        var newText = $('#item-input-' + id).val();
        var url = "{{ url('csm/checklist-templates') }}/{{ $checklistTemplate->id }}/items/" + id;
        
        $.ajax({
            url: url,
            type: 'POST', 
            data: {
                _token: '{{ csrf_token() }}',
                _method: 'PUT',
                item_text: newText
            },
            success: function(response) {
                if(response.success) {
                    $('#item-text-' + id).text(newText).removeClass('d-none');
                    $('#item-input-' + id).addClass('d-none');
                    $('.edit-btn[data-id="' + id + '"]').removeClass('d-none');
                    $('.save-btn[data-id="' + id + '"]').addClass('d-none');
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    if (errors.item_text) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: errors.item_text[0] // Show the first validation error
                        });
                    }
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'An error occurred. Please try again.'
                    });
                }
            }
        });
    });

    // Drag and Drop functionality
    var el = document.getElementById('sortable-items');
    if (el) {
        Sortable.create(el, {
            animation: 150,
            handle: '.fa-grip-vertical',
            onEnd: function () {
                var itemIds = [];
                $('#sortable-items tr').each(function() {
                    if ($(this).data('id')) {
                        itemIds.push($(this).data('id'));
                    }
                });
                
                if (itemIds.length > 0) {
                    $.ajax({
                        url: "{{ route('csm.checklist-templates.items.reorder', $checklistTemplate) }}",
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            ids: itemIds
                        },
                        success: function(response) {
                            // Optional: show a success toast
                        },
                        error: function() {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'An error occurred while reordering.'
                            });
                        }
                    });
                }
            }
        });
    }
});

function confirmDeleteItem(id) {
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById('delete-item-form-' + id).submit();
        }
    });
}
</script>
@endpush