@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="d-flex justify-content-between align-items-center mb-3">
             <h2>Manage Pages</h2>
        <a href="{{ route('pages.create') }}" class="btn btn-primary mt-2">+ Add Page</a>
        </div>
       
        
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        
        <table id="usersTable" class="table table-bordered table-striped" style="width:100%;">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Page Title</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($pages as $key => $page)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $page->title }}</td>
                        <td>
                            <a href="{{ route('pages.edit', $page->page_id) }}" class="btn btn-sm btn-warning">Edit</a>
                            <form action="{{ route('pages.destroy', $page->page_id) }}" method="POST" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection
@section('scripts')
<script>
    $(document).ready(function() {
        $('#usersTable').DataTable({
            pageLength: 10, 
            lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
        });
    });
</script>
@endsection