@extends('admin.layouts.base')
@section('title', 'Labor Rates - ' . $warehouse->name)

@section('content')
<div id="kt_app_content_container" class="app-container">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title fw-bold">Labor Rates - {{ $warehouse->name }}</h3>
            <div class="card-toolbar">
                <a href="{{ route('admin.warehouses.show', $warehouse->id) }}" class="btn btn-sm btn-light">
                    <i class="ki-duotone ki-arrow-left fs-5"><span class="path1"></span><span class="path2"></span></i>
                    Back to Warehouse
                </a>
            </div>
        </div>

        <div class="card-body">
            <div class="mb-5">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_labor_modal">
                    <i class="ki-duotone ki-plus fs-2"></i>
                    Add Labor Rate
                </button>
            </div>

            <table class="table align-middle table-row-dashed fs-6 gy-5">
                <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                        <th>Labor Type</th>
                        <th>Rate per Hour</th>
                        <th>Min Hours</th>
                        <th>Per Use Rate</th>
                        <th>Total Available</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-gray-600 fw-semibold">
                    @forelse($laborRates as $rate)
                        <tr>
                            <td><span class="badge badge-light-info">{{ $rate->laborType->name }}</span></td>
                            <td class="fw-bold">${{ number_format($rate->rate_per_hour, 2) }}/hr</td>
                            <td>{{ $rate->minimum_hours ?? 0 }} hrs</td>
                            <td>
                                @if($rate->per_use_rate)
                                    ${{ number_format($rate->per_use_rate, 2) }}
                                @else
                                    -
                                @endif
                            </td>
                            <td>{{ $rate->total_available }} workers</td>                            
                            <td>
                                <div class="form-check form-switch form-check-custom form-check-solid">
                                    <input class="form-check-input toggle-status" type="checkbox" 
                                        data-url="{{ route('admin.warehouses.labor-rates.toggle-status', [$warehouse->id, $rate->id]) }}"
                                        {{ $rate->is_active ? 'checked' : '' }} />
                                </div>
                            </td>
{{-- Instead of the form for delete, use this simpler approach --}}
<td class="text-end">
    <button type="button" class="btn btn-sm btn-light btn-active-light-primary" 
        onclick="editLabor({{ $rate->id }}, {{ $rate->labor_type_id }}, {{ $rate->rate_per_hour }}, {{ $rate->minimum_hours ?? 0 }}, {{ $rate->per_use_rate ?? 0 }}, {{ $rate->total_available }}, {{ $rate->is_active ? 'true' : 'false' }})">
        <i class="ki-duotone ki-pencil fs-5"><span class="path1"></span><span class="path2"></span></i>
        Edit
    </button>
    <button type="button" class="btn btn-sm btn-light btn-active-light-danger delete-labor-rate" 
        data-id="{{ $rate->id }}">
        <i class="ki-duotone ki-trash fs-5"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
        Delete
    </button>
</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-10">
                                <div class="text-gray-600">No labor rates configured yet</div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Labor Modal -->
