@extends('layout')

@section('content')
<div class="page-wrapper" id="pageContent">
    <div class="content">
         <!-- Add Export Button -->
        <button id="exportToExcel" class="btn btn-primary">Export Full Page to Excel</button>
        <!-- Centered Page Title -->
        <div style="text-align: center;">
            <div class="page-title">
                <h4>{{ $core->testDetails->Title }}</h4>
                <h6>{{ $core->location->Region_Metro_Ring }}</h6>
            </div>
        </div>

        <!-- Styled Header Information -->
        <div class="header-info">
            <div class="row">
                <div class="col-l-3 header-item">
                    <span class="header-label">Date:</span>
                    <span class="header-value">{{ $core->testDetails->Test_Date }}</span>
                </div>
                <div class="col-l-3 header-item">
                    <span class="header-label">Round:</span>
                    <span class="header-value">{{ $core->testDetails->Q_Round }}</span>
                </div>
                <div class="col-l-3 header-item">
                    <span class="header-label">Operator:</span>
                    <span class="header-value">{{ $core->operator->Operator_Name }}</span>
                </div>
            </div>

            <div class="row">
                <div class="col-l-4 header-item">
                    <span class="header-label">FOC Operator:</span>
                </div>
                <div class="col-l-4 header-item">
                    <span class="header-label">Start of Optical Termination</span>
                </div>
                <div class="col-l-4 header-item">
                    <span class="header-label">Location:</span>
                    <span class="header-value">{{ $core->location->Location_Name }}</span>
                </div>
            </div>
        </div>

        <!-- Degradation Status Table -->
        <div class="row">
            <div class="col-l-4"></div>
            <div class="col-l-4"></div>
            <div class="col-l-4">DEGRADATION STATUS</div>
        </div>



        <div class="table-responsive">
            <table class="table datanew" id="degradationTable">
                <thead>
                    <tr>
                        <th>Fiber No</th>
                        <th>Capacity</th>
                        <th>Link Distance (Km)</th>
                        <th>Measured Distance (Km)</th>
                        <th>Status</th>
                        <th>Donor Site</th>
                        <th>Designed Link Budget (dBm)</th>
                        <th>Actual Cumulative Loss (dBm)</th>
                        <th>Difference</th>
                        <th>Comment</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($relatedcorestatus as $coreStatus)
                        @foreach ($coreStatus->fiberDetails as $fiber)
                    <tr>
                        <td>{{ $fiber->Fiber_No }}</td>
                        <td>{{ $fiber->Capacity }}</td>
                        <td>{{ $fiber->Link_Distance_Km }}</td>
                        <td>{{ $fiber->Measured_Distance_Km }}</td>
                        <td>
                            <span class="badges bg-lightgreen">{{ $fiber->Status }}</span>
                        </td>
                        <td>{{ $fiber->Donor_Site }}</td>
                        <td>{{ $fiber->Designed_Link_Budget }}</td>
                        <td>{{ $fiber->Actual_Cumulative_Loss }}</td>
                        <td class="highlight">{{ $fiber->Difference }}</td>
                        <td>{{ $fiber->Comment }}</td>
                    </tr>
                     @endforeach
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    /* Header Information Styling */
    .header-info {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .header-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .header-label {
        font-weight: bold;
        margin-right: 10px;
        color: #333;
    }

    .header-value {
        color: #555;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .col-l-3, .col-l-4 {
        flex: 1;
        min-width: 200px;
    }

    /* Table Styling */
    .table-responsive {
        overflow-x: auto;
    }

    .table.datanew {
        width: 100%;
        border-collapse: collapse;
    }

    .table.datanew th, .table.datanew td {
        padding: 12px;
        border: 1px solid #ddd;
        text-align: left;
    }

    .table.datanew th {
        background-color: #f8f9fa;
        font-weight: bold;
    }

    .table.datanew tbody tr:hover {
        background-color: #f1f1f1;
    }

    .badges {
        padding: 5px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
    }

    .bg-lightgreen {
        background-color: #d4edda;
        color: #155724;
    }

    .highlight {
        color: #dc3545;
        font-weight: bold;
    }

    /* Button Styling */
    #exportToExcel {
        margin-bottom: 20px;
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    #exportToExcel:hover {
        background-color: #0056b3;
    }
