@extends ('../welcome')


@section('content')
    <style>
        .cards tbody tr {
            float: left;
            width: 19rem;
            margin: 0.5rem;
            border: 0.0625rem solid rgba(0, 0, 0, .125);
            border-radius: .25rem;
            box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
        }

        .cards tbody td {
            display: block;
        }

        .cards thead {
            display: none;
        }

        .cards td:before {
            content: attr(data-label);
            position: relative;
            float: left;
            color: #808080;
            min-width: 4rem;
            margin-left: 0;
            margin-right: 1rem;
            text-align: left;
        }

        tr.selected td:before {
            color: #CCC;
        }

        .table .avatar {
            width: 50px;
        }

        .cards .avatar {
            width: 150px;
            height: 150px;
            margin: 15px;
        }

        div.dataTables_wrapper div.dataTables_length select {
            width: 40%;
        }
                .justify-end {
            justify-content: end;
        }
    </style>

    <div class="d-flex justify-end">
        <a href="{{ route('doctors.create') }}" class="btn btn-primary mb-3">
            <i class="fa fa-plus"></i> Add Doctor
        </a>
    </div>

    <table id="doctors" class="table table-sm table-hover" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Speciality</th>
                <th>Email</th>
                <th>Phone</th>
                <th>City</th>
                <th>Ragion</th>
                <th>Actions</th>
            </tr>
        </thead>
    </table>
@endsection