@extends('admin.layouts.layout')

@section('title', 'Inspector Payouts')

@push('page_css')
<link rel="stylesheet" href="{{ asset('assets/css/payouts.css') }}">
@endpush

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Inspector Payouts</h3>
                    <div class="card-tools">
                        <!-- Filters -->
                        <form method="GET" class="d-flex gap-2">
                            @if(!session('tenant_id') && $tenants->count() > 0)
                                <select name="tenant_id" class="form-select form-control-sm" onchange="this.form.submit()">
                                    <option value="">All Tenants</option>
                                    @foreach($tenants as $tenant)
                                        <option value="{{ $tenant->id }}" {{ $tenantId == $tenant->id ? 'selected' : '' }}>
                                            {{ $tenant->name }}
                                        </option>
                                    @endforeach
                                </select>
                            @endif
                            
                            <input type="text" name="start_date" value="{{ $startDate }}" 
                                   class="form-control form-control-sm datepicker" placeholder="Start Date"
                                   onchange="this.form.submit()">
                            <input type="text" name="end_date" value="{{ $endDate }}" 
                                   class="form-control form-control-sm datepicker" placeholder="End Date"
                                   onchange="this.form.submit()">
                                   
                            @if($startDate || $endDate || $tenantId)
                                <a href="{{ route('admin.payouts.index') }}" class="btn btn-sm btn-dark">Clear</a>
                            @endif
                        </form>
                    </div>
                </div>

                <div class="card-body p-0">
                    @if($inspectorPayouts && count($inspectorPayouts) > 0)
                        <!-- Summary Header -->
                        <div class="bg-light p-3 border-bottom">
                            <div class="row text-center">
                                <div class="col-md-3">
                                    <strong>Gross Amount: ${{ number_format($grandTotal, 2) }}</strong>
                                </div>
                                <div class="col-md-3">
                                    <strong>Total Amount: ${{ number_format($grandTotal, 2) }}</strong>
                                </div>
                                <div class="col-md-3">
                                    <strong>Overdue Payment: ${{ number_format($grandTotal, 2) }}</strong>
                                </div>
                                <div class="col-md-3">
                                    <strong>{{ count($inspectorPayouts) }} Inspector(s)</strong>
                                </div>
                            </div>
                        </div>

                        <!-- Inspector List -->
                        <div class="list-group list-group-flush">
                            @foreach($inspectorPayouts as $inspectorData)
                                <div class="list-group-item p-0">
                                    <!-- Inspector Header -->
                                    <div class="inspector-header p-3 d-flex justify-content-between align-items-center" 
                                         data-bs-toggle="collapse" 
                                         data-bs-target="#inspector-{{ $inspectorData['inspector']['id'] }}">
                                        <div class="d-flex align-items-center">
                                            <div class="inspector-avatar me-3">
                                                <i class="fas fa-user"></i>
                                            </div>
                                            <div>
                                                <strong class="inspector-name">{{ $inspectorData['inspector']['name'] }}</strong>
                                                <div class="inspector-stats mt-1">
                                                    <small class="text-muted">
                                                        <span class="me-3"><i class="fas fa-dollar-sign me-1"></i>Gross: ${{ number_format($inspectorData['total_gross'], 2) }}</span>
                                                        <span class="me-3"><i class="fas fa-calendar-check me-1"></i>Overdue: ${{ number_format($inspectorData['total_overdue'], 2) }}</span>
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <div class="total-amount me-3">
                                                <strong class="amount-value">${{ number_format($inspectorData['total_gross'], 2) }}</strong>
                                                <div class="amount-label">Total</div>
                                            </div>
                                            <i class="fas fa-chevron-down chevron-icon"></i>
                                        </div>
                                    </div>

                                    <!-- Schedule Details (Collapsible) -->
                                    <div id="inspector-{{ $inspectorData['inspector']['id'] }}" class="collapse">
                                        
                                        @if(count($inspectorData['inspection_fees']) > 0)
                                            <!-- Inspection Fee Section -->
                                            <div class="inspection-fee-header p-2">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <div class="d-flex align-items-center">
                                                        <div class="section-icon me-2">
                                                            <i class="fas fa-search-plus"></i>
                                                        </div>
                                                        <span class="section-title" style="margin-top: 11px !important;">Inspection Fees</span>
                                                        <span class="section-item-count ms-2">({{ count($inspectorData['inspection_fees']) }} item{{ count($inspectorData['inspection_fees']) > 1 ? 's' : '' }})</span>
                                                    </div>
                                                    <div class="section-total">
                                                        <strong>${{ number_format($inspectorData['inspection_total'], 2) }}</strong>
                                                    </div>
                                                </div>
                                            </div>
                                            @foreach($inspectorData['inspection_fees'] as $schedule)
                                                <div class="border-bottom p-3 schedule-item">
                                                    <div class="row align-items-center">
                                                        <div class="col-md-5">
                                                            <strong>{{ \Carbon\Carbon::parse($schedule['date'])->format('m/d/Y') }}</strong>
                                                            <br>
                                                            <small class="text-muted">{{ $schedule['appointment_id'] }}</small>
                                                            <span class="badge badge-info ms-1" 
                                                                  data-bs-toggle="tooltip" 
                                                                  data-bs-placement="top" 
                                                                  title="{{ $schedule['inspector_names'] }}">
                                                                {{ $schedule['inspector_count'] }} Inspector{{ $schedule['inspector_count'] > 1 ? 's' : '' }}
                                                            </span>
                                                            @if($schedule['status'] == 'Unpaid')
                                                                <span class="badge badge-warning ms-1">{{ $schedule['status'] }}</span>
                                                            @else
                                                                <span class="badge badge-success ms-1">{{ $schedule['status'] }}</span>
                                                            @endif
                                                        </div>
                                                        <div class="col-md-5">
                                                            <div class="mb-1">{{ $schedule['address'] }}</div>
                                                            <small class="text-muted">{{ $schedule['service_name'] }}</small>
                                                        </div>
                                                        <div class="col-md-2 text-end">
                                                            <strong>${{ number_format($schedule['amount'], 2) }}</strong>
                                                            <br>
                                                            <small class="text-muted">
                                                                {{ ucfirst($schedule['pay_type']) }}
                                                                @if(isset($schedule['payout_type']) && $schedule['payout_type'])
                                                                    | {{ ucfirst($schedule['payout_type']) }}
                                                                @endif
                                                            </small>
                                                            <button class="btn btn-sm btn-outline-primary ms-1" 
                                                                    onclick="editAmount({{ $schedule['schedule_payout_id'] }}, {{ $schedule['amount'] }})">
                                                                <i class="fas fa-edit"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif

                                        @if(count($inspectorData['commission_fees']) > 0)
                                            <!-- Commission Fee Section -->
                                            <div class="commission-fee-header p-2">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <div class="d-flex align-items-center">
                                                        <div class="section-icon me-2">
                                                            <i class="fas fa-percentage"></i>
                                                        </div>
                                                        <span class="section-title" style="margin-top: 11px !important;">Commission Fees</span>
                                                        <span class="section-item-count ms-2">({{ count($inspectorData['commission_fees']) }} item{{ count($inspectorData['commission_fees']) > 1 ? 's' : '' }})</span>
                                                    </div>
                                                    <div class="section-total">
                                                        <strong>${{ number_format($inspectorData['commission_total'], 2) }}</strong>
                                                    </div>
                                                </div>
                                            </div>
                                            @foreach($inspectorData['commission_fees'] as $schedule)
                                                <div class="border-bottom p-3 schedule-item">
                                                    <div class="row align-items-center">
                                                        <div class="col-md-5">
                                                            <strong>{{ \Carbon\Carbon::parse($schedule['date'])->format('m/d/Y') }}</strong>
                                                            <br>
                                                            <small class="text-muted">{{ $schedule['appointment_id'] }}</small>
                                                            <span class="badge badge-info ms-1" 
                                                                  data-bs-toggle="tooltip" 
                                                                  data-bs-placement="top" 
                                                                  title="{{ $schedule['inspector_names'] }}">
                                                                {{ $schedule['inspector_count'] }} Inspector{{ $schedule['inspector_count'] > 1 ? 's' : '' }}
                                                            </span>
                                                            @if($schedule['status'] == 'Unpaid')
                                                                <span class="badge badge-warning ms-1">{{ $schedule['status'] }}</span>
                                                            @else
                                                                <span class="badge badge-success ms-1">{{ $schedule['status'] }}</span>
                                                            @endif
                                                        </div>
                                                        <div class="col-md-5">
                                                            <div class="mb-1">{{ $schedule['address'] }}</div>
                                                            <small class="text-muted">{{ $schedule['service_name'] }}</small>
                                                        </div>
                                                        <div class="col-md-2 text-end">
                                                            <strong>${{ number_format($schedule['amount'], 2) }}</strong>
                                                            <br>
                                                            <small class="text-muted">
                                                                {{ ucfirst($schedule['pay_type']) }}
                                                                @if(isset($schedule['payout_type']) && $schedule['payout_type'])
                                                                    | {{ ucfirst($schedule['payout_type']) }}
                                                                @endif
                                                            </small>
                                                            <button class="btn btn-sm btn-outline-primary ms-1" 
                                                                    onclick="editAmount({{ $schedule['schedule_payout_id'] }}, {{ $schedule['amount'] }})">
                                                                <i class="fas fa-edit"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif

                                        @if(count($inspectorData['inspection_fees']) == 0 && count($inspectorData['commission_fees']) == 0)
                                            <div class="p-3 text-center text-muted">
                                                <i class="fas fa-info-circle me-1"></i>
                                                No payouts found for this inspector.
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center p-5">
                            <i class="fas fa-money-bill-wave fa-3x text-muted mb-3"></i>
                            <h4 class="text-muted">No Payouts Found</h4>
                            <p class="text-muted">
                                @if($startDate || $endDate)
                                    No payouts found for the selected date range.
                                @else
                                    No payouts have been calculated yet. Payouts are automatically calculated when schedules are created or updated.
                                @endif
                            </p>
                            @if($startDate || $endDate)
                                <a href="{{ route('admin.payouts.index') }}" class="btn btn-primary">View All Payouts</a>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