</style>

<!-- Include SheetJS Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>

<script>
document.getElementById('exportToExcel').addEventListener('click', function() {
    // Get the table that contains the data
    var table = document.getElementById('degradationTable');

    // Create a new workbook
    var wb = XLSX.utils.book_new();

    // Convert the table to a worksheet
    var ws = XLSX.utils.table_to_sheet(table);

    // Get header data
    var title = "{{ $core->testDetails->Title }}";
    var region = "{{ $core->location->Region_Metro_Ring }}";
    var testDate = "{{ $core->testDetails->Test_Date }}";
    var round = "{{ $core->testDetails->Q_Round }}";
    var operator = "{{ $core->operator->Operator_Name }}";
    var location = "{{ $core->location->Location_Name }}";

    // Create header rows with correct formatting
    var header = [
    ["","","","","","", title],
    [ region],
    ["Date:", testDate, " "," ", round," ", " ", operator],
    ["FOC Operator","Start of Optical Termination"," ",location],
    [""],
    ["","","","","","DEGRADATION STATUS","","","",""],
    [""]
];


    // Create a new worksheet for the formatted report
    var reportWs = XLSX.utils.aoa_to_sheet(header);

    // Set column widths for better readability
    var wscols = [
        {wch: 25}, // Column A width
        {wch: 35}, // Column B width
        {wch: 20}, // Column C width
        {wch: 20}, // Column D width
        {wch: 15}, // Column E width
        {wch: 20}, // Column F width
        {wch: 30}, // Column G width
        {wch: 30}, // Column H width
        {wch: 15}, // Column I width
        {wch: 40}  // Column J width
    ];
    reportWs['!cols'] = wscols;

    // Get table headers
    var tableHeaders = [];
    var headerCells = table.querySelectorAll('thead th');
    headerCells.forEach(function(cell) {
        tableHeaders.push(cell.textContent);
    });

    // Add table headers to report
    XLSX.utils.sheet_add_aoa(reportWs, [tableHeaders], {origin: {r: header.length, c: 0}});

    // Get table data rows
    var tableData = [];
    var rows = table.querySelectorAll('tbody tr');
    rows.forEach(function(row) {
        var rowData = [];
        row.querySelectorAll('td').forEach(function(cell) {
            rowData.push(cell.textContent.trim());
        });
        tableData.push(rowData);
    });

    // Add data rows to report
    XLSX.utils.sheet_add_aoa(reportWs, tableData, {origin: {r: header.length + 1, c: 0}});

    // Apply cell styles for header section (bold)
    for (var i = 0; i < 3; i++) {
        var cell = XLSX.utils.encode_cell({r: 0, c: i});
        if (!reportWs[cell]) reportWs[cell] = {};
        reportWs[cell].s = {font: {bold: true, sz: 14}};
    }

    // Apply styles for labels (bold)
    for (var i = 2; i < 8; i++) {
        var cell = XLSX.utils.encode_cell({r: i, c: 0});
        if (!reportWs[cell]) reportWs[cell] = {};
        reportWs[cell].s = {font: {bold: true}};
    }

    // Style for "DEGRADATION STATUS" (bold)
    var cell = XLSX.utils.encode_cell({r: 9, c: 0});
    if (!reportWs[cell]) reportWs[cell] = {};
    reportWs[cell].s = {font: {bold: true}};

    // Style table headers (bold, background)
    for (var i = 0; i < tableHeaders.length; i++) {
        var cell = XLSX.utils.encode_cell({r: header.length, c: i});
        if (!reportWs[cell]) reportWs[cell] = {};
        reportWs[cell].s = {
            font: {bold: true},
            fill: {fgColor: {rgb: "f2f2f2"}}
        };
    }

    // Add the worksheet to the workbook
    XLSX.utils.book_append_sheet(wb, reportWs, "Fiber Test Results");

    // Export the workbook to an Excel file
    XLSX.writeFile(wb, "Fiber_Test_Results.xlsx");
});

</script>
@endsection