@extends('layouts.common')

@section('title')
Laiqa | Admin | Dashboard
@endsection
@section('content')

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<title>@yield('title')</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/font-awesome.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/b-html5-1.6.1/b-print-1.6.1/r-2.2.3/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/style.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap-datetimepicker.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/theme.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/buttons.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/c_style.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/font-face.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/fSelect.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/jquery.multiselect.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/mathquill.css')}}">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<style>
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: none;
        color: black !important;
        border-radius: 4px;
        border: 1px solid #828282;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:active {
        background: none;
        color: black !important;
    }
</style>
<div class="page-wrapper">
    <div class="content">
        <div class='row justify-content-between mb-2'>
            <h1 class='mt-2'>Doctor list</h1>
            <button class='btn btn-success btn-lg float-right' onclick="location.href='tele-add-doctor'">Add Doctor</button>
        </div>


        <div class="row">

            <div class="col-md-12 Dashboard_main_tele">
                <div class="row m-t-30">
                    <div class="col-md-12">


                        <!-- DATA TABLE-->
                        <div class="table-responsive m-b-40">
                            <table class="table table-borderless table-data3" id="table_id">
                                <thead>
                                    <tr>
                                        <th>S.No</th>
                                        <th>Doctor Name</th>
                                        <th>Doctor ID</th>
                                        <th>Specialist</th>
                                        <th>Mobile</th>
                                        <th>Email Id</th>
                                        <th>Doctor Type</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>


                                <tbody>
                                    @foreach ($doctor_list as $row)
                                    <tr>
                                        <td>{{$row->doctor_id}}</td>
                                        <td>{{$row->name}}</td>
                                        <td>YUT-098</td>
                                        <td>{{$row->cat_name}}</td>
                                        <td>{{$row->mobile}}</td>
                                        <td>{{$row->email}}</td>
                                        <td>{{$row->doctor_type}}</td>
                                        <td>{{($row->status == 1)?"active":"In active"}}</td>


                                        <td>
                                            <div class="table-data-feature">
                                                <a href="{{  env('APP_URL') }}tele-doctor-edit/{{ $row->doctor_id }}"><button class="item" data-toggle="tooltip" data-placement="top" title="edit">
                                                        <i class="fa fa-pencil"></i>
                                                    </button></a>

                                                <a href="{{  env('APP_URL') }}tele-doctor-view/{{ $row->doctor_id }}"><button class="item" onclick="viewdata()" data-toggle="tooltip" data-placement="top" title="view">
                                                        <i class="fa fa-eye"></i>
                                                    </button></a>
                                                <button class="item" data-placement="top" title="Delete" data-toggle="modal" data-target="#exampleModal2">
                                                    <i class="fa fa-trash-o"></i>
                                                </button>

                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach

                                </tbody>







                            </table>

                        </div>
                        <!-- END DATA TABLE-->
                    </div>
                </div>
                <!-- end document-->
            </div>
            <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title" id="exampleModalLabel"></h3>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body d-flex justify-content-center">
                            <div>
                                <h4>Are you sure you want to Remove this doctor</h4>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Delete</button>
                            <button type="button" class="btn btn-light" data-dismiss="modal">close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

</script>
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
    $(function() {
        $("#table_id").dataTable();
    });
</script>