<div class="modal fade" id="add_labor_modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <form action="{{ route('admin.warehouses.labor-rates.store', $warehouse->id) }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h2>Add Labor Rate</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-5">
                        <label class="form-label required">Labor Type</label>
                        <select name="labor_type_id" class="form-select" required>
                            <option value="">Select Labor Type</option>
                            @foreach($laborTypes as $type)
                                <option value="{{ $type->id }}" data-default-rate="{{ $type->default_rate_per_hour }}">{{ $type->name }} (Default: ${{ number_format($type->default_rate_per_hour, 2) }}/hr)</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="row mb-5">
                        <div class="col-md-6">
                            <label class="form-label required">Rate per Hour ($)</label>
                            <input type="number" step="0.01" name="rate_per_hour" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Minimum Hours</label>
                            <input type="number" name="minimum_hours" class="form-control" value="1" min="1">
                        </div>
                    </div>

                    <div class="mb-5">
                        <label class="form-label">Per Use Rate ($)</label>
                        <input type="number" step="0.01" name="per_use_rate" class="form-control" placeholder="Optional flat rate">
                        <div class="form-text">If set, this can be used instead of hourly billing</div>
                    </div>

                    <div class="mb-5">
                        <label class="form-label required">Total Available Workers</label>
                        <input type="number" name="total_available" class="form-control" value="10" required min="1">
                    </div>

                    <div class="mb-5">
                        <label class="form-label">Status</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="add_is_active" checked>
                            <label class="form-check-label" for="add_is_active">Active</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Labor Rate</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Labor Modal -->
<div class="modal fade" id="edit_labor_modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <form id="edit_labor_form" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h2>Edit Labor Rate</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-5">
                        <label class="form-label required">Labor Type</label>
                        <select name="labor_type_id" id="edit_labor_type_id" class="form-select" required>
                            @foreach($laborTypes as $type)
                                <option value="{{ $type->id }}">{{ $type->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="row mb-5">
                        <div class="col-md-6">
                            <label class="form-label required">Rate per Hour ($)</label>
                            <input type="number" step="0.01" name="rate_per_hour" id="edit_rate_per_hour" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Minimum Hours</label>
                            <input type="number" name="minimum_hours" id="edit_minimum_hours" class="form-control" min="1">
                        </div>
                    </div>

                    <div class="mb-5">
                        <label class="form-label">Per Use Rate ($)</label>
                        <input type="number" step="0.01" name="per_use_rate" id="edit_per_use_rate" class="form-control">
                    </div>

                    <div class="mb-5">
                        <label class="form-label required">Total Available Workers</label>
                        <input type="number" name="total_available" id="edit_total_available" class="form-control" required min="1">
                    </div>

                    <div class="mb-5">
                        <label class="form-label">Status</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="edit_is_active">
                            <label class="form-check-label" for="edit_is_active">Active</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Labor Rate</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const addModal  = new bootstrap.Modal('#add_labor_modal');
const editModal  = new bootstrap.Modal('#edit_labor_modal');

// Clear form when modal closes
document.getElementById('add_labor_modal').addEventListener('hidden.bs.modal', () => {
    $('#add_labor_modal form')[0].reset();
    clearErrors('#add_labor_modal');
});
document.getElementById('edit_labor_modal').addEventListener('hidden.bs.modal', () => {
    $('#edit_labor_form')[0].reset();
    clearErrors('#edit_labor_modal');
});

function clearErrors(modal) {
    $(modal).find('.is-invalid').removeClass('is-invalid');
    $(modal).find('.invalid-feedback').remove();
}

function showFieldErrors(form, errors) {
    Object.keys(errors).forEach(key => {
        const input = form.find(`[name="${key}"]`);
        input.addClass('is-invalid');
        let fb = input.next('.invalid-feedback');
        if (fb.length === 0) {
            fb = $('<div class="invalid-feedback"></div>');
            input.after(fb);
        }
        fb.text(errors[key][0]);
    });
}

function successAlert(message = 'Saved successfully!') {
    Swal.fire({
        icon: 'success',
        title: 'Success!',
        html: message,
        timer: 2000,
        timerProgressBar: true,
        showConfirmButton: false
    }).then(() => {
        location.reload();
    });
}

function errorAlert(message) {
    Swal.fire({
        icon: 'error',
        title: 'Oops...',
        html: message
    });
}

// Auto-fill default rate
$(document).on('change', 'select[name="labor_type_id"]', function () {
    const rate = $(this).find('option:selected').data('default-rate') || '';
    $(this).closest('form').find('input[name="rate_per_hour"]').val(rate);
});

// ADD SUBMIT
$('#add_labor_modal form').on('submit', function (e) {
    e.preventDefault();
    clearErrors('#add_labor_modal');

    const $form = $(this);
    const $btn  = $form.find('button[type="submit"]').prop('disabled', true);

    $.post($form.attr('action'), $form.serialize())
        .done(() => {
            addModal.hide();
            successAlert('Labor rate added successfully!');
        })
        .fail(xhr => {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON.errors;
                showFieldErrors($form, errors);
                errorAlert(Object.values(errors).flat().join('<br>'));
            } else {
                errorAlert('Something went wrong. Please try again.');
            }
        })
        .always(() => $btn.prop('disabled', false));
});

// EDIT — Open modal
window.editLabor = function(id, laborTypeId, rate, minH, perUse, total, active) {
    $('#edit_labor_type_id').val(laborTypeId);
    $('#edit_rate_per_hour').val(rate);
    $('#edit_minimum_hours').val(minH || '');
    $('#edit_per_use_rate').val(perUse || '');
    $('#edit_total_available').val(total);
    $('#edit_is_active').prop('checked', active);

    const url = '{{ route("admin.warehouses.labor-rates.update", ["warehouse" => $warehouse->id, "laborRate" => ":id"]) }}'
                .replace(':id', id);
    $('#edit_labor_form').attr('action', url);

    editModal.show();
};

// EDIT SUBMIT
$('#edit_labor_form').on('submit', function (e) {
    e.preventDefault();
    clearErrors('#edit_labor_modal');

    const $form = $(this);
    const $btn  = $form.find('button[type="submit"]').prop('disabled', true);

    $.ajax({
        url: $form.attr('action'),
        method: 'POST',
        data: $form.serialize() + '&_method=PUT'
    })
    .done(() => {
        editModal.hide();
        successAlert('Labor rate updated successfully!');
    })
    .fail(xhr => {
        if (xhr.status === 422) {
            showFieldErrors($form, xhr.responseJSON.errors);
            errorAlert(Object.values(xhr.responseJSON.errors).flat().join('<br>'));
        } else {
            errorAlert('Update failed: ' + (xhr.responseJSON?.message || 'Please try again.'));
        }
    })
    .always(() => $btn.prop('disabled', false));
});

// DELETE - FIXED with proper SweetAlert confirmation (like your demo)
$(document).on('submit', 'form[action*="destroy"]', function (e) {
    e.preventDefault();
    const form = this;
    const $form = $(form);
    const deleteUrl = $form.attr('action');

    Swal.fire({
        title: 'Delete Labor Rate?',
        text: 'This action cannot be undone!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, Delete!',
        cancelButtonText: 'Cancel',
        buttonsStyling: true,
        reverseButtons: true
    }).then((result) => {
        if (result.isConfirmed) {
            // Show loading state on the delete button
            const deleteBtn = $form.find('button[type="submit"]');
            const originalText = deleteBtn.html();
            deleteBtn.prop('disabled', true).html('<i class="ki-duotone ki-loading fs-5"></i> Deleting...');

            $.ajax({
                url: deleteUrl,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'DELETE'
                }
            })
            .done(() => {
                Swal.fire({
                    title: 'Deleted!',
                    text: 'Labor rate has been deleted successfully.',
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    location.reload();
                });
            })
            .fail((xhr) => {
                deleteBtn.prop('disabled', false).html(originalText);
                Swal.fire({
                    title: 'Error!',
                    text: 'Cannot delete labor rate. It may be in use.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        }
    });
});

// TOGGLE STATUS
$('.toggle-status').on('change', function () {
    const $cb = $(this);
    const url  = $cb.data('url');
    const was  = $cb.is(':checked');

    $.post(url, { _token: '{{ csrf_token() }}' })
        .done(() => {
            Swal.fire({ 
                icon: 'success', 
                title: 'Status Updated!', 
                timer: 1500, 
                showConfirmButton: false 
            });
        })
        .fail(() => {
            $cb.prop('checked', !was);
            errorAlert('Failed to update status');
        });
});

// ALTERNATIVE DELETE HANDLER (if you change to button approach)
$(document).on('click', '.delete-labor-rate', function () {
    const id = $(this).data('id');
    const deleteUrl = '{{ route("admin.warehouses.labor-rates.destroy", ["warehouse" => $warehouse->id, "laborRate" => ":id"]) }}'.replace(':id', id);

    Swal.fire({
        title: 'Delete Labor Rate?',
        text: 'This action cannot be undone!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, Delete!',
        cancelButtonText: 'Cancel',
        buttonsStyling: true,
        reverseButtons: true
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: deleteUrl,
                method: 'POST',
                data: { 
                    _token: '{{ csrf_token() }}',
                    _method: 'DELETE'
                }
            })
            .done(() => {
                Swal.fire({
                    title: 'Deleted!',
                    text: 'Labor rate has been deleted successfully.',
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    location.reload();
                });
            })
            .fail(() => {
                Swal.fire({
                    title: 'Error!',
                    text: 'Cannot delete labor rate. It may be in use.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        }
    });
});
</script>
@endpush