@inject('comp_model', 'App\Models\ComponentsData')
@php
    // Access permissions
    $can_add = $user->canAccess('ready/add');
    $can_edit = $user->canAccess('ready/edit');
    $can_view = $user->canAccess('ready/view');
    $can_delete = $user->canAccess('ready/delete');

    // Request parameters
    $field_name = request()->segment(3);
    $field_value = request()->segment(4);

    // Pagination data
    $total_records = $records->total();
    $limit = $records->perPage();
    $record_count = count($records);
    $pageTitle = 'Ready Certificates';
@endphp

@extends($layout)
@section('title', $pageTitle)

@section('content')
<style>
    /* Custom styles for button states */
    .btn-disabled {
        opacity: 0.5;
        cursor: not-allowed !important;
        position: relative;
    }

    .btn-disabled:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        white-space: nowrap;
        font-size: 12px;
        z-index: 1000;
        margin-bottom: 5px;
    }

    .btn-disabled:hover::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #333;
        margin-bottom: 0;
    }

    .certificate-status {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: bold;
        margin-left: 10px;
    }

    .status-active {
        background-color: #d4edda;
        color: #155724;
    }

    .status-expired {
        background-color: #f8d7da;
        color: #721c24;
    }

    .status-expiring {
        background-color: #fff3cd;
        color: #856404;
    }
</style>

<section class="page" data-page-type="list" data-page-url="{{ url()->full() }}">
    {{-- Page Header --}}
    @if($show_header == true)
    <div class="bg-light p-3 mb-3">
        <div class="container-fluid">
            <div class="row justify-content-between align-items-center gap-3">
                <div class="col">
                    <h5 class="font-weight-bold text-primary">All Generated Certificates</h5>
                </div>
                <div class="col-md-3">
                    <form class="search" action="{{ url()->current() }}" method="get" id="searchForm">
                        @if(request('search'))
                        <input type="hidden" name="page" value="1" />
                        @endif
                        <div class="input-group mb-4">
                            <input type="text"
                                   name="search"
                                   id="search"
                                   class="form-control"
                                   placeholder="Search by Workshop"
                                   value="{{ request('search') }}">
                            @if(request('search'))
                            <span class="clear-search" onclick="clearSearch()" title="Clear search">
                                <i class="material-icons">close</i>
                            </span>
                            @endif
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="submit">
                                    <i class="material-icons">search</i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- Main Content --}}
    <div class="container-fluid">
        <div class="row">
            <div class="col comp-grid">
                <div class="page-content">
                    <div id="ready-list-records">
                        <div id="page-main-content" class="table-responsive">
                            {{-- Breadcrumb --}}
                            @php
                                Html::page_bread_crumb('/ready/', $field_name, $field_value);
                                Html::display_page_errors($errors);
                            @endphp

                            {{-- Filter Tags --}}
                            <div class="filter-tags mb-2">
                                @php Html::filter_tag('search', __('Search')); @endphp
                            </div>

                            {{-- Data Table --}}
                            <table class="table table-hover table-striped table-sm text-left" id="measurementsTable">
                                <thead class="table-header">
                                    <tr>
                                        @if($can_delete)
                                        <th class="td-checkbox">
                                            <label class="form-check-label">
                                                <input class="toggle-check-all form-check-input" type="checkbox" />
                                            </label>
                                        </th>
                                        @endif
                                        <th class="td-workshop_id">Workshop</th>
                                        <th class="td-workshop_unique_code">Unique Code</th>
                                        <th class="td-status">Status</th>
                                        <th class="td-actions">Actions</th>
                                        <th class="td-btn"></th>
                                    </tr>
                                </thead>

                                <tbody class="page-data">
                                    @if($total_records)
                                        @foreach($records as $data)
                                            @php
                                                $rec_id = $data['id'] ? urlencode($data['id']) : null;
                                            @endphp
                                            <tr>
                                                @if($can_delete)
                                                <td class="td-checkbox">
                                                    <label class="form-check-label">
                                                        <input class="optioncheck form-check-input"
                                                               name="optioncheck[]"
                                                               value="{{ $data['id'] }}"
                                                               type="checkbox" />
                                                    </label>
                                                </td>
                                                @endif

                                                <td class="td-workshop_id">
                                                    {{ $data['workshops_workshop_name'] }}
                                                </td>

                                                <td class="td-workshop_unique_code">
                                                    {{ $data['workshop_unique_code'] }}
                                                </td>

                                                <td class="td-status">
                                                    @if(!$data->is_expired)
                                                        @if($data->days_remaining <= 30)
                                                            <span class="certificate-status status-expiring">
                                                                EXPIRING SOON ({{ $data->days_remaining }} days)
                                                            </span>
                                                        @else
                                                            <span class="certificate-status status-active">
                                                                ACTIVE ({{ $data->days_remaining }} days)
                                                            </span>
                                                        @endif
                                                    @else
                                                        <span class="certificate-status status-expired">EXPIRED</span>
                                                    @endif
                                                </td>

                                                <td class="td-actions">
                                                    <div class="btn-group" role="group">
                                                        {{-- Download Button (Always visible) --}}
                                                        <a href="{{ $data->certificate }}"
                                                           download="workshop_{{ $data->workshops_workshop_name }}_certificate.jpg"
                                                           class="btn btn-sm btn-success">
                                                            <i class="material-icons">download</i> Download
                                                        </a>

                                                        {{-- Renew Button (Conditional visibility and clickability) --}}
                                                        @if($data->is_expired)
                                                            @if($data->recently_renewed)
                                                                {{-- Recently renewed - show disabled button --}}
                                                                <button type="button"
                                                                        class="btn btn-sm btn-warning btn-disabled"
                                                                        disabled
                                                                        data-tooltip="Certificate was recently renewed">
                                                                    <i class="material-icons">refresh</i> Renew
                                                                </button>
                                                            @elseif($data->has_renewal_request)
                                                                {{-- Has renewal payment - clickable --}}
                                                                <a href="{{ url('certificates/renew/' . $data['id']) }}"
                                                                   class="btn btn-sm btn-warning"
                                                                   onclick="return confirm('This will renew the certificate with a new issue date. Continue?')">
                                                                    <i class="material-icons">refresh</i> Renew
                                                                </a>
                                                            @else
                                                                {{-- No renewal payment - disabled --}}
                                                                <button type="button"
                                                                        class="btn btn-sm btn-warning btn-disabled"
                                                                        disabled
                                                                        data-tooltip="Renewal payment required">
                                                                    <i class="material-icons">refresh</i> Renew
                                                                </button>
                                                            @endif
                                                        @elseif($data->days_remaining <= 30)
                                                            {{-- Expiring soon - show renew button based on payment status --}}
                                                            @if($data->has_renewal_request)
                                                                <a href="{{ url('certificates/renew/' . $data['id']) }}"
                                                                   class="btn btn-sm btn-warning"
                                                                   onclick="return confirm('Certificate expiring soon. Renew now?')">
                                                                    <i class="material-icons">refresh</i> Renew Early
                                                                </a>
                                                            @else
                                                                <button type="button"
                                                                        class="btn btn-sm btn-warning btn-disabled"
                                                                        disabled
                                                                        data-tooltip="Payment required for early renewal">
                                                                    <i class="material-icons">refresh</i> Renew
                                                                </button>
                                                            @endif
                                                        @endif
                                                        {{-- If certificate is active and not expiring soon, no renew button shown --}}

                                                        {{-- History Button (Show if certificate has been renewed) --}}
                                                        @if($data->has_been_renewed)
                                                            <button type="button"
                                                                    class="btn btn-sm btn-info"
                                                                    onclick="showRenewalHistory('{{ $data['workshop_unique_code'] }}', '{{ $data['id'] }}')">
                                                                <i class="material-icons">history</i> History
                                                            </button>
                                                        @endif
                                                    </div>
                                                </td>

                                                <td class="td-btn">
                                                    @if($can_view)
                                                    <a class="btn btn-sm btn-primary has-tooltip page-modal"
                                                       href="{{ url('ready/view/' . $rec_id) }}">
                                                        <i class="material-icons">visibility</i> Preview
                                                    </a>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td class="bg-light text-center text-muted animated bounce p-3"
                                                colspan="1000">
                                                <i class="material-icons">block</i> No record found
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>

                        {{-- Footer with Pagination --}}
                        @if($show_footer)
                        <div class="mt-3">
                            <div class="row align-items-center justify-content-between">
                                <div class="col-md-auto d-flex">
                                    @if($can_delete)
                                    <button data-prompt-msg="Are you sure you want to delete these records?"
                                            data-display-style="modal"
                                            data-url="{{ url('ready/delete/{sel_ids}') }}"
                                            class="btn btn-sm btn-danger btn-delete-selected d-none">
                                        <i class="material-icons">delete_sweep</i> Delete Selected
                                    </button>
                                    @endif
                                </div>
                                <div class="col">
                                    @php
                                        if ($show_pagination == true) {
                                            $pager = new Pagination($total_records, $record_count);
                                            $pager->show_page_count = false;
                                            $pager->show_record_count = true;
                                            $pager->show_page_limit = false;
                                            $pager->limit = $limit;
                                            $pager->show_page_number_list = true;
                                            $pager->pager_link_range = 5;

                                            // Maintain search parameter in pagination links
                                            if(request('search')) {
                                                $pager->set_query_string('search', request('search'));
                                            }

                                            $pager->render();
                                        }
                                    @endphp
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Renewal History Modal --}}
<div class="modal fade" id="renewalHistoryModal" tabindex="-1" role="dialog" aria-labelledby="renewalHistoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="renewalHistoryModalLabel">Certificate Renewal History</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="historyContent">
                <div class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <p class="mt-2">Loading history...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- Scripts Section --}}
<script>
    // Show Renewal History
    function showRenewalHistory(uniqueCode, recordId) {
        const modal = $('#renewalHistoryModal');
        const contentDiv = document.getElementById('historyContent');

        contentDiv.innerHTML = `
            <div class="text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
                <p class="mt-2">Loading renewal history...</p>
            </div>
        `;

        modal.modal('show');

        fetch(`/certificates/history/${recordId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.text();
            })
            .then(data => {
                contentDiv.innerHTML = data;
            })
            .catch(error => {
                console.error('Error loading history:', error);
                contentDiv.innerHTML = `
                    <div class="alert alert-danger" role="alert">
                        <i class="material-icons">error</i>
                        Error loading renewal history. Please try again.
                    </div>
                `;
            });
    }

    // Document Ready
    document.addEventListener('DOMContentLoaded', function() {
        initializeSearch();
        initializeCheckboxes();
    });

    // Initialize Search Functionality
    function initializeSearch() {
        const searchInput = document.getElementById('search');
        const table = document.getElementById('measurementsTable');
        const tbody = table.querySelector('.page-data');
        const rows = tbody.querySelectorAll('tr');

        searchInput.addEventListener('input', function() {
            const query = this.value.toLowerCase().trim();

            if (query === '') {
                rows.forEach(row => {
                    row.style.display = '';
                    removeHighlights(row);
                });
                return;
            }

            rows.forEach(row => {
                if (row.querySelector('.text-muted')) {
                    return;
                }

                const workshopName = row.querySelector('.td-workshop_id')?.textContent.toLowerCase() || '';
                const workshopCode = row.querySelector('.td-workshop_unique_code')?.textContent.toLowerCase() || '';

                if (workshopName.includes(query) || workshopCode.includes(query)) {
                    row.style.display = '';
                    highlightMatch(row, query);
                } else {
                    row.style.display = 'none';
                }
            });
        });
    }

    // Highlight matching text
    function highlightMatch(row, query) {
        removeHighlights(row);
        if (!query) return;

        const cells = row.querySelectorAll('.td-workshop_id, .td-workshop_unique_code');
        cells.forEach(cell => {
            const text = cell.textContent;
            const regex = new RegExp(`(${query})`, 'gi');
            if (regex.test(text)) {
                cell.innerHTML = text.replace(regex, '<span class="search-highlight">$1</span>');
            }
        });
    }

    // Remove highlights
    function removeHighlights(row) {
        const highlighted = row.querySelectorAll('.search-highlight');
        highlighted.forEach(span => {
            span.outerHTML = span.textContent;
        });
    }

    // Initialize Checkbox Controls
    function initializeCheckboxes() {
        const toggleAll = document.querySelector('.toggle-check-all');
        const checkboxes = document.querySelectorAll('.optioncheck');
        const deleteBtn = document.querySelector('.btn-delete-selected');

        if (toggleAll) {
            toggleAll.addEventListener('change', function() {
                checkboxes.forEach(cb => {
                    cb.checked = this.checked;
                });
                updateDeleteButton();
            });
        }

        checkboxes.forEach(cb => {
            cb.addEventListener('change', updateDeleteButton);
        });

        function updateDeleteButton() {
            if (!deleteBtn) return;
            const checkedCount = document.querySelectorAll('.optioncheck:checked').length;
            if (checkedCount > 0) {
                deleteBtn.classList.remove('d-none');
                deleteBtn.textContent = `Delete Selected (${checkedCount})`;
            } else {
                deleteBtn.classList.add('d-none');
            }
        }
    }
</script>

<style>
    .search-highlight {
        background-color: yellow;
        font-weight: bold;
    }
</style>

@endsection