@extends('admin.layouts.layout')

@section('content')
<div class="mb-4">    
    <div class="servicestitle">
        <h3>{{ $module }}</h3>
        <div class="services_searchbtn d-flex align-items-center gap-2 ms-auto">
            <div class="search_box">
                <input type="text" class="form-control" placeholder="Search Agreements..." id="search-input">
                <button class="btn btn_search" id="search-btn">
                    <img src="{{ asset('images/search_w.svg') }}" alt="Search Icon">
                </button>
                <button class="btn btn-clear-search" id="clear-search" style="display: none; margin-left: 5px;">
                    <i class="fas fa-times"></i> Clear
                </button>
                <div class="search-loading" id="search-loading" style="display: none; margin-left: 10px;">
                    <i class="fas fa-spinner fa-spin text-primary"></i>
                    <small class="text-muted ms-1">Searching...</small>
                </div>
            </div>
            <div class="contact_btns">
                @if($permission['create'] ?? true)
                <a href="{{ route('agreements.create') }}" class="add_btn btn">
                    <img src="{{ asset('images/add_service.svg') }}"> Add Agreement
                </a>                
                @endif
                @if($permission['destroy'] ?? true)
                <a href="javascript:void(0);" class="delete_btn btn" id="delete-selected">
                    <img src="{{ asset('images/delete_multiple.svg') }}"> Delete
                </a>                
                @endif
                <a href="javascript:void(0);" class="filter_btn btn w-auto show-panel" data-id="filter-panel">
                    <img src="{{ asset('images/filter.svg') }}">
                </a>                
            </div>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="filter-section" id="filter-panel" style="display: {{ request()->get('filter') ? 'block' : 'none' }};">
        <div class="card">
            <div class="card-body">
                <form id="filter-form" method="GET" action="{{ route('agreements.index') }}">
                    <input type="hidden" name="filter" value="true">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="state" class="form-label">State</label>
                            <select name="state" id="state" class="form-select">
                                <option value="">All States</option>
                                @foreach($filters['states'] ?? [] as $key => $value)
                                    <option value="{{ $key }}" {{ request('state') == $key ? 'selected' : '' }}>
                                        {{ $value }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="service_id" class="form-label">Service</label>
                            <select name="service_id" id="service_id" class="form-select">
                                <option value="">All Services</option>
                                @foreach($services ?? [] as $service)
                                    <option value="{{ $service->id }}" {{ request('service_id') == $service->id ? 'selected' : '' }}>
                                        {{ $service->service_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary me-2">Apply Filters</button>
                            <a href="{{ route('agreements.index') }}" class="btn btn-default waves-effect">Clear</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="service_contentarea">
        <div class="table-responsive">
            <table class="table service_table" id="agreements-table">
                <thead>
                    <tr>
                        <th width="30">
                            <input type="checkbox" class="form-check-input" id="select-all" title="Select All Agreements">
                        </th>
                        <th>Agreement Name</th>
                        <th>State</th>
                        <th>Language</th>
                        <th>Select Service</th>
                        <th>Modified Date</th>
                        @if($permission['create'] || $permission['edit'] || $permission['destroy'])
                        <th>Action</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @forelse($data ?? [] as $agreement)
                    <tr class="agreement-row" data-agreement-id="{{ $agreement->id }}">
                        <td width="30">
                            <input type="checkbox" class="form-check-input agreement-checkbox" value="{{ $agreement->id }}">
                        </td>
                        <td>
                            <strong>{{ $agreement->name }}</strong>
                        </td>
                        <td>
                            @if($agreement->state)
                                <span class="badge bg-info">{{ $agreement->state }}</span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            @if($agreement->language)
                                <span class="badge bg-success">{{ $agreement->language->name }}</span>
                                @if($agreement->language->native_name && $agreement->language->native_name !== $agreement->language->name)
                                    <div class="text-muted small">{{ $agreement->language->native_name }}</div>
                                @endif
                            @else
                                <span class="badge bg-secondary">Not Set</span>
                            @endif
                        </td>
                        <td>
                            @if($agreement->service)
                                <span class="badge bg-primary">{{ $agreement->service->service_name }}</span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            {{ $agreement->updated_at ? \App\Helpers\Helper::showdate($agreement->updated_at, false) : '-' }}
                        </td>                        
                        @if($permission['edit'] || $permission['destroy'])
                        <td>
                            <div class="d-flex gap-2">
                                @if($permission['show'] ?? true)    
                                <a href="{{ route('agreements.show', $agreement->id) }}" class="me-2" title="View Agreement">
                                    <img src="{{ asset('images/view.svg') }}">
                                </a>
                                @endif
                                @if($permission['edit'] ?? true)                                
                                <a href="{{ route('agreements.edit', $agreement->id) }}" class="me-4" data-toggle="tooltip" title="Edit" data-original-title="Edit"><img src="{{ asset('images/edit.svg') }}"></a>
                                @endif
                                @if($permission['destroy'] ?? true)                                
                                <a class="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-{{$agreement->id}}').submit();" data-original-title="Delete"><img src="{{ asset('images/delete_black.svg') }}"></a>
                                    {!! html()->form('DELETE', route(
                                        $routePrefix . '.destroy',
                                        [$agreement->id]
                                        ))->attributes([
                                        'style' => 'display:inline',
                                        'id'    => 'delete-form-' . $agreement->id  
                                    ])->open() !!}
                                    {!! html()->form()->close() !!}
                                @endif
                                @if($permission['versions'] ?? true)
                                <a href="{{ route('agreements.versions', $agreement->id) }}" class="btn btn-sm btn-outline-info" title="View Versions">
                                    <i class="fas fa-history"></i>
                                </a>
                                @endif
                            </div>
                        </td>
                        @endif
                    </tr>
                    
                    <!-- Description Row -->
                    <tr class="agreement-description-row" id="description-{{ $agreement->id }}" style="display: none;">
                        <td colspan="6" class="p-0">
                            <div class="agreement-description-content p-3 bg-light">
                                <div class="row">
                                    <div class="col-md-8">
                                        <h6 class="mb-2">Description</h6>
                                        <div class="description-text">
                                            {!! $agreement->description_html ?: 'No description available.' !!}
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <h6 class="mb-2">Details</h6>
                                        <ul class="list-unstyled">
                                            <li><strong>Inspector Sign Required:</strong> 
                                                {{ $agreement->inspector_sign_required ? 'Yes' : 'No' }}
                                            </li>
                                            <li><strong>Change Order:</strong> 
                                                {{ $agreement->is_change_order ? 'Yes' : 'No' }}
                                            </li>
                                            <li><strong>Status:</strong> 
                                                <span class="badge bg-{{ $agreement->is_active ? 'success' : 'danger' }}">
                                                    {{ $agreement->is_active ? 'Active' : 'Inactive' }}
                                                </span>
                                            </li>
                                            @if($agreement->versions_count > 0)
                                            <li><strong>Versions:</strong> {{ $agreement->versions_count }}</li>
                                            @endif
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    
                    <!-- Show More Button Row -->
                    <!-- <tr class="show-more-row">
                        <td colspan="6" class="border-0 text-end p-0">
                            <button type="button" class="show-details-btn btn-outline-secondary" data-agreement-id="{{ $agreement->id }}">
                                Show More <img src="{{ asset('images/down_arrow.svg') }}" alt="Show More">
                            </button>
                        </td>
                    </tr> -->
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-4">
                            <div class="text-muted">
                                <i class="fas fa-file-contract fa-2x mb-2"></i>
                                <p>No Agreements Found</p>                                
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if(isset($data) && method_exists($data, 'links'))
        <div class="d-flex justify-content-between align-items-center mt-3 pt-3 border-top">
            <div class="pagination-info">
                Showing {{ $data->firstItem() ?: 0 }} to {{ $data->lastItem() ?: 0 }} of {{ $data->total() }} results
            </div>
            <div>
                {{ $data->appends(request()->input())->links() }}
            </div>
        </div>
        @endif
    </div>
</div>
@endsection

@push('page_script')
<script>
$(document).ready(function() {
    // Select all functionality
    $('#select-all').change(function() {
        $('.agreement-checkbox').prop('checked', $(this).is(':checked'));
    });

    // Search functionality
    var searchTimeout;
    $('#search-input').on('keyup', function() {
        var searchQuery = $(this).val().trim();
        
        // Clear previous timeout
        clearTimeout(searchTimeout);
        
        // Set new timeout for 300ms delay
        searchTimeout = setTimeout(function() {
            if (searchQuery.length >= 2 || searchQuery.length === 0) {
                performSearch(searchQuery);
            }
        }, 300);
    });

    // Search button click handler
    $('#search-btn').click(function() {
        var searchQuery = $('#search-input').val().trim();
        if (searchQuery.length >= 2) {
            performSearch(searchQuery);
        } else if (searchQuery.length === 1) {
            showAlert('Please enter at least 2 characters to search.', 'warning');
        }
    });

    // Enter key handler for search input
    $('#search-input').on('keypress', function(e) {
        if (e.which === 13) { // Enter key
            var searchQuery = $(this).val().trim();
            if (searchQuery.length >= 2) {
                performSearch(searchQuery);
            } else if (searchQuery.length === 1) {
                showAlert('Please enter at least 2 characters to search.', 'warning');
            }
        }
    });

    // Clear search functionality
    $(document).on('click', '#clear-search, #dynamic-clear-search', function() {
        clearSearch();
    });

    // Function to clear search
    function clearSearch() {
        $('#search-input').val('');
        $('#clear-search').hide();
        showAlert('Search cleared. Showing all agreements.', 'info');
        location.reload();
    }

    // Function to perform search
    function performSearch(query) {
        if (query.length === 0) {
            // If search is empty, reload the page to show all agreements
            location.reload();
            return;
        }

        // Show loading state
        $('#search-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
        $('#search-loading').show();
        
        $.ajax({
            url: '{{ route("agreements.search") }}',
            method: 'GET',
            data: {
                q: query
            },
            success: function(response) {
                if (response.status) {
                    updateAgreementTable(response.data, query);
                    $('#clear-search').show();
                } else {
                    showAlert(response.message || 'Search failed', 'error');
                }
            },
            error: function(xhr) {
                console.error('Search error:', xhr.responseText);
                showAlert('Search failed. Please try again.', 'error');
            },
            complete: function() {
                // Reset button state
                $('#search-btn').prop('disabled', false).html('<img src="{{ asset("images/search_w.svg") }}" alt="Search Icon">');
                $('#search-loading').hide();
            }
        });
    }

    // Function to update agreement table with search results
    function updateAgreementTable(agreements, searchQuery) {
        var tbody = $('#agreements-table tbody');
        tbody.empty();

        if (agreements.length === 0) {
            tbody.append(`
                <tr>
                    <td colspan="6" class="text-center py-4">
                        <div class="text-muted">
                            <i class="fas fa-search fa-2x mb-2"></i>
                            <p>No Agreements Found matching "${searchQuery}".</p>
                            <small>Try different keywords or check spelling.</small>
                        </div>
                    </td>
                </tr>
            `);
            return;
        }

        // Add search results header
        tbody.append(`
            <tr class="search-results-header">
                <td colspan="6" class="bg-light">
                    <div class="d-flex justify-content-between align-items-center p-2">
                        <span class="text-muted">
                            <i class="fas fa-search"></i> 
                            Found ${agreements.length} agreement${agreements.length !== 1 ? 's' : ''} matching "${searchQuery}"
                        </span>
                        <button class="btn btn-sm btn-outline-secondary" id="dynamic-clear-search" onclick="clearSearch()">
                            <i class="fas fa-times"></i> Clear Search
                        </button>
                    </div>
                </td>
            </tr>
        `);

        agreements.forEach(function(agreement) {
            var agreementRow = createAgreementRow(agreement);
            tbody.append(agreementRow);
        });
    }

    // Function to create agreement row HTML
    function createAgreementRow(agreement) {
        var stateDisplay = agreement.state ? 
            `<span class="badge bg-info">${agreement.state}</span>` : 
            '<span class="text-muted">-</span>';

        var serviceDisplay = agreement.service ? 
            `<span class="badge bg-primary">${agreement.service.service_name}</span>` : 
            '<span class="text-muted">-</span>';

        var updatedDate = agreement.updated_at ? 
            new Date(agreement.updated_at).toLocaleDateString('en-US') : 
            '-';

        return `
            <tr class="agreement-row" data-agreement-id="${agreement.id}">
                <td width="30">
                    <input type="checkbox" class="form-check-input agreement-checkbox" value="${agreement.id}">
                </td>
                <td>
                    <strong>${agreement.name}</strong>
                </td>
                <td>${stateDisplay}</td>
                <td>${serviceDisplay}</td>
                <td>${updatedDate}</td>
                <td>
                    <div class="d-flex gap-2">
                        @if($permission['show'])
                        <a href="{{ route('agreements.show', '') }}/${agreement.id}" class="me-2" title="View Agreement">
                            <img src="{{ asset('images/view.svg') }}">
                        </a>
                        @endif
                        @if($permission['edit'])
                        <a href="{{ route('agreements.edit', '') }}/${agreement.id}" class="me-4" title="Edit">
                            <img src="{{ asset('images/edit.svg') }}" alt="Edit">
                        </a>
                        @endif
                        @if($permission['destroy'])
                        <a class="me-4" data-toggle="tooltip" title="" 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-${agreement.id}').submit();" data-original-title="Delete">
                            <img src="{{ asset('images/delete_black.svg') }}">
                        </a>
                        <form method="POST" action="{{ route('agreements.destroy', '') }}/${agreement.id}" style="display:inline" id="delete-form-${agreement.id}">
                            @csrf
                            @method('DELETE')
                        </form>                        
                        @endif
                        @if($permission['versions'])
                        <a href="{{ route('agreements.versions', '') }}/${agreement.id}" class="btn btn-sm btn-outline-info" title="View Versions">
                            <i class="fas fa-history"></i>
                        </a>
                        @endif
                    </div>
                </td>
            </tr>
            <tr class="agreement-description-row" id="description-${agreement.id}" style="display: none;">
                <td colspan="6" class="p-0">
                    <div class="agreement-description-content p-3 bg-light">
                        <div class="row">
                            <div class="col-md-8">
                                <h6 class="mb-2">Description</h6>
                                <div class="description-text">
                                    ${agreement.description_html || 'No description available.'}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h6 class="mb-2">Details</h6>
                                <ul class="list-unstyled">
                                    <li><strong>Inspector Sign Required:</strong> 
                                        ${agreement.inspector_sign_required ? 'Yes' : 'No'}
                                    </li>
                                    <li><strong>Change Order:</strong> 
                                        ${agreement.is_change_order ? 'Yes' : 'No'}
                                    </li>
                                    <li><strong>Status:</strong> 
                                        <span class="badge bg-${agreement.is_active ? 'success' : 'danger'}">
                                            ${agreement.is_active ? 'Active' : 'Inactive'}
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>            
        `;
    }

    // Show/Hide Details Toggle
    $(document).on('click', '.show-details-btn', function() {
        const agreementId = $(this).data('agreement-id');
        const descriptionRow = $(`#description-${agreementId}`);
        const button = $(this);
        
        if (descriptionRow.is(':visible')) {
            // Hide details
            descriptionRow.hide();
            button.text('Show More ').append('<img src="{{ asset("images/down_arrow.svg") }}" alt="Show More">');
        } else {
            // Show details
            descriptionRow.show();
            button.text('Show Less ').append('<img src="{{ asset("images/up_arrow.svg") }}" alt="Show Less">');
        }
    });

    // Delete individual agreement
    $(document).on('click', '.delete-agreement', function() {
        const agreementId = $(this).data('agreement-id');
        
        if (confirm('Are you sure you want to delete this agreement? This action cannot be undone.')) {
            $.ajax({
                url: '{{ route("agreements.destroy", "") }}/' + agreementId,
                method: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    showAlert('Agreement deleted successfully', 'success');
                    location.reload();
                },
                error: function(xhr) {
                    showAlert('Error deleting agreement', 'error');
                }
            });
        }
    });

    // Delete multiple agreements
    $('#delete-selected').click(function() {
        var checkedAgreements = $('.agreement-checkbox:checked');
        
        if (checkedAgreements.length === 0) {
            // showAlert('Please select agreements to delete', 'warning');
            showAlert('Please select at least one agreement to delete.', 'warning');
            return;
        }

        // Use SweetAlert2 confirmation like single delete
        Swal.fire({
            title: 'Are You Sure?',
            text: `This action can not be undone. Do you want to continue deleting ${checkedAgreements.length} selected agreement(s)?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, Sure!',
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                var ids = [];
                checkedAgreements.each(function() {
                    ids.push($(this).val());
                });
                
                $.ajax({
                    url: '{{ route("agreements.delete-multiple") }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        ids: ids
                    },
                    success: function(response) {
                        if (response.status) {
                            showAlert(response.message, 'success');
                            location.reload();
                        } else {
                            showAlert(response.message || 'Error deleting agreements', 'error');
                        }
                    },
                    error: function(xhr) {
                        var message = xhr.responseJSON ? xhr.responseJSON.message : 'Error deleting agreements';
                        showAlert(message, 'error');
                    }
                });
            }
        });
    });

    // Helper function to show alerts
    function showAlert(message, type) {
        if (type === 'success') {
            showNotification('success', message);
        } else if (type === 'error') {
            showNotification('error', message);
        } else if (type === 'warning') {
            showNotification('warning', message);
        } else {
            showNotification('info', message);
        }
    }
});
</script>
@endpush