@extends('admin.layouts.layout')

@section('title', 'Services & Pay - ' . $employee->full_name)

@section('content')
<div class="mb-4">
    <!-- BODY CONTENT SECTION START -->    
    <div class="title_area">
        <div class="d-flex align-items-center">
            <h3>Service Pay Settings</h3>
        </div>
        <div class="d-flex align-items-center gap-2 ms-auto">
            <form id="multiple-delete-form" action="{{ route('service-pay-settings.delete-multiple') }}" method="POST" style="display: none;">
                @csrf
                <input type="hidden" name="user_id" value="{{ $employee->id }}">
                <div id="selected-ids-container"></div>
            </form>

            <a href="{{ route('employees.index') }}" class="btn btn-dark waves-effect">
                <i class="fas fa-arrow-left"></i> Back to Employees
            </a>

            <div class="contact_btns">
                @if($permission['create'] ?? true)
                <a href="{{ route($routePrefix . '.create', ['user_id' => $employee->id]) }}" class="add_btn btn"><img src="{{ asset('images/add.svg') }}" /> Add</a>
                @endif
                @if($permission['destroy'] ?? true)
                <!-- <a href="javascript:void(0);" id="delete-selected" class="delete_btn btn" 
                    data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" 
                    data-confirm-yes="multipleServicePayDelete()"><img src="{{ asset('images/delete.svg') }}" /> Delete</a> -->
                @endif
            </div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover" id="service-pay-table">
            <thead>
                <tr>
                    <!-- <th width="30">
                        <input type="checkbox" class="form-check-input" id="select-all" title="Select All">
                    </th> -->
                    <th>Service</th>
                    <!-- <th>Pay Difference</th> -->
                    <th>Pay Type</th>
                    <th>Per Inspection</th>
                    <th>Inspection From</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @if(isset($data) && count($data) > 0)
                    @foreach($data as $setting)
                        <tr>
                            <!-- <td width="30">
                                <input type="checkbox" class="form-check-input service-checkbox" value="{{ $setting->id }}" id="service-{{ $setting->id }}">
                            </td> -->
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    @php
                                        $serviceName = $setting->service->service_name ?? 'N/A';
                                        $initials = strtoupper(substr($serviceName, 0, 2));
                                    @endphp
                                    <div class="d-flex align-items-center justify-content-center bg-primary text-white rounded-circle" style="width:36px; height:36px; font-size:1rem;">
                                        {{ $initials }}
                                    </div>
                                    <strong>{{ $serviceName }}</strong>
                                </div>
                            </td>
                            <!-- <td>
                                @if($setting->pay_type == 'percentage')
                                    {{ number_format($setting->pay_difference, 1) }}%
                                @else
                                    ${{ number_format($setting->pay_difference, 2) }}
                                @endif
                            </td> -->
                            <td>
                                @if($setting->pay_type == 'fixed')
                                    <span class="badge bg-info">Fixed Payout</span>
                                @elseif($setting->pay_type == 'hourly')
                                    <span class="badge bg-warning">Hourly</span>
                                @elseif($setting->pay_type == 'percentage')
                                    <span class="badge bg-success">Percentage</span>
                                @else
                                    <span class="badge bg-secondary">{{ ucfirst($setting->pay_type) }}</span>
                                @endif
                            </td>
                            <td>
                                @if(!is_null($setting->amount_per_inspection))
                                    @if($setting->pay_type == 'percentage')
                                        {{ number_format($setting->amount_per_inspection, 1) }}%
                                    @else
                                        ${{ number_format($setting->amount_per_inspection, 2) }}
                                    @endif
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                            <td>
                                @if($setting->inspection_from == 'company')
                                    <span class="badge bg-primary">Via Company</span>
                                @else
                                    <span class="badge bg-secondary">Via Personal</span>
                                @endif
                            </td>
                            <td>
                                @if($setting->is_active)
                                    <span class="badge bg-success">Active</span>
                                @else
                                    <span class="badge bg-secondary">Inactive</span>
                                @endif
                            </td>
                            <td>
                                <div class="d-flex gap-2">
                                    @if($permission['edit'] ?? true)
                                    <a href="{{ route($routePrefix . '.edit', $setting->id) }}" class="btn btn_edit" title="Edit">
                                        <img src="{{ asset('images/edit.svg') }}" />
                                    </a>
                                    @endif
                                    @if($permission['destroy'] ?? true)
                                    <a class="btn me-4" data-toggle="tooltip" title="Delete" 
                                        data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" 
                                        data-confirm-yes="event.preventDefault(); document.getElementById('delete-form-{{$setting->id}}').submit();">
                                        <img src="{{ asset('images/delete_black.svg') }}" />
                                    </a>
                                    {!! html()->form('DELETE', route($routePrefix . '.destroy', $setting->id))->attributes([
                                        'style' => 'display:inline',
                                        'id'    => 'delete-form-' . $setting->id  
                                    ])->open() !!}
                                    {!! html()->form()->close() !!}
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="8" class="text-center py-4">
                            <div class="text-muted">No service & pay settings found for this employee.</div>
                            @if($permission['create'] ?? true)
                                <a href="{{ route($routePrefix . '.create', ['user_id' => $employee->id]) }}" class="btn btn-primary mt-2">
                                    <i class="fas fa-plus"></i> Add First Service & Pay Setting
                                </a>
                            @endif
                        </td>
                    </tr>
                @endif
            </tbody>
        </table>
    </div>        
    <!-- BODY CONTENT SECTION END -->