<!-- Edit Amount Modal -->
<div class="modal fade" id="editAmountModal" tabindex="-1" role="dialog" aria-labelledby="editAmountModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header" >
                <div class="d-flex align-items-center mb-2">
                    <div class="modal-icon me-3">
                        <i class="fas fa-edit"></i>
                    </div>
                    <div>
                        <h5 class="modal-title text-white" id="editAmountModalLabel">
                            Update Payout Amount
                        </h5>
                    </div>
                </div>
                <button type="button" class="btn-close mb-2" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editAmountForm">
                <div class="modal-body">
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="currentAmount" class="form-label fw-bold">
                                <i class="fas fa-dollar-sign me-1 text-muted"></i>
                                Current Amount
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light">$</span>
                                <input type="number" step="0.01" class="form-control bg-light" id="currentAmount" readonly>
                            </div>
                            <small class="text-muted">Original calculated amount</small>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="newAmount" class="form-label fw-bold text-danger">
                                <i class="fas fa-edit me-1"></i>
                                New Payout Amount *
                            </label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="number" step="0.01" min="0" class="form-control" id="newAmount" name="new_amount" required>
                                <input type="hidden" id="schedulePayoutId" name="schedule_payout_id">
                            </div>
                            <small class="text-muted">Enter the adjusted amount</small>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="note" class="form-label fw-bold">
                            <i class="fas fa-sticky-note me-1 text-muted"></i>
                            Adjustment Reason
                        </label>
                        <textarea class="form-control" id="note" name="note" rows="3" 
                                  placeholder="Please provide a reason for this adjustment (e.g., Performance bonus, Overtime work, Correction, etc.)"></textarea>
                        <small class="text-muted">This note will be saved for audit purposes</small>
                    </div>
                    
                    <div class="row" id="amountDifference">
                        <div class="col-12">
                            <div class="alert alert-light border">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="fw-bold">Amount Difference:</span>
                                    <span id="differenceAmount" class="fw-bold fs-5"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-primary" id="updateAmountBtn">
                        <i class="fas fa-save me-1"></i>
                        Update Amount
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection


