@extends('layouts.cork')
@section('title', $title)

@section('page-css')
<style>
    .toggle-code-snippet {
        margin-bottom: 0px;
    }

    body.dark .toggle-code-snippet {
        margin-bottom: 0px;
    }

    /* Style for the container of the year filter and search box */
    .dataTables_filter {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .dataTables_filter label {
        margin-bottom: 0;
        white-space: nowrap;
    }

    .dataTables_filter .form-control {
        width: auto;
    }

    /* Custom styles for the year filter select box */
    .year-filter-select {
        margin-left: 10px;
        margin-bottom: 23px;
    }

    /* TOP HORIZONTAL SCROLLBAR STYLES - START */
    .table-scroll-container {
        position: relative;
        width: 100%;
    }

    .top-scroll {
        width: 100%;
        height: 20px;
        margin-bottom: 10px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .top-scroll-inner {
        height: 1px;
        /* Width will be set by JavaScript to match table width */
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    /* TOP HORIZONTAL SCROLLBAR STYLES - END */

    #welcome-letters {
        width: 100% !important;
    }

    #welcome-letters th,
    #welcome-letters td {
        white-space: nowrap;
    }

    /* STICKY COLUMN STYLES - START */
    /* Make the action column sticky */
    #welcome-letters th:last-child,
    #welcome-letters td:last-child {
        position: sticky;
        right: 0;
        background-color: #f7f7f7; /* Light background for light mode */
        z-index: 10; /* Ensure it stays on top of other content */
        border-left: 1px solid #e0e0e0; /* Optional: adds a visual separator */
    }

    /* Dark mode sticky column background */
    body.dark #welcome-letters th:last-child,
    body.dark #welcome-letters td:last-child {
        background-color: #292e42;
        border-left: 1px solid #3b3f5c;
    }
    /* STICKY COLUMN STYLES - END */

    /* Adjust these widths as needed */
    #welcome-letters th:nth-child(1),
    #welcome-letters td:nth-child(1) { width: 100px; }
    #welcome-letters th:nth-child(2),
    #welcome-letters td:nth-child(2) { width: 150px; }
    /* ... add more column-specific widths as needed ... */

    @media screen and (max-width: 767px) {
        .table-responsive {
            border: none;
        }
    }

    /* New styles for sorting arrows */
    table.dataTable thead .sorting:after,
    table.dataTable thead .sorting_asc:after,
    table.dataTable thead .sorting_desc:after {
        position: absolute;
        top: 12px;
        right: 8px;
        display: block;
        font-family: Arial, sans-serif;
    }
    table.dataTable thead .sorting:after {
        content: "\2195";
        color: #ddd;
        font-size: 0.8em;
    }
    table.dataTable thead .sorting_asc:after {
        content: "\2191";
        color: #000;
    }
    table.dataTable thead .sorting_desc:after {
        content: "\2193";
        color: #000;
    }
</style>
<link rel="stylesheet" type="text/css" href="/cork/src/plugins/css/dark/table/datatable/dt-global_style.css">
<link rel="stylesheet" type="text/css" href="/cork/src/plugins/src/table/datatable/datatables.css">

<link rel="stylesheet" type="text/css" href="/cork/src/plugins/css/light/table/datatable/dt-global_style.css">
<link rel="stylesheet" type="text/css" href="/cork/src/plugins/css/light/table/datatable/custom_dt_miscellaneous.css">

<link rel="stylesheet" type="text/css" href="/cork/src/plugins/css/dark/table/datatable/dt-global_style.css">
<link rel="stylesheet" type="text/css" href="/cork/src/plugins/css/dark/table/datatable/custom_dt_miscellaneous.css">
@endsection

@section('breadcrumb')
    <div class="page-meta">
        <nav class="breadcrumb-style-one" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Welcome Letters</li>
            </ol>
        </nav>
    </div>
@endsection

