@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">
    <h4 class="mb-3">Manage Contact</h4>

    <table id="usersTable" class="table table-bordered table-striped" style="width:100%;">
        <thead>
            <tr>
                <th>S.No.</th>
                <th>Name</th>
                <th>Email</th>
                <th>Contact</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($contacts as $index => $contact)
                <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td>{{ $contact->name }}</td>
                    <td>{{ $contact->email }}</td>
                    <td>{{ $contact->contact_no }}</td>
                    <td>
                        <a href="{{ route('contacts.show', $contact->contact_id) }}" class="btn btn-sm btn-info">View</a>
                        <form action="{{ route('contacts.destroy', $contact->contact_id) }}" method="POST" 
                              style="display:inline" onsubmit="return confirm('Are you sure?')">
                            @csrf @method('DELETE')
                            <button 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