@extends('layouts.adminlayout')

@section('adminheading')
Show Programs
@endsection

@section('adminsection')

<!-- DataTables Bootstrap 5 Integration CSS -->
<link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.bootstrap5.min.css" rel="stylesheet">

<style>
    table.dataTable thead th {
        white-space: nowrap;
    }
    .dt-buttons {
        margin-bottom: -30px;
        text-align: left;
    }
    .dt-button {
        border-radius: 0px !important;
        padding: 6px 12px;
        margin-right: 2px;
        font-size: 14px;
        background-color:#0a568a !important;
        color: white !important;
    }
    .dt-button:hover {
        background-color: #007bff !important;
        color: white !important;
    }
</style>

<div class="container-fluid mt-4">
    <div class="card shadow-lg border-0">
        <div class="card-body">
            <a href="{{ route('programs.create') }}" class="btn text-white mb-3" style="background-color: #0a568a;">
                <i class="fas fa-plus"></i> Add Program
            </a>

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <div class="table-responsive">
                <table id="example" class="table table-bordered">
                    <thead class="thead-dark text-white" style="background-color: #0a568a;">
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Read More</th>
                            <th>Added On</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($programs as $program)
                        <tr>
                            <td>{{ $program->id }}</td>
                            <td>{{ $program->title }}</td>
                            <td>{{ Str::limit($program->description, 100) }}</td>
                            <td>
                                <a href="{{ $program->link }}" class="btn btn-sm btn-info" target="_blank">
                                    <i class="fas fa-external-link-alt"></i> Read More
                                </a>
                            </td>
                            <td>{{ $program->created_at->format('d M, Y h:i A') }}</td>
                            <td>
                                <a href="{{ route('programs.edit', $program->id) }}" class="btn btn-warning btn-sm">
                                    <i class="fas fa-edit"></i> Edit
                                </a>
                                <form action="{{ route('programs.destroy', $program->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

<!-- jQuery and DataTables JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

<!-- DataTables Buttons JS -->
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>

<script>
    $(document).ready(function () {
        $('#example').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print', 'pageLength'
            ],
            lengthMenu: [
                [10, 25, 50, 100, -1],
                ['10', '25', '50', '100', 'All']
            ],
            responsive: true,
            pageLength: 10
        });
    });
</script>