@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card h-100 border-0 shadow-sm overflow-hidden p-3">
                    <div class="card-header border-bottom py-3 px-5 d-flex align-items-center justify-content-between">
                        <h5 class="mb-0">Work Hours Values</h5>
                        <button type="button" class="btn btn-outline-primary btn-sm" id="addNewRow">
                            <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                            Add New
                        </button>
                    </div>

                    <div class="card-body">
                        <div style="overflow: auto">
                            <table class="table table-bordered table-sm table bordered-table sm-table mb-0" id="workHoursTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Full Time Hours</th>
                                        <th>Part Time Hours</th>
                                        <th>Created At</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="workHoursTableBody">
                                    @forelse($workHoursValues as $value)
                                        <tr data-id="{{ $value->id }}" id="row-{{ $value->id }}">
                                            <td>{{ $value->id }}</td>
                                            <td>
                                                <span class="editable-field" data-field="full_time_hours" data-id="{{ $value->id }}">
                                                    {{ $value->full_time_hours }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="editable-field" data-field="part_time_hours" data-id="{{ $value->id }}">
                                                    {{ $value->part_time_hours }}
                                                </span>
                                            </td>
                                            <td>{{ $value->created_at->format('Y-m-d H:i') }}</td>
                                            <td>
                                                <button type="button" class="btn btn-outline-primary btn-sm btn-edit-row me-1" data-id="{{ $value->id }}">
                                                    <iconify-icon icon="ic:baseline-edit" class="text-lg"></iconify-icon>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger btn-sm btn-delete-row" data-id="{{ $value->id }}">
                                                    <iconify-icon icon="fluent:delete-24-regular" class="text-lg"></iconify-icon>
                                                </button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr id="emptyRow">
                                            <td colspan="5" class="text-center text-muted">No work hours values found. Click "Add New" to create one.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Modal -->
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Edit Work Hours Values</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="editForm">
                    <div class="modal-body">
                        <input type="hidden" id="editId" name="id">
                        <div class="mb-3">
                            <label for="editFullTimeHours" class="form-label">Full Time Hours</label>
                            <input type="number" class="form-control" id="editFullTimeHours" name="full_time_hours"
                                   min="0" max="168" required>
                        </div>
                        <div class="mb-3">
                            <label for="editPartTimeHours" class="form-label">Part Time Hours</label>
                            <input type="number" class="form-control" id="editPartTimeHours" name="part_time_hours"
                                   min="0" max="168" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-outline-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            const token = $('meta[name="csrf-token"]').attr('content');

            // Function to check row count and update button visibility
            function updateButtonVisibility() {
                const rowCount = $('#workHoursTableBody tr:not(#emptyRow)').length;
                if (rowCount <= 1) {
                    $('#addNewRow').hide();
                    $('.btn-delete-row').hide();
                } else {
                    $('#addNewRow').show();
                    $('.btn-delete-row').show();
                }
            }

            // Initial check on page load
            updateButtonVisibility();

            // Edit row
            $(document).on('click', '.btn-edit-row', function () {
                const id = $(this).data('id');
                const row = $(`#row-${id}`);
                const fullTimeHours = row.find('.editable-field[data-field="full_time_hours"]').text().trim();
                const partTimeHours = row.find('.editable-field[data-field="part_time_hours"]').text().trim();

                $('#editId').val(id);
                $('#editFullTimeHours').val(fullTimeHours);
                $('#editPartTimeHours').val(partTimeHours);

                $('#editModal').modal('show');
            });

            // Handle edit form submission
            $('#editForm').on('submit', function (e) {
                e.preventDefault();

                const id = $('#editId').val();
                const fullTimeHours = $('#editFullTimeHours').val();
                const partTimeHours = $('#editPartTimeHours').val();

                const submitBtn = $(this).find('button[type="submit"]');
                const originalHtml = submitBtn.html();
                submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Updating...');

                $.ajax({
                    url: '{{ url("work-hours-values") }}/' + id,
                    type: 'POST',
                    data: {
                        _token: token,
                        _method: 'PUT',
                        full_time_hours: fullTimeHours,
                        part_time_hours: partTimeHours,
                    },
                    dataType: 'json',
                    success: function (response) {
                        if (response.success) {
                            const row = $(`#row-${id}`);
                            row.find('.editable-field[data-field="full_time_hours"]').text(fullTimeHours);
                            row.find('.editable-field[data-field="part_time_hours"]').text(partTimeHours);

                            $('#editModal').modal('hide');

                            if (typeof toastr !== 'undefined') {
                                toastr.success(response.message);
                            }
                        }
                    },
                    error: function (xhr) {
                        const msg = xhr.responseJSON?.message || 'Error updating work hours values';
                        alert(msg);
                        submitBtn.prop('disabled', false).html(originalHtml);
                    },
                    complete: function () {
                        submitBtn.prop('disabled', false).html(originalHtml);
                    }
                });
            });

            // Add new row
            $('#addNewRow').on('click', function () {
                // Hide empty row if exists
                $('#emptyRow').remove();

                const newRow = `
                    <tr class="new-row" data-id="new-${Date.now()}">
                        <td><em>New</em></td>
                        <td>
                            <input type="number" class="form-control form-control-sm new-full-time" 
                                   placeholder="Full Time Hours" min="0" max="168" required>
                        </td>
                        <td>
                            <input type="number" class="form-control form-control-sm new-part-time" 
                                   placeholder="Part Time Hours" min="0" max="168" required>
                        </td>
                        <td><em>--</em></td>
                        <td>
                            <button type="button" class="btn btn-outline-success btn-sm btn-save-new">
                                <iconify-icon icon="ic:baseline-save" class="text-lg"></iconify-icon>
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm btn-cancel-new">
                                <iconify-icon icon="ic:baseline-cancel" class="text-lg"></iconify-icon>
                            </button>
                        </td>
                    </tr>`;

                $('#workHoursTableBody').prepend(newRow);
            });

            // Save new row
            $(document).on('click', '.btn-save-new', function () {
                const row = $(this).closest('tr');
                const fullTime = row.find('.new-full-time').val();
                const partTime = row.find('.new-part-time').val();

                if (!fullTime || !partTime) {
                    alert('Please fill in all fields');
                    return;
                }

                const btn = $(this);
                const originalHtml = btn.html();
                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');

                $.ajax({
                    url: '{{ route("work-hours-values.store") }}',
                    type: 'POST',
                    data: {
                        _token: token,
                        full_time_hours: fullTime,
                        part_time_hours: partTime,
                    },
                    dataType: 'json',
                    success: function (response) {
                        if (response.success) {
                            const data = response.data;
                            const newRowHtml = `
                                <tr data-id="${data.id}" id="row-${data.id}">
                                    <td>${data.id}</td>
                                    <td>
                                        <span class="editable-field" data-field="full_time_hours" data-id="${data.id}">
                                            ${data.full_time_hours}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="editable-field" data-field="part_time_hours" data-id="${data.id}">
                                            ${data.part_time_hours}
                                        </span>
                                    </td>
                                    <td>${new Date(data.created_at).toLocaleString()}</td>
                                    <td>
                                        <button type="button" class="btn btn-outline-danger btn-sm btn-delete-row" data-id="${data.id}">
                                            <iconify-icon icon="fluent:delete-24-regular" class="text-lg"></iconify-icon>
                                        </button>
                                    </td>
                                </tr>`;
                            row.replaceWith(newRowHtml);

                            // Update button visibility after adding
                            updateButtonVisibility();

                            if (typeof toastr !== 'undefined') {
                                toastr.success(response.message);
                            }
                        }
                    },
                    error: function (xhr) {
                        const msg = xhr.responseJSON?.message || 'Error creating work hours values';
                        alert(msg);
                        btn.prop('disabled', false).html(originalHtml);
                    }
                });
            });

            // Cancel new row
            $(document).on('click', '.btn-cancel-new', function () {
                const row = $(this).closest('tr');
                row.remove();
                if ($('#workHoursTableBody tr').length === 0) {
                    $('#workHoursTableBody').append(
                        '<tr id="emptyRow"><td colspan="5" class="text-center text-muted">No work hours values found. Click "Add New" to create one.</td></tr>'
                    );
                }
            });

            // Make fields editable on double click
            $(document).on('dblclick', '.editable-field', function () {
                const field = $(this);
                const fieldName = field.data('field');
                const id = field.data('id');
                const currentValue = field.text().trim();
                const row = $('#row-' + id);

                if (field.find('input').length > 0) {
                    return; // Already in edit mode
                }

                // Store current values from both fields
                const currentFullTime = row.find('.editable-field[data-field="full_time_hours"]').text().trim();
                const currentPartTime = row.find('.editable-field[data-field="part_time_hours"]').text().trim();

                const input = $('<input>', {
                    type: 'number',
                    class: 'form-control form-control-sm inline-edit-input',
                    value: currentValue,
                    min: 0,
                    max: 168,
                });

                field.html(input);
                input.focus().select();

                // Save on Enter or blur
                const saveField = function () {
                    const newValue = input.val();
                    if (newValue === currentValue) {
                        field.text(currentValue);
                        return;
                    }

                    if (newValue === '' || newValue < 0 || newValue > 168) {
                        alert('Please enter a valid number between 0 and 168');
                        field.text(currentValue);
                        return;
                    }

                    // Show loading
                    field.html('<span class="spinner-border spinner-border-sm"></span>');

                    // Prepare update data
                    const updateData = {
                        _token: token,
                        _method: 'PUT',
                        full_time_hours: fieldName === 'full_time_hours' ? newValue : currentFullTime,
                        part_time_hours: fieldName === 'part_time_hours' ? newValue : currentPartTime,
                    };

                    $.ajax({
                        url: '{{ url("work-hours-values") }}/' + id,
                        type: 'POST',
                        data: updateData,
                        dataType: 'json',
                        success: function (response) {
                            if (response.success) {
                                field.text(newValue);
                                // Update both fields with the response data to ensure consistency
                                if (response.data) {
                                    row.find('.editable-field[data-field="full_time_hours"]').text(response.data.full_time_hours);
                                    row.find('.editable-field[data-field="part_time_hours"]').text(response.data.part_time_hours);
                                }
                                if (typeof toastr !== 'undefined') {
                                    toastr.success(response.message);
                                }
                            }
                        },
                        error: function (xhr) {
                            const msg = xhr.responseJSON?.message || 'Error updating work hours values';
                            alert(msg);
                            field.text(currentValue);
                        }
                    });
                };

                input.on('blur', saveField);
                input.on('keypress', function (e) {
                    if (e.which === 13) { // Enter key
                        e.preventDefault();
                        saveField();
                    } else if (e.which === 27) { // Escape key
                        field.text(currentValue);
                    }
                });
            });

            // Delete row
            $(document).on('click', '.btn-delete-row', function () {
                const id = $(this).data('id');
                const row = $(`#row-${id}`);

                if (!confirm('Are you sure you want to delete this record?')) {
                    return;
                }

                const btn = $(this);
                const originalHtml = btn.html();
                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');

                $.ajax({
                    url: `{{ url('work-hours-values') }}/${id}`,
                    type: 'DELETE',
                    data: {
                        _token: token,
                        _method: 'DELETE',
                    },
                    dataType: 'json',
                    success: function (response) {
                        if (response.success) {
                            row.fadeOut(300, function () {
                                $(this).remove();
                                if ($('#workHoursTableBody tr').length === 0) {
                                    $('#workHoursTableBody').append(
                                        '<tr id="emptyRow"><td colspan="5" class="text-center text-muted">No work hours values found. Click "Add New" to create one.</td></tr>'
                                    );
                                }
                                // Update button visibility after deleting
                                updateButtonVisibility();
                            });
                            if (typeof toastr !== 'undefined') {
                                toastr.success(response.message);
                            }
                        }
                    },
                    error: function (xhr) {
                        const msg = xhr.responseJSON?.message || 'Error deleting work hours values';
                        alert(msg);
                        btn.prop('disabled', false).html(originalHtml);
                    }
                });
            });
        });
    </script>
@endpush