@extends('backend.layouts.app')

@section('content')
<div class="p-3">
    <div class="p-2 header-title-container">
        <span class="mb-0 mx-2">Experts</span>
    </div>
    <button type="button" class="btn m-2" style="width: 10%; background-color: #fa6f10;"><a href="{{ url('admin/experts/create') }}" class="text-decoration-none text-white">Add Expert</a></button>
</div>

<div class="p-3">
    <div class="card-body">
        <table id="myTable" class="table table-striped" style="width:100%">
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Facebook</th>
                    <th>Instagram</th>
                    <th>Linked In</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>
                @foreach ($experts as $items)
                <tr>
                    <td class="w-25"><img src="{{ asset('uploads/experts/' . $items->image) }}" height="80" alt=""></td>
                    <td>{{ $items->name }}</td>
                    <td>{{ $items->position }}</td>
                    <td>{{ $items->facebook }}</td>
                    <td>{{ $items->instagram }}</td>
                    <td>{{ $items->linkedin }}</td>
                    <td>
                        <a href="{{ url('admin/experts/' . $items->id) }}/edit">
                            <button class="btn btn-primary btn-block mb-2 ">Edit</button>
                        </a>
                        <form method="POST" action="{{ url('admin/experts/' . $items->id) }}">@csrf
                            @method('DELETE')
                            <button class="btn btn-danger btn-block mb-2 ">Delete</button>
                        </form>
                    </td>
                </tr>

                @endforeach
            </tbody>
        </table>
    </div>
</div>

<style>
    select {
        color: #fa6f10;
        font-weight: bold;
    }

    option {
        font-weight: bold;
    }

    input {
        color: #fa6f10;
        font-weight: bold;
    }

    .paginate_button {
        color: #fa6f10 !important;
        font-weight: bold !important;
    }
</style>
@endsection