@extends('admin.layouts.base')
@section('title', 'Equipment 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">Equipment 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_equipment_modal">
                    <i class="ki-duotone ki-plus fs-2"></i>
                    Add Equipment 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>Equipment Type</th>
                        <th>Charge Type</th>
                        <th>Rate</th>
                        <th>Units Available</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-gray-600 fw-semibold">
                    @forelse($equipmentRates as $rate)
                        <tr>
                            <td><span class="badge badge-light-warning">{{ $rate->equipmentType->name }}</span></td>
                            <td><span class="badge badge-light-info">{{ ucfirst(str_replace('_', ' ', $rate->charge_type)) }}</span></td>
                            <td class="fw-bold">{{ $rate->rate_label }}</td>
                            <td>{{ $rate->total_units_available }} units</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.equipment-rates.toggle-status', [$warehouse->id, $rate->id]) }}"
                                        {{ $rate->is_active ? 'checked' : '' }} />
                                </div>
                            </td>
                            <td class="text-end">
                                <button type="button" class="btn btn-sm btn-light btn-active-light-primary" 
                                    onclick="editEquipment({{ $rate->id }}, {{ $rate->equipment_type_id }}, '{{ $rate->charge_type }}', {{ $rate->rate_per_hour ?? 0 }}, {{ $rate->per_use_rate ?? 0 }}, {{ $rate->daily_rate ?? 0 }}, {{ $rate->total_units_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-equipment-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="6" class="text-center py-10">
                                <div class="text-gray-600">No equipment rates configured yet</div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Equipment Modal -->
<div class="modal fade" id="add_equipment_modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <form id="add_equipment_form" action="{{ route('admin.warehouses.equipment-rates.store', $warehouse->id) }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h2>Add Equipment 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">Equipment Type</label>
                        <select name="equipment_type_id" class="form-select" required>
                            <option value="">Select Equipment Type</option>
                            @foreach($equipmentTypes 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="mb-5">
                        <label class="form-label required">Charge Type</label>
                        <select name="charge_type" class="form-select" required onchange="toggleRateInputs(this.value, 'add')">
                            <option value="hourly">Hourly Rate</option>
                            <option value="per_use">Per Use Rate</option>
                            <option value="daily">Daily Rate</option>
                        </select>
                    </div>

                    <div class="mb-5" id="add_hourly_rate_div">
                        <label class="form-label required">Rate per Hour ($)</label>
                        <input type="number" step="0.01" name="rate_per_hour" class="form-control">
                    </div>

                    <div class="mb-5" id="add_per_use_rate_div" style="display: none;">
                        <label class="form-label required">Per Use Rate ($)</label>
                        <input type="number" step="0.01" name="per_use_rate" class="form-control">
                    </div>

                    <div class="mb-5" id="add_daily_rate_div" style="display: none;">
                        <label class="form-label required">Daily Rate ($)</label>
                        <input type="number" step="0.01" name="daily_rate" class="form-control">
                    </div>

                    <div class="mb-5">
                        <label class="form-label required">Total Units Available</label>
                        <input type="number" name="total_units_available" class="form-control" value="5" 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 Equipment Rate</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Equipment Modal -->
<div class="modal fade" id="edit_equipment_modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <form id="edit_equipment_form" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h2>Edit Equipment 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">Equipment Type</label>
                        <select name="equipment_type_id" id="edit_equipment_type_id" class="form-select" required>
                            @foreach($equipmentTypes as $type)
                                <option value="{{ $type->id }}">{{ $type->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-5">
                        <label class="form-label required">Charge Type</label>
                        <select name="charge_type" id="edit_charge_type" class="form-select" required onchange="toggleRateInputs(this.value, 'edit')">
                            <option value="hourly">Hourly Rate</option>
                            <option value="per_use">Per Use Rate</option>
                            <option value="daily">Daily Rate</option>
                        </select>
                    </div>

                    <div class="mb-5" id="edit_hourly_rate_div">
                        <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">
                    </div>

                    <div class="mb-5" id="edit_per_use_rate_div" style="display: none;">
                        <label class="form-label required">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" id="edit_daily_rate_div" style="display: none;">
                        <label class="form-label required">Daily Rate ($)</label>
                        <input type="number" step="0.01" name="daily_rate" id="edit_daily_rate" class="form-control">
                    </div>

                    <div class="mb-5">
                        <label class="form-label required">Total Units Available</label>
                        <input type="number" name="total_units_available" id="edit_total_units_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 Equipment Rate</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

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

// Clear form when modal closes
document.getElementById('add_equipment_modal').addEventListener('hidden.bs.modal', () => {
    $('#add_equipment_form')[0].reset();
    clearErrors('#add_equipment_modal');
    // Reset to default view
    toggleRateInputs('hourly', 'add');
});
document.getElementById('edit_equipment_modal').addEventListener('hidden.bs.modal', () => {
    $('#edit_equipment_form')[0].reset();
    clearErrors('#edit_equipment_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
    });
}

function toggleRateInputs(type, prefix) {
    // Just show/hide — DO NOT clear values!
    $('#' + prefix + '_hourly_rate_div').hide();
    $('#' + prefix + '_per_use_rate_div').hide();
    $('#' + prefix + '_daily_rate_div').hide();

    if (type === 'hourly') {
        $('#' + prefix + '_hourly_rate_div').show();
    } else if (type === 'per_use') {
        $('#' + prefix + '_per_use_rate_div').show();
    } else if (type === 'daily') {
        $('#' + prefix + '_daily_rate_div').show();
    }
}

window.editEquipment = function(id, equipmentTypeId, chargeType, ratePerHour, perUseRate, dailyRate, totalUnits, isActive) {
    $('#edit_equipment_type_id').val(equipmentTypeId);
    $('#edit_charge_type').val(chargeType);

    // Clear all rate fields first
    $('#edit_rate_per_hour, #edit_per_use_rate, #edit_daily_rate').val('');

    // Fill only the correct one
    if (chargeType === 'hourly') $('#edit_rate_per_hour').val(ratePerHour ?? '');
    if (chargeType === 'per_use') $('#edit_per_use_rate').val(perUseRate ?? '');
    if (chargeType === 'daily') $('#edit_daily_rate').val(dailyRate ?? '');

    $('#edit_total_units_available').val(totalUnits);
    $('#edit_is_active').prop('checked', isActive);

    toggleRateInputs(chargeType, 'edit');

    const url = '{{ route("admin.warehouses.equipment-rates.update", ["warehouse" => $warehouse->id, "equipmentRate" => ":id"]) }}'.replace(':id', id);
    $('#edit_equipment_form').attr('action', url);
    editModal.show();
};

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

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

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

    $.post($form.attr('action'), $form.serialize())
        .done(() => {
            addModal.hide();
            successAlert('Equipment 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 SUBMIT
$('#edit_equipment_form').on('submit', function (e) {
    e.preventDefault();
    clearErrors('#edit_equipment_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('Equipment 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 FUNCTIONALITY
$(document).on('click', '.delete-equipment-rate', function () {
    const id = $(this).data('id');
    const deleteUrl = '{{ route("admin.warehouses.equipment-rates.destroy", ["warehouse" => $warehouse->id, "equipmentRate" => ":id"]) }}'.replace(':id', id);
    const $btn = $(this);

    Swal.fire({
        title: 'Delete Equipment 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
            const originalText = $btn.html();
            $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status"></span> Deleting...');

            $.ajax({
                url: deleteUrl,
                method: 'POST',
                data: { 
                    _token: '{{ csrf_token() }}',
                    _method: 'DELETE'
                }
            })
            .done(() => {
                Swal.fire({
                    title: 'Deleted!',
                    text: 'Equipment rate has been deleted successfully.',
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    location.reload();
                });
            })
            .fail((xhr) => {
                $btn.prop('disabled', false).html(originalText);
                Swal.fire({
                    title: 'Error!',
                    text: 'Cannot delete equipment 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');
        });
});

// Initialize modals on page load
$(document).ready(function() {
    // Set initial state for add modal
    toggleRateInputs('hourly', 'add');
});
</script>
@endpush