</div>

<div class="pagination-container">
    @include('admin.components.pagination')
</div>
@endsection
@push('page_script')
<script>
$(function(){
    // Handle select all checkbox
    $('#select-all').on('change', function() {
        $('.service-checkbox').prop('checked', this.checked);
        toggleDeleteButton();
    });

    // Handle individual checkbox changes
    $('.service-checkbox').on('change', function() {
        var allChecked = $('.service-checkbox:checked').length === $('.service-checkbox').length;
        $('#select-all').prop('checked', allChecked);
        toggleDeleteButton();
    });

    // Toggle delete button state
    function toggleDeleteButton() {
        var checkedBoxes = $('.service-checkbox:checked').length;
        if (checkedBoxes > 0) {
            $('#delete-selected').removeClass('delete_btn').addClass('delete_btn active');
        } else {
            $('#delete-selected').removeClass('active').addClass('delete_btn');
        }
    }

    // Initialize delete button state
    toggleDeleteButton();
});

// Multiple delete function
function multipleServicePayDelete() {
    var selectedIds = [];
    $('.service-checkbox:checked').each(function() {
        selectedIds.push($(this).val());
    });

    if (selectedIds.length === 0) {
        alert('Please select at least one service & pay setting to delete.');
        return false;
    }

    // Clear previous inputs and add new ones
    $('#selected-ids-container').empty();
    selectedIds.forEach(function(id) {
        $('#selected-ids-container').append('<input type="hidden" name="ids[]" value="' + id + '">');
    });

    $('#multiple-delete-form').submit();
}
</script>
@endpush
<div class="modal fade" id="deleteSelectedModal" tabindex="-1" aria-labelledby="deleteSelectedModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteSelectedModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete the selected service & pay settings? This action cannot be undone.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirm-delete-selected">Delete Selected</button>
            </div>
        </div>
    </div>
</div>

@push('page_script')
<script>
$(function(){
    // Select all checkbox functionality
    $('#select-all').on('change', function() {
        $('.row-checkbox').prop('checked', this.checked);
        toggleDeleteButton();
    });

    // Individual checkbox functionality
    $('.row-checkbox').on('change', function() {
        var totalCheckboxes = $('.row-checkbox').length;
        var checkedCheckboxes = $('.row-checkbox:checked').length;
        
        $('#select-all').prop('checked', totalCheckboxes === checkedCheckboxes);
        toggleDeleteButton();
    });

    // Toggle delete button based on selection
    function toggleDeleteButton() {
        var checkedCount = $('.row-checkbox:checked').length;
        $('#delete-selected').prop('disabled', checkedCount === 0);
    }

    // Delete selected functionality
    $('#delete-selected').on('click', function() {
        var checkedCount = $('.row-checkbox:checked').length;
        if (checkedCount > 0) {
            $('#deleteSelectedModal').modal('show');
        }
    });

    $('#confirm-delete-selected').on('click', function() {
        var selectedIds = [];
        $('.row-checkbox:checked').each(function() {
            selectedIds.push($(this).val());
        });

        if (selectedIds.length > 0) {
            // Create and submit form for bulk delete
            var form = $('<form>', {
                'method': 'POST',
                'action': '{{ route($routePrefix . ".delete-multiple") }}'
            });

            form.append($('<input>', {
                'type': 'hidden',
                'name': '_token',
                'value': '{{ csrf_token() }}'
            }));

            form.append($('<input>', {
                'type': 'hidden',
                'name': 'user_id',
                'value': '{{ $employee->id }}'
            }));

            selectedIds.forEach(function(id) {
                form.append($('<input>', {
                    'type': 'hidden',
                    'name': 'ids[]',
                    'value': id
                }));
            });

            $('body').append(form);
            form.submit();
        }
    });
});
</script>
@endpush