@extends('layouts.app')


<style>

.sidebar .sidebar-brand {
      padding: 1rem;
      font-size: 1.2rem;
      text-align: center;
      background-color: #0B2C53;
      margin-bottom: 10px;
    }
    .sidebar .sidebar-brand img{
        max-width: 130px !important;
    }
    .sidebar a i{
       margin-right: 10px;  
    }
    .page-item.active .page-link{
      color: #fff;
      background-color: #001d40 !important;
      border:none !important;
    }
    .page-link{
      color: #000 !important;
    }
    .page-item.active .page-link{
     color: #fff !important;
    }
     .manage-head{
        display:flex;
    }
    .manage-head a{
        margin-left:20px;
    }
    .table{
        margin-top: 20px !important;
    }
     .sidebar .sidebar-brand{
      background-color: #ffffff4d;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    background: #001d40 !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
   
    background: #fff !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
        color: #000 !important;
        background: #f8f9fa !important;
    }
    .dataTables_wrapper .dataTables_paginate{
        margin:10px 0px;
    }
    .dataTables_wrapper .dataTables_info{
        margin:10px 0px; 
    }
</style>
@section('content')
<div class="container">
    <div class="card">
        <div class="card-header">
            <h4><strong>MANAGE UPDATES</strong></h4>
        </div>

        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <a href="{{ route('updates.create') }}" class="btn btn-primary">
                        <i class="fa fa-plus"></i> Add Updates
                    </a>
                    <!--<label class="ms-2">-->
                    <!--    <select class="form-control d-inline-block w-auto">-->
                    <!--        <option value="10">10</option>-->
                    <!--        <option value="20">20</option>-->
                    <!--        <option value="50">50</option>-->
                    <!--    </select> records per page-->
                    <!--</label>-->
                </div>
                <!--<div>-->
                <!--    <label class="me-2">Search:</label>-->
                <!--    <input type="text" class="form-control d-inline-block w-auto" placeholder="Search...">-->
                <!--</div>-->
            </div>

            <table id="usersTable" class="table table-bordered table-striped" style="width:100%;">
                <thead>
                    <tr>
                        <th>S.No.</th>
                        <th>Title</th>
                        <th>Message</th>
                        <th>Create Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($updates as $key => $update)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $update->title }}</td>
                            <td>{{ Str::limit($update->message, 100) }}</td>
                            <td>{{ \Carbon\Carbon::parse($update->create_date)->format('d-m-Y') }}</td>
                            <td>
                                <a href="{{ route('updates.show', $update->up_id) }}" class="btn btn-sm btn-info">
                                    <i class="fa fa-eye"></i>
                                </a>
                                <form action="{{ route('updates.destroy', $update->up_id) }}" method="POST" style="display:inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

        </div>
    </div>
</div>

<!-- Include FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
@endsection
@section('scripts')
<script>
    $(document).ready(function() {
        $('#usersTable').DataTable({
            pageLength: 10, 
            lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
        });
    });
</script>
@endsection