@section('content')
   
    <div class="d-flex justify-content-between align-items-center mb-3">
        <button class="btn btn-primary" style="margin-left: 20px !important" onclick="window.location.href = '{{ route('welcome-letters.create') }}';">+ Add Welcome Letter</button>
    </div>
    
    <div id="year-filter-container" class="d-none">
        <label for="year_filter" class="form-label mb-0">Filter by Year:</label>
        <select id="year_filter" class="form-control year-filter-select" onchange="window.location.href = this.value;">
            <option value="{{ route('welcome-letters.index', ['year_id' => 'all']) }}" {{ $selectedYearId == 0 ? 'selected' : '' }}>All</option>
            @foreach($years as $year)
                <option value="{{ route('welcome-letters.index', ['year_id' => $year->id]) }}" {{ $selectedYearId == $year->id ? 'selected' : '' }}>
                    {{ $year->year }}
                </option>
            @endforeach
        </select>
    </div>

    <div class="table-scroll-container">
        <!-- Top horizontal scrollbar -->
        <div class="top-scroll" id="top-scroll">
            <div class="top-scroll-inner" id="top-scroll-inner"></div>
        </div>
        
        <table id="welcome-letters" class="table dt-table-hover" style="width:100%">
            <thead>
                <tr>
                    <th>Section</th>
                    <th>Need To Send</th>
                    <th>Teacher</th>
                    <th class="no-content">Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($welcome_letters as $wl)
                    <tr>
                        <td>
                            @if($wl->section && $wl->section->provider && $wl->section->course && $wl->section->teacher && $wl->section->year)
                                {{ $wl->section->provider->name }} -
                                {{ $wl->section->course->name }} -
                                {{ $wl->section->teacher->last_name }} -
                                {{ $wl->section->year->year }}
                                {{ $wl->section->termDesc() }}
                            @else
                                N/A
                            @endif
                        </td>
                        <td>
                            @if($wl->section)
                                {{ $pendingCounts[$wl->section->id] ?? 0 }}
                            @else
                                0
                            @endif
                        </td>                        
                        <td>
                            @if($wl->section && $wl->section->teacher)
                                {{ $wl->section->teacher->last_name }}, {{ $wl->section->teacher->first_name }}
                            @else
                                N/A
                            @endif
                        </td>

                        <td style="wrap:nowrap">
                            <a style="color: blue; text-decoration: underline;" href="{{ route('welcome-letters.show', $wl->id) }}">View</a> | 
                            <a style="color: blue; text-decoration: underline;" href="{{ route('welcome-letters.edit', $wl->id) }}">Edit</a> | 
                            <a style="color: blue; text-decoration: underline;" href="{{ route('welcome-letters.send-test-email-confirm', $wl->id) }}">Test Send</a> | 
                            <a style="color: blue; text-decoration: underline;" href="{{ route('welcome-letters.bulk-send', $wl->id) }}">Class Send</a> | 
                            <a style="color: blue; text-decoration: underline;" href="{{ route('welcome-letters.delete', $wl->id) }}">Delete</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection

@section('page-js')
<script src="/cork/src/plugins/src/table/datatable/datatables.js"></script>
<script src="/cork/src/plugins/src/table/datatable/button-ext/dataTables.buttons.min.js"></script>
<script src="/cork/src/plugins/src/table/datatable/button-ext/jszip.min.js"></script>
<script src="/cork/src/plugins/src/table/datatable/button-ext/buttons.html5.min.js"></script>
<script src="/cork/src/plugins/src/table/datatable/button-ext/buttons.print.min.js"></script>
<script src="/cork/src/plugins/src/table/datatable/custom_miscellaneous.js"></script>
<script>
$(document).ready(function() {
    var table = $('#welcome-letters').DataTable({
        "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
            "<'table-responsive'tr>" +
            "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
        "oLanguage": {
            "oPaginate": {
                "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
            },
            "sInfo": "Showing page _PAGE_ of _PAGES_",
            "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
            "sSearchPlaceholder": "Search...",
            "sLengthMenu": "Results :  _MENU_",
        },
        "stripeClasses": [],
        "lengthMenu": [25, 50, 75, 100],
        "pageLength": 100,
        "ordering": true,
        "order": [[0, 'asc']],
        "columnDefs": [
            { "orderable": true, "targets": [0, 1, 2] },
            { "orderable": false, "targets": 3 }
        ],
        "initComplete": function () {
            $('#year-filter-container').appendTo('.dataTables_filter');
            $('#year-filter-container').removeClass('d-none');
            
            // Initialize the top scrollbar
            initializeTopScrollbar();
        }
    });

    // Function to initialize and sync the top scrollbar
    function initializeTopScrollbar() {
        var $tableContainer = $('.table-responsive');
        var $topScroll = $('#top-scroll');
        var $topScrollInner = $('#top-scroll-inner');
        
        // Function to update the top scrollbar width
        function updateScrollbarWidth() {
            var tableWidth = $('#welcome-letters')[0].scrollWidth;
            var containerWidth = $tableContainer.width();
            
            if (tableWidth > containerWidth) {
                $topScrollInner.width(tableWidth);
                $topScroll.show();
            } else {
                $topScroll.hide();
            }
        }
        
        // Sync scrolling between top scrollbar and table
        $topScroll.on('scroll', function() {
            $tableContainer.scrollLeft($(this).scrollLeft());
        });
        
        $tableContainer.on('scroll', function() {
            $topScroll.scrollLeft($(this).scrollLeft());
        });
        
        // Update scrollbar width initially and on window resize
        updateScrollbarWidth();
        $(window).on('resize', updateScrollbarWidth);
        
        // Update scrollbar width when DataTable redraws
        table.on('draw', function() {
            setTimeout(updateScrollbarWidth, 10);
        });
    }
});
</script>
@endsection