@extends('layouts.app')

@section('title', 'Update Lockers')

@section('no-page-header')

@section('content')
    <div class="space-y-6">
        <!-- Header -->
        <div class="flex items-center justify-between">

            <div class="flex space-x-3">
                <a href="{{ route('lockers.index') }}"
                    class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Lockers
                </a>
            </div>
        </div>

        <!-- Filters Section -->
        <div class="bg-white shadow rounded-lg p-6">
            <h2 class="text-lg font-medium text-gray-900 mb-4">Filter Lockers</h2>

            <!-- <button type="button" id="bulkUpdateBtn" class="hidden inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
    <i class="fas fa-edit mr-2"></i>
    Bulk Update (<span id="selectedCount">0</span>)
</button>  -->

            <form method="GET" action="{{ route('lockers.updateLockers') }}" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
                    <!-- Group Filter -->
                    <div>
                        <label for="group_id" class="block text-sm font-medium text-gray-700">Group</label>
                        <select id="group_id" name="group_id"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm">
                            <option value="">All Groups</option>
                            @foreach($lockerGroups as $group)
                                <option value="{{ $group->id }}" {{ request('group_id') == $group->id ? 'selected' : '' }}>
                                    {{ $group->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Type Filter -->
                    <div>
                        <label for="locker_type" class="block text-sm font-medium text-gray-700">Type <span class="text-danger">*</span></label>
                        <select id="locker_type" name="locker_type"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm" required>
                            <option value="">All Types</option>
                            @foreach($lockerTypes as $type)
                                <option value="{{ $type }}" {{ request('locker_type') == $type ? 'selected' : '' }}>
                                    {{ $type }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Row Filter -->
                    <div>
                        <label for="row" class="block text-sm font-medium text-gray-700">Row</label>
                        <select id="row" name="row"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm">
                            <option value="">All Rows</option>
                            @foreach($lockerRows as $row)
                                <option value="{{ $row }}" {{ request('row') == $row ? 'selected' : '' }}>
                                    {{ $row }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="locker_size" class="block text-sm font-medium text-gray-700">Size <span class="text-danger">*</span></label>
                        <select id="locker_size" name="locker_size"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm" required>
                            <option value="">All Sizes</option>
                            @foreach($lockerSizes as $size)
                                <option value="{{ $size }}" {{ request('locker_size') == $size ? 'selected' : '' }}>
                                    {{ ucfirst($size) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Search Input -->
                    <div>
                        <label for="search" class="block text-sm font-medium text-gray-700">Search</label>
                        <input type="text" id="search" name="search" value="{{ request('search') }}"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                            placeholder="Locker number...">
                    </div>

                    <!-- Filter and Reset Buttons -->
                    <div class="flex items-end space-x-2">
                        <button type="submit"
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            <i class="fas fa-filter mr-2"></i>
                            Filters
                        </button>
                        <a href="{{ route('lockers.updateLockers') }}"
                            class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            <i class="fas fa-times mr-2"></i>
                            Clear
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <!-- Results Section -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h2 class="text-lg font-medium text-gray-900">
                        Lockers ({{ $lockers->total() }} found)
                    </h2>
                    <div class="flex items-center space-x-3">
                        <!-- Selection Info -->
                        <div id="selectionInfo" class="hidden">
                            <span class="text-sm text-gray-600 font-medium">
                                <span id="selectedCount">0</span> lockers selected
                                <button type="button" id="clearSelection" class="text-primary-600 hover:text-primary-800 underline ml-2">Clear</button>
                            </span>
                        </div>
                        <button type="button" id="bulkUpdateBtn" class="hidden inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
    <i class="fas fa-edit mr-2"></i>
    Bulk Update
</button>
                    </div> 

                    @if(request()->hasAny(['group_id', 'locker_type', 'locker_size', 'row']))
                        <span class="text-sm text-gray-500">
                            Filters applied
                        </span>
                    @endif
                </div>
            </div>


            

            @if($lockers->count() > 0)
                <!-- Lockers Table -->
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
    <input type="checkbox" id="selectAllCheckboxes" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Locker Number
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Position
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Group
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Type
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Size
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Amount
                                </th>
                                <!-- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Status
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Customer
                                    </th> -->
                                <th scope="col"
                                    class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach($lockers as $locker)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-4 whitespace-nowrap text-center">
    <input type="checkbox" class="locker-checkbox rounded border-gray-300 text-primary-600 focus:ring-primary-500" value="{{ $locker->id }}">
</td>

                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        {{ $locker->locker_number }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ $locker->locker_row_column ?? '-' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ $locker->lockerGroup->name ?? '-' }}
                                    </td>
                                    <!-- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" data-field="locker_type" data-locker-id="{{ $locker->id }}">
                                        <span class="editable-field cursor-pointer hover:bg-gray-100 px-2 py-1 rounded">
                                            {{ $locker->locker_type }}
                                        </span>
                                        <input type="text" class="hidden form-input text-sm border-gray-300 rounded" 
                                               value="{{ $locker->locker_type }}" 
                                               data-original="{{ $locker->locker_type }}">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" data-field="locker_size" data-locker-id="{{ $locker->id }}">
                                        <span class="editable-field cursor-pointer hover:bg-gray-100 px-2 py-1 rounded">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                {{ ucfirst($locker->locker_size) }}
                                            </span>
                                        </span>
                                        <select class="hidden form-select text-sm border-gray-300 rounded" data-original="{{ $locker->locker_size }}">
                                            <option value="Small" {{ $locker->locker_size == 'Small' ? 'selected' : '' }}>Small</option>
                                            <option value="Medium" {{ $locker->locker_size == 'Medium' ? 'selected' : '' }}>Medium</option>
                                            <option value="Large" {{ $locker->locker_size == 'Large' ? 'selected' : '' }}>Large</option>
                                        </select>
                                    </td> -->

                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" data-field="locker_type" data-locker-id="{{ $locker->id }}">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                {{ $locker->locker_type }}
                                            </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" data-field="locker_size" data-locker-id="{{ $locker->id }}">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                {{ ucfirst($locker->locker_size) }}
                                            </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" data-field="locker_amount" data-locker-id="{{ $locker->id }}">
                                        <span class="editable-field cursor-pointer hover:bg-gray-100 px-2 py-1 rounded">
                                            {{ $locker->locker_amount }}
                                        </span>
                                        <input type="number" step="0.01" min="0" class="hidden form-input text-sm border-gray-300 rounded w-20" 
                                               value="{{ $locker->locker_amount }}" 
                                               data-original="{{ $locker->locker_amount }}">
                                    </td>

                                    <!-- <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                                    @if($locker->status == 'available') bg-green-100 text-green-800
                                                    @elseif($locker->status == 'occupied') bg-red-100 text-red-800
                                                    @elseif($locker->status == 'maintenance') bg-yellow-100 text-yellow-800
                                                    @elseif($locker->status == 'reserved') bg-blue-100 text-blue-800
                                                    @else bg-gray-100 text-gray-800
                                                    @endif">
                                                    {{ ucfirst($locker->status) }}
                                                </span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                {{ $locker->customer->name ?? '-' }}
                                            </td> -->
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <!-- Update Button -->
                                        <button type="button"
    class="text-blue-600 hover:text-blue-700 mr-2 inline-flex items-center px-3 py-1 bg-blue-50 rounded border border-blue-200 edit-btn"
    data-locker-id="{{ $locker->id }}">
    <i class="fas fa-edit mr-1"></i>
    Edit
</button>
<button type="button"
    class="hidden text-green-600 hover:text-green-700 mr-2 inline-flex items-center px-3 py-1 bg-green-50 rounded border border-green-200 save-btn"
    data-locker-id="{{ $locker->id }}">
    <i class="fas fa-check mr-1"></i>
    Submit
</button>
<button type="button"
    class="hidden text-red-600 hover:text-red-700 mr-2 inline-flex items-center px-3 py-1 bg-red-50 rounded border border-red-200 cancel-btn"
    data-locker-id="{{ $locker->id }}">
    <i class="fas fa-times mr-1"></i>
    Cancel
</button>


                                        <!-- Remove Button -->
                                        <!-- <form action="{{ route('lockers.destroy', $locker) }}" method="POST"
                                            onsubmit="return confirm('Are you sure you want to delete this locker? This action cannot be undone.')"
                                            class="inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-600 hover:text-red-900 inline-flex items-center">
                                                <i class="fas fa-trash mr-1"></i>
                                                
                                            </button>
                                        </form> -->
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="px-6 py-4 border-t border-gray-200">
                    {{ $lockers->links() }}
                </div>
            @else
                <!-- No Results -->
                <div class="px-6 py-12 text-center">
                    <i class="fas fa-search text-gray-400 text-5xl mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No lockers found</h3>
                    <p class="text-gray-500 mb-4">
                        @if(request()->hasAny(['group_id', 'locker_type', 'locker_size', 'row']))
                            Try adjusting your filters or
                            <a href="{{ route('lockers.updateLockers') }}" class="text-primary-600 hover:text-primary-500">clear all
                                filters</a>
                        @else
                            No lockers are available at the moment.
                        @endif
                    </p>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

$(document).ready(function() {

    // Bulk Update functionality
var selectAllPages = false;
var totalLockers = {{ $lockers->total() }};

// Select All checkbox - selects ALL lockers across all pages
$('#selectAllCheckboxes').on('change', function() {
    var isChecked = $(this).prop('checked');
    $('.locker-checkbox').prop('checked', isChecked);
    
    if (isChecked) {
        selectAllPages = true;
        $('#selectedCount').text(totalLockers);
        $('#bulkUpdateBtn').removeClass('hidden');
        $('#selectionInfo').removeClass('hidden');
    } else {
        selectAllPages = false;
        $('#selectedCount').text(0);
        $('#bulkUpdateBtn').addClass('hidden');
        $('#selectionInfo').addClass('hidden');
    }
});

// Individual checkbox - only selects visible lockers
$('.locker-checkbox').on('change', function() {
    var visibleCount = $('.locker-checkbox:checked').length;
    var totalVisible = $('.locker-checkbox').length;
    
    // If not all individual checkboxes are checked, uncheck select all
    if (visibleCount !== totalVisible) {
        $('#selectAllCheckboxes').prop('checked', false);
        selectAllPages = false;
    }
    
    if (visibleCount > 0) {
        $('#selectedCount').text(visibleCount);
        $('#bulkUpdateBtn').removeClass('hidden');
        $('#selectionInfo').removeClass('hidden');
    } else {
        $('#bulkUpdateBtn').addClass('hidden');
        $('#selectionInfo').addClass('hidden');
    }
});

// Clear selection
$(document).on('click', '#clearSelection', function() {
    selectAllPages = false;
    $('.locker-checkbox').prop('checked', false);
    $('#selectAllCheckboxes').prop('checked', false);
    $('#selectedCount').text(0);
    $('#bulkUpdateBtn').addClass('hidden');
    $('#selectionInfo').addClass('hidden');
});

$('#bulkUpdateBtn').on('click', function() {
    // Get the current selected count
    var currentCount = selectAllPages ? totalLockers : $('.locker-checkbox:checked').length;
    $('#modalLockerCount').text(currentCount);
    $('#bulkUpdateModal').removeClass('hidden');
});

// $('#closeBulkModal, [aria-hidden="true"]').on('click', function() {
//     $('#bulkUpdateModal').addClass('hidden');
// });

$('#bulkField').on('change', function() {
    if ($(this).val() === 'locker_size') {
        $('#bulkValueContainer').addClass('hidden');
        $('#bulkSizeOptions').removeClass('hidden');
    } else {
        $('#bulkValueContainer').removeClass('hidden');
        $('#bulkSizeOptions').addClass('hidden');
    }
});

$('#applyBulkUpdate').on('click', function() {
    console.log("Bulk update clicked");

    var field = $('#bulkField').val();
    var value = field === 'locker_size' ? $('#bulkSizeValue').val() : $('#bulkValue').val();
    var lockerIds = $('.locker-checkbox:checked').map(function() { return $(this).val(); }).get();
    
    if ((lockerIds.length === 0 && !selectAllPages) || !value) {
        alert('Please select lockers and enter a value');
        return;
    }
    
    // Build the request data
    var requestData = {
        _token: $('meta[name="csrf-token"]').attr('content'),
        field: field,
        value: value
    };
    
    // If select all pages is enabled, send filter params instead of locker_ids
    if (selectAllPages) {
        requestData.select_all = true;
        requestData.filters = {
            group_id: '{{ request('group_id') }}',
            locker_type: '{{ request('locker_type') }}',
            locker_size: '{{ request('locker_size') }}',
            row: '{{ request('row') }}'
        };
    } else {
        requestData.locker_ids = lockerIds;
    }
    
    $.ajax({
        // url: '/lockers/bulk-update',
        url: "{{ route('lockers.bulkUpdate') }}",
        method: 'POST',
        data: requestData,
        success: function(response) {
            if (response.success) {
                location.reload();
            }
        },
        error: function(xhr) {
            var errorMessage = 'Unknown error';
            
            if (xhr.responseJSON) {
                // Handle Laravel validation errors (errors object with field names)
                if (xhr.responseJSON.errors) {
                    var errors = [];
                    for (var field in xhr.responseJSON.errors) {
                        if (Array.isArray(xhr.responseJSON.errors[field])) {
                            errors.push(xhr.responseJSON.errors[field].join(', '));
                        } else {
                            errors.push(xhr.responseJSON.errors[field]);
                        }
                    }
                    errorMessage = errors.join('\n');
                } else if (xhr.responseJSON.error) {
                    errorMessage = xhr.responseJSON.error;
                } else if (xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
            } else if (xhr.statusText) {
                errorMessage = xhr.statusText;
            }
            
            alert('Update failed: ' + errorMessage);
        }
    });
});


    // $(document).ready(function() {
        // Inline editing functionality
        // $('.editable-field').on('click', function() {
        //     var $field = $(this);
        //     var $cell = $field.closest('td');
        //     var $input = $cell.find('input, select').first();
        //     var fieldType = $input.attr('type');
            
        //     // Hide the display span and show the input
        //     $field.addClass('hidden');
        //     $input.removeClass('hidden').focus();
            
        //     // Select text for text inputs
        //     if (fieldType === 'text' || fieldType === 'number') {
        //         $input.select();
        //     }
        // });

        // Handle input changes
        $('input.form-input, select.form-select').on('blur', function() {
            var $input = $(this);
            var $cell = $input.closest('td');
            var $field = $cell.find('.editable-field').first();
            var lockerId = $cell.data('locker-id');
            var fieldName = $cell.data('field');
            var originalValue = $input.data('original');
            var newValue = $input.val();
            
            // If value changed, save it
            if (newValue !== originalValue) {
                saveInlineUpdate(lockerId, fieldName, newValue, $input, $field);
            } else {
                // No change, just restore display
                restoreDisplay($input, $field);
            }
        });

        // Handle Enter key for saving
        $('input.form-input, select.form-select').on('keypress', function(e) {
            if (e.which === 13) { // Enter key
                e.preventDefault();
                $(this).blur();
            }
        });

        // Handle Escape key for canceling
        $('input.form-input, select.form-select').on('keydown', function(e) {
            if (e.which === 27) { // Escape key
                e.preventDefault();
                var $input = $(this);
                var $cell = $input.closest('td');
                var $field = $cell.find('.editable-field').first();
                var originalValue = $input.data('original');
                
                // Restore original value and display
                $input.val(originalValue);
                restoreDisplay($input, $field);
            }
        });

        function saveInlineUpdate(lockerId, fieldName, newValue, $input, $field) {
            var $cell = $input.closest('td');
            var originalValue = $input.data('original');
            
            // Show loading state
            $cell.addClass('opacity-50');
            
            // Send AJAX request
            $.ajax({
                url: '/lockers/' + lockerId + '/inline-update',
                method: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    field: fieldName,
                    value: newValue
                },
                success: function(response) {
                    if (response.success) {
                        // Update the display with new value
                        updateDisplayValue($field, fieldName, newValue);
                        $input.data('original', newValue);
                        
                        // Show success feedback
                        showSuccessFeedback($cell);
                    }
                },
                error: function(xhr) {
                    // Restore original value and show error
                    $input.val(originalValue);
                    showErrorFeedback($cell, xhr.responseJSON?.error || 'Update failed');
                },
                complete: function() {
                    $cell.removeClass('opacity-50');
                    restoreDisplay($input, $field);
                }
            });
        }

        function updateDisplayValue($field, fieldName, newValue) {
            switch(fieldName) {
                case 'locker_size':
                    $field.html('<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">' + 
                               ucfirst(newValue) + '</span>');
                    break;
                case 'locker_amount':
                    $field.text(newValue);
                    break;
                default:
                    $field.text(newValue);
            }
        }

        function restoreDisplay($input, $field) {
            $input.addClass('hidden');
            $field.removeClass('hidden');
        }

        function showSuccessFeedback($cell) {
            $cell.addClass('bg-green-50');
            setTimeout(function() {
                $cell.removeClass('bg-green-50');
            }, 1000);
        }

        function showErrorFeedback($cell, message) {
            $cell.addClass('bg-red-50');
            console.error('Update error:', message);
            setTimeout(function() {
                $cell.removeClass('bg-red-50');
            }, 2000);
        }

        $('.edit-btn').on('click', function () {
    var $row = $(this).closest('tr');

    // Hide edit button, show save and cancel buttons
    $(this).addClass('hidden');
    $row.find('.save-btn').removeClass('hidden');
    $row.find('.cancel-btn').removeClass('hidden');

    // Enable all editable fields in row
    $row.find('[data-field]').each(function () {
        var $cell = $(this);
        var $field = $cell.find('.editable-field');
        var $input = $cell.find('input, select');

        // Add highlight styles to amount field
        if ($cell.data('field') === 'locker_amount') {
            $field.addClass('hover:bg-black-100 px-2 py-1 rounded-lg border-2 border-black-300 text-black-700 font-semibold bg-black-50 transition-all duration-100');
            $input.addClass('border-2 border-black-400 rounded-lg px-2 py-1 font-semibold text-black-700 bg-white shadow-sm focus:ring-2 focus:ring-black-500 focus:border-black-500 transition-all duration-50');
        }

        $field.addClass('hidden');
        $input.removeClass('hidden');
    });
});

$('.save-btn').on('click', function () {
    var $row = $(this).closest('tr');
    var hasChanges = false;
   
    // Save all editable fields in the row
    $row.find('[data-field]').each(function () {
        var $cell = $(this);
        var $input = $cell.find('input, select');
        var $field = $cell.find('.editable-field');
        var lockerId = $cell.data('locker-id');
        var fieldName = $cell.data('field');
        var originalValue = $input.data('original');
        var newValue = $input.val();
       
        // If value changed, save it
        if (newValue !== originalValue) {
            hasChanges = true;
            saveInlineUpdate(lockerId, fieldName, newValue, $input, $field);
        } else {
            // No change, just restore display
            restoreDisplay($input, $field);
        }
    });
   
    // Refresh page after save
    if (hasChanges) {
        setTimeout(function() {
            location.reload();
        }, 500);
    } else {
        toggleBack($row);
    }
});

$('.cancel-btn').on('click', function () {
    var $row = $(this).closest('tr');
    
    // Restore original values
    $row.find('[data-field]').each(function () {
        var $cell = $(this);
        var $input = $cell.find('input, select');
        var $field = $cell.find('.editable-field');
        var originalValue = $input.data('original');
        
        // Remove highlight styles from amount field
        if ($cell.data('field') === 'locker_amount') {
            $field.removeClass('hover:bg-red-100 rounded-lg border-2 border-red-300 text-red-700 font-semibold bg-red-50 transition-all duration-200');
            $input.removeClass('border-2 border-red-400 rounded-lg px-1 py-0 font-semibold text-red-700 bg-white shadow-sm focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-200');
        }
        
        $input.val(originalValue);
        $input.addClass('hidden');
        $field.removeClass('hidden');
    });
    
    // Show edit button, hide save and cancel buttons
    $row.find('.edit-btn').removeClass('hidden');
    $row.find('.save-btn').addClass('hidden');
    $row.find('.cancel-btn').addClass('hidden');
});


function toggleBack($row) {

    // Hide save and cancel buttons
    $row.find('.save-btn').addClass('hidden');
    $row.find('.cancel-btn').addClass('hidden');

    // Show edit button
    $row.find('.edit-btn').removeClass('hidden');

    // Restore UI
    $row.find('[data-field]').each(function () {
        var $cell = $(this);
        var $field = $cell.find('.editable-field');
        var $input = $cell.find('input, select');

        // Remove highlight styles from amount field
        if ($cell.data('field') === 'locker_amount') {
            $field.removeClass('hover:bg-red-100 px-3 py-2 rounded-lg border-2 border-red-300 text-red-700 font-semibold bg-red-50 transition-all duration-200');
            $input.removeClass('border-2 border-red-400 rounded-lg px-3 py-2 font-semibold text-red-700 bg-white shadow-sm focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-200');
        }

        $input.addClass('hidden');
        $field.removeClass('hidden');
    });
}

    });
</script>

<!-- Bulk Update Modal -->
<div id="bulkUpdateModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-50" aria-hidden="true"></div>
        
        <div class="relative bg-white rounded-lg shadow-lg max-w-md w-full mx-4">
            <!-- Modal Header -->
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-medium text-gray-900">
                        Bulk Update Lockers
                    </h3>
                    <button type="button" id="closeBulkModalX" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            
            <!-- Modal Body -->
            <div class="px-6 py-4">
                <!-- Info Section -->
                <div class="mb-4 p-3 bg-gray-50 rounded">
                    <p class="text-sm text-gray-600">
                        You are about to update <strong id="modalLockerCount">0</strong> lockers
                    </p>
                </div>
                
                <!-- Field Selection -->
                <div class="mb-4">
                    <label for="bulkField" class="block text-sm font-medium text-gray-700 mb-1">
                        Field to Update
                    </label>
                    <select id="bulkField" name="bulkField" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                        <option value="locker_amount">Amount</option>
                    </select>
                </div>
                
                <!-- Value Input -->
                <div class="mb-4" id="bulkValueContainer">
                    <label for="bulkValue" class="block text-sm font-medium text-gray-700 mb-1">
                        New Amount
                    </label>
                    <input type="number" id="bulkValue" min="250" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter new amount">
                </div>
                
                <!-- Size Options (Hidden) -->
                <div class="mb-4 hidden" id="bulkSizeOptions">
                    <label for="bulkSizeValue" class="block text-sm font-medium text-gray-700 mb-1">
                        New Size
                    </label>
                    <select id="bulkSizeValue" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select Size</option>
                        <option value="Small">Small</option>
                        <option value="Medium">Medium</option>
                        <option value="Large">Large</option>
                    </select>
                </div>
            </div>
            
            <!-- Modal Footer -->
            <div class="px-6 py-3 bg-gray-50 border-t border-gray-200 rounded-b-lg">
                <div class="flex justify-end space-x-3">
                    <button type="button" id="closeBulkModal" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                        Cancel
                    </button>
                    <button type="button" id="applyBulkUpdate" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700">
                        Update
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
    const bulkField = document.getElementById('bulkField');
    const bulkValueContainer = document.getElementById('bulkValueContainer'); // Generic text input
    const bulkSizeOptions = document.getElementById('bulkSizeOptions');       // Size dropdown
    
    const modal = document.getElementById('bulkUpdateModal');
    const closeBtn = document.getElementById('closeBulkModal');
    const applyBtn = document.getElementById('applyBulkUpdate');

    // 1. Toggle visibility based on selection
    bulkField.addEventListener('change', (e) => {
        const selectedField = e.target.value;

        // Reset all to hidden first
        bulkValueContainer.classList.add('hidden');
        bulkSizeOptions.classList.add('hidden');

        // Show the relevant input
        if (selectedField === 'locker_size') {
            bulkSizeOptions.classList.remove('hidden');
        } else {
            // Default to text input for locker_amount or locker_type
            bulkValueContainer.classList.remove('hidden');
        }
    });

    // 2. Handle Closing Modal
    closeBtn.addEventListener('click', () => {
        modal.classList.add('hidden');
    });

    // Handle X button close
    document.getElementById('closeBulkModalX').addEventListener('click', () => {
        modal.classList.add('hidden');
    });

    // 3. Handle Update Logic
    applyBtn.addEventListener('click', () => {
        const field = bulkField.value;
        let newValue;

        if (field === 'locker_size') {
            newValue = document.getElementById('bulkSizeValue').value;
        } else {
            newValue = document.getElementById('bulkValue').value;
        }

        if (!newValue) {
            alert('Please provide a value');
            return;
        }

        console.log(`Updating ${field} to: ${newValue}`);
        
        // Add your AJAX/Fetch call here to update the backend
        // After success:
        // modal.classList.add('hidden');
    });
});
</script>
@endpush