@push('page_script')
<script>

    // Global function for edit amount onclick handlers
function editAmount(schedulePayoutId, currentAmount) {
    $('#schedulePayoutId').val(schedulePayoutId);
    $('#currentAmount').val(currentAmount);
    $('#newAmount').val(currentAmount);
    $('#note').val('');
    $('#editAmountModal').modal('show');
}

$(document).ready(function() {
    // Initialize Bootstrap tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Handle chevron rotation on collapse toggle
    $('[data-bs-toggle="collapse"]').on('click', function() {
        const chevron = $(this).find('.chevron-icon');
        chevron.toggleClass('expanded');
    });

    // Calculate and display amount difference
    $('#newAmount').on('input', function() {
        const currentAmount = parseFloat($('#currentAmount').val()) || 0;
        let newAmount = parseFloat($(this).val()) || 0;
        
        // Prevent negative values
        if (newAmount < 0) {
            $(this).val('0');
            newAmount = 0;
            showNotification('warning', 'Negative amounts are not allowed. Value has been set to 0.');
        }
        
        const difference = newAmount - currentAmount;
        
        if (newAmount > 0 && difference !== 0) {
            let differenceText = '';
            let alertClass = '';
            
            if (difference > 0) {
                differenceText = `+$${Math.abs(difference).toFixed(2)} (Increase)`;
                alertClass = 'alert-success';
            } else {
                differenceText = `-$${Math.abs(difference).toFixed(2)} (Decrease)`;
                alertClass = 'alert-danger';
            }
            
            $('#differenceAmount').text(differenceText);
            $('#amountDifference .alert').removeClass('alert-light alert-success alert-danger border').addClass(alertClass);
            $('#amountDifference').show();
        } else {
            $('#amountDifference').hide();
        }
    });

    // Additional validation on blur to ensure no negative values
    $('#newAmount').on('blur', function() {
        const value = parseFloat($(this).val());
        if (isNaN(value) || value < 0) {
            $(this).val('0');
            if (value < 0) {
                $(this).addClass('is-invalid');
                setTimeout(() => {
                    $(this).removeClass('is-invalid');
                }, 3000);
                showNotification('error', 'Negative amounts are not permitted.');
            }
        }
    });

    // Reset modal when closed
    $('#editAmountModal').on('hidden.bs.modal', function() {
        $('#editAmountForm')[0].reset();
        $('#amountDifference').hide();
        $('#updateAmountBtn').prop('disabled', false).html('<i class="fas fa-save me-1"></i>Update Amount');
    });

    // Handle edit amount button clicks
    $('.edit-amount-btn').click(function() {
        const scheduleId = $(this).data('schedule-id');
        const currentAmount = $(this).data('current-amount');
        
        $('#edit_schedule_id').val(scheduleId);
        $('#edit_new_amount').val(currentAmount);
        $('#edit_note').val('');
        
        $('#editAmountModal').modal('show');
    });
    
    // Handle form submission
    $('#editAmountForm').submit(function(e) {
        e.preventDefault();
        
        const formData = {
            schedule_payout_id: $('#schedulePayoutId').val(),
            new_amount: $('#newAmount').val(),
            note: $('#note').val(),
            _token: $('meta[name="csrf-token"]').attr('content')
        };
        
        // Validate required fields and check for negative values
        const newAmountValue = parseFloat(formData.new_amount);
        if (!formData.new_amount || isNaN(newAmountValue)) {
            showNotification('error', 'Please enter a valid amount.');
            return;
        }
        
        if (newAmountValue < 0) {
            showNotification('error', 'Negative amounts are not allowed.');
            return;
        }
        
        if (newAmountValue === 0) {
            showNotification('error', 'Please enter an amount greater than 0.');
            return;
        }
        
        $.ajax({
            url: '{{ route("admin.payouts.update-amount") }}',
            type: 'POST',
            data: formData,
            beforeSend: function() {
                $('#updateAmountBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Updating...');
            },
            success: function(response) {
                if (response.success) {
                    showNotification('success', response.message);
                    location.reload(); // Reload to show updated amounts
                } else {
                    showNotification('error', 'Error: ' + response.message);
                }
            },
            error: function(xhr) {
                let errorMessage = 'Error updating amount. Please try again.';
                try {
                    let errorResponse = JSON.parse(xhr.responseText);
                    if (errorResponse.message) {
                        errorMessage = errorResponse.message;
                    } else if (errorResponse.errors) {
                        // Handle validation errors
                        let errors = Object.values(errorResponse.errors).flat();
                        errorMessage = errors.join(', ');
                    }
                } catch (e) {
                    // Keep default error message if parsing fails
                }
                showNotification('error', errorMessage);
                console.error(xhr.responseText);
            },
            complete: function() {
                $('#updateAmountBtn').prop('disabled', false).html('<i class="fas fa-save me-1"></i>Update Amount');
                $('#editAmountModal').modal('hide');
            }
        });
    });
});
</script>
@endpush