@extends('layout.app')

@section('title', 'Work Details')

@section('style')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        #table-body tr {
            height: 10px;
        }
        .table > :not(caption) > * > * {
            padding: 0.2rem !important;
        }
        #user-datatable thead th {
            position: sticky;
            top: 0;
            background-color: #f8f9fa; /* light background, same as Bootstrap's .thead-light */
            z-index: 10;
        }
    </style>
@endsection

@section('main')

    <div class="">
        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
            <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                <li class="breadcrumb-item">
                    <a href="#">
                        <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                    </a>
                </li>
                <li class="breadcrumb-item"><a href="#">Work Info</a></li>
                <li class="breadcrumb-item active" aria-current="page">Work Details</li>
            </ol>
        </nav>
    </div>

    {{-- Column Selector --}}
    <div class="mb">
        <div id="column-checkboxes" class="d-flex flex-wrap gap-2">
            @php
                use Illuminate\Support\Facades\Schema;
                use App\Models\work\WorkDetails;

                $allColumns = Schema::getColumnListing((new WorkDetails)->getTable());
            @endphp
        </div>
    </div>

    {{-- Table --}}
    <div class="card">
        <div class="card-body">
            <div class="row d-none" id="filter-section">
                <!-- Column Selector -->
                <div class="col-md-4">
                    <label><strong>Choose Columns to Display</strong></label>
                    <div class="border rounded p-2" style="max-height: 150px; overflow-y: auto;">
                        @foreach ($allColumns as $col)
                            @if ($col === 'ID')
                                {{-- Hidden and always checked --}}
                                <input type="hidden" class="column-checkbox" value="ID" checked>
                            @else
                                <div class="form-check">
                                    <input class="form-check-input column-checkbox" type="checkbox"
                                           value="{{ $col }}" id="col-{{ $loop->index }}" checked>
                                    <label class="form-check-label" for="col-{{ $loop->index }}">
                                        {{ $col }}
                                    </label>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
                <!-- Status Filter -->
                <div class="col-md-4">
                    <label><strong>Status</strong></label>
                    <select id="filter-status" class="form-select">
                        <option value="">All</option>
                        <option value="A">Active</option>
                        <option value="I">Inactive</option>
                    </select>
                </div>
                <!-- Org Type Filter -->
                <div class="col-md-4">
                    <label><strong>Status Name</strong></label>
                    <input type="text" id="filter-name" class="form-control" placeholder="Enter Org Code">
                </div>
                <!-- Filter Button -->
                <div class="col-md-2 d-flex align-items-end mt-2">
                    <button class="btn btn-primary" onclick="loadTableData()">Apply Filter</button>
                </div>

                <hr style="margin-top: 25px">
            </div>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6>Work Details Info</h6>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-warning btn-sm" id="toggle-filter">
                        <span id="filter-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                 class="bi bi-funnel" viewBox="0 0 16 16">
                                <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .39.812L10 8.118V13.5a.5.5 0 0 1-.777.416l-2-1.333A.5.5 0 0 1 7 12.167V8.118L1.61 1.812A.5.5 0 0 1 1.5 1.5z"/>
                            </svg>
                        </span>
                        <span id="close-icon" class="d-none">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                 class="bi bi-x-lg" viewBox="0 0 16 16">
                                <path d="M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z"/>
                            </svg>
                        </span>
                        <span id="filter-btn-text"> Filter</span>
                    </button>
                    <a href="{{ url('work-details/create') }}" class="btn btn-outline-primary btn-sm d-inline-flex align-items-center">
                        <svg class="icon icon-xs me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                        </svg>
                        Add New
                    </a>
                </div>
            </div>
            <div class="table-responsive mt-2" style="max-height: 400px; overflow-y: auto;">
                <table class="table table-bordered" id="user-datatable" >
                    <thead class="thead-light">
                    <tr id="dynamic-header">
                        <th>SL</th>
                        <!-- Dynamic headers will be injected here -->
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody id="table-body">
                    <!-- Data will be injected here -->
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-between align-items-center mt-3">
                <div id="total-records" style="font-size: small">Total Records: 0</div>
                <div class="btn-group" id="pagination-controls"></div>
                <div id="current-page" style="font-size: small">Page 1 of 1</div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-default" tabindex="-1" aria-labelledby="modal-default-label" 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="modal-default-label"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Content will be loaded here dynamically -->
                    <p id="modal-content">Loading...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning text-black ms-auto" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="attestmentModal" tabindex="-1" aria-labelledby="attestmentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="attestmentModalLabel">Attestment Files</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="attestmentModalBody">
                    <!-- Dynamic content will be injected here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script>
        const toggleBtn = document.getElementById('toggle-filter');
        const filterSection = document.getElementById('filter-section');
        const filterIcon = document.getElementById('filter-icon');
        const closeIcon = document.getElementById('close-icon');
        const btnText = document.getElementById('filter-btn-text');

        toggleBtn.addEventListener('click', function () {
            const isHidden = filterSection.classList.contains('d-none');

            filterSection.classList.toggle('d-none');
            filterIcon.classList.toggle('d-none');
            closeIcon.classList.toggle('d-none');
            btnText.textContent = isHidden ? ' Close' : ' Filter';
        });

        let currentPage = 1;
        const pageSize = 10;

        function getFilters() {
            return {
                status: $('#filter-status').val(),
                name: $('#filter-name').val(),
            };
        }

        function getSelectedColumns() {
            const selected = [];

            $('.column-checkbox:checked').each(function () {
                selected.push($(this).val());
            });
            return selected;
        }

        function loadTableData() {
            const selectedColumns = getSelectedColumns();
            const filters = getFilters();
            const offset = (currentPage - 1) * pageSize;

            $.ajax({
                url: '{{ route('workdetails.data') }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    columns: selectedColumns,
                    filters: filters,
                    offset: offset,
                    limit: pageSize,
                    _token: '{{ csrf_token() }}'
                },
                success: function (data) {
                    $('#table-body').empty();

                    const rows = data.data || [];
                    const total = data.total || 0;
                    const totalPages = Math.ceil(total / pageSize);

                    // === Rebuild table header ===
                    let headerRow = '<th>SL</th>';
                    selectedColumns.forEach(col => {
                        headerRow += `<th>${col}</th>`;
                    });
                    headerRow += '<th>Attestments</th>';  // add new column header
                    headerRow += '<th>Action</th>';
                    $('#dynamic-header').html(headerRow);

                    // === Set total record count ===
                    $('#total-records').text(`Total Records: ${total}`);

                    // === Populate table body ===
                    if (rows.length === 0 && currentPage > 1) {
                        currentPage--;
                        loadTableData();
                        return;
                    }

                    $.each(rows, function (index, rowData) {
                        let row = `<tr><td>${offset + index + 1}</td>`;

                        selectedColumns.forEach(col => {
                            if (col === 'attestment') {
                                // Parse and check if attestment exists
                                let attestmentHtml = 'No attestment';
                                if (rowData.attestment) {
                                    try {
                                        const files = JSON.parse(rowData.attestment);
                                        if (files && Object.keys(files).length > 0) {
                                            // Show a view button, onclick will show file names in alert (or you can customize)
                                            attestmentHtml = `<button type="button" class="btn btn-sm btn-primary" onclick="viewAttestmentsFromData('${encodeURIComponent(rowData.attestment)}')">View</button>`;
                                        }
                                    } catch (e) {
                                        attestmentHtml = 'Invalid attestment data';
                                    }
                                }
                                row += `<td>${attestmentHtml}</td>`;
                            } else {
                                row += `<td>${rowData[col] ?? ''}</td>`;
                            }
                        });

                        // Action buttons as before
                        row += `
        <td>
            <div class="btn-group">
                <button onclick="showData('${rowData.id}')" type="button" class="btn btn-outline-info">
                    <i class="bi bi-eye"></i>
                    <span class="visually-hidden">View</span>
                </button>
                <button onclick="editData('${rowData.id}')" type="button" class="btn btn-outline-warning">
                    <i class="bi bi-pencil-square"></i>
                    <span class="visually-hidden">Edit</span>
                </button>
                <button onclick="deleteData('${rowData.id}')" type="button" class="btn btn-outline-danger">
                    <i class="bi bi-trash"></i>
                    <span class="visually-hidden">Delete</span>
                </button>
            </div>
        </td>
    </tr>`;

                        $('#table-body').append(row);
                    });

                    // === Update page indicator ===
                    $('#current-page').text(`Page ${currentPage} of ${totalPages}`);

                    // === Build pagination ===
                    const $pagination = $('#pagination-controls');
                    $pagination.empty();

                    if (totalPages <= 1) return;

                    const createPageBtn = (page, text = page, disabled = false, active = false) => {
                        const btn = $(`<button class="btn ${active ? 'btn-primary' : 'btn-outline-secondary'}">${text}</button>`);
                        if (!disabled) {
                            btn.click(() => {
                                currentPage = page;
                                loadTableData();
                            });
                        } else {
                            btn.prop('disabled', true);
                        }
                        return btn;
                    };

                    // Prev
                    $pagination.append(createPageBtn(currentPage - 1, 'Prev', currentPage === 1));

                    // Numbered pages (max 5 visible)
                    const maxVisible = 5;
                    let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
                    let end = Math.min(totalPages, start + maxVisible - 1);
                    if (end - start < maxVisible - 1) {
                        start = Math.max(1, end - maxVisible + 1);
                    }

                    if (start > 1) {
                        $pagination.append(createPageBtn(1));
                        if (start > 2) $pagination.append($('<span>...</span>'));
                    }

                    for (let i = start; i <= end; i++) {
                        $pagination.append(createPageBtn(i, i, false, i === currentPage));
                    }

                    if (end < totalPages) {
                        if (end < totalPages - 1) $pagination.append($('<span>...</span>'));
                        $pagination.append(createPageBtn(totalPages));
                    }

                    // Next
                    $pagination.append(createPageBtn(currentPage + 1, 'Next', currentPage === totalPages));
                },
                error: function (xhr) {
                    console.error('Error:', xhr.responseText);
                }
            });
        }


        $('#prev-page').on('click', function () {
            if (currentPage > 1) {
                currentPage--;
                loadTableData();
            }
        });

        $('#next-page').on('click', function () {
            currentPage++;
            loadTableData();
        });

        $('.column-checkbox').on('change', loadTableData);
        $('#filter-status, #filter-name').on('change', function () {
            currentPage = 1;
            loadTableData();
        });

        loadTableData();
        function viewAttestmentsFromData(encodedAttestment) {
            try {
                const decoded = decodeURIComponent(encodedAttestment);
                let files = {};
                let html = '';

                try {
                    files = JSON.parse(decoded);
                } catch (e) {
                    console.error('Invalid attestment data:', e);
                    $('#attestmentModalBody').html('<p class="text-danger">Failed to load attestment data.</p>');
                    return;
                }
                if (files && Object.keys(files).length > 0) {

                    let message = 'Attestments:\n';
                    Object.values(files).forEach(filePath => {
                        const fileName = filePath.split('/').pop();
                        message += `- ${fileName}\n`;
                        const url = filePath;

                        html += `<div class="mb-3">
                                    <strong>${fileName}</strong>:
                                    <a href="${url}" target="_blank" class="btn btn-sm btn-outline-info">View/Download</a>
                                </div>
                            `;
                    });
                } else {
                    html = '<p class="text-muted">No attestment found.</p>';
                }
                $('#attestmentModalBody').html(html);

                // Show Bootstrap modal
                const modal = new bootstrap.Modal(document.getElementById('attestmentModal'));
                modal.show();
            } catch (e) {
                alert('Invalid attestment data.');
            }
        }

        function showData(id) {
            $('#modal-content').text('Loading...');
            $.ajax({
                url: `/work-details/${id}`,  // your route to get data for id
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#modal-default .modal-title').text(data.name);
                    let filess = {};
                    let html1 = '';

                    try {
                        filess = JSON.parse(data.attestment);
                        Object.values(filess).forEach(filePath => {
                            const fileName = filePath.split('/').pop();
                            const url = filePath;

                            html1 += `<div class="mb-3">
                                    <strong>${fileName}</strong>:
                                    <a href="${url}" target="_blank" class="btn btn-sm btn-outline-info">View/Download</a>
                                </div>
                            `;
                        });
                    } catch (e) {
                        html1 = '<p class="text-danger">No attestment found.</p>';
                    }
                    let html = `
                                <p><strong>ID:</strong> ${data.id}</p>
                                <p><strong>Name:</strong> ${data.name}</p>
                                <p><strong>Type:</strong> ${data.type}</p>
                                <p><strong>Desc:</strong> ${data.desc}</p>
                                <p><strong>Status:</strong> ${data.status === 'A' ? 'Active' : 'Inactive'}</p>
                                <p><strong>Attestments:</br></strong>${html1}</p>
                            `;

                    $('#modal-content').html(html);

                    // Show the modal after content loaded
                    const myModal = new bootstrap.Modal(document.getElementById('modal-default'));
                    myModal.show();
                },
                error: function() {
                    $('#modal-content').text('Failed to load data.');
                }
            });
        }

        function editData(id) {
            window.location.href = "{{ url('work-details') }}/" + id + "/edit";
        }

        function  deleteData(id) {
            var csrf_token = $('meta[name="csrf-token"]').attr('content');

            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#950000",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ url('work-details') }}" + '/' + id,
                        type: "POST",
                        data: {'_method': 'DELETE', '_token': csrf_token},
                        success: function (data) {
                            console.log(data);
                            if (data.statusCode == 200) {
                                loadTableData();
                                Swal.fire({
                                    title: "Deleted!",
                                    text: "Your file has been deleted.",
                                    icon: "success"
                                });
                            } else {
                                Swal.fire("Your imaginary file is safe!");
                            }
                        }, error: function (xhr, status, error) {
                            var errorMessage = "Error occurred";
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMessage = xhr.responseJSON.message;
                            } else if (xhr.responseText) {
                                errorMessage = xhr.responseText;
                            }
                            Swal.fire({
                                title: "Oops",
                                text: errorMessage,
                                icon: "error",
                                timer: '1500'
                            });
                        }
                    });

                }
            });
        }
    </script>
@endsection