@extends('admin.layouts.master')

@section('css')
<style>
    .form-group{overflow: hidden;}
    .portlet.light .dataTables_wrapper .dt-buttons {margin-top: 0px;}
    .dataTables_wrapper .dt-buttons {float: left;}
</style>
<link rel="stylesheet" href="/css/dataTables.bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">

@endsection

@section('content')
    <div class="page-content-wrapper">
        <!-- BEGIN CONTENT BODY -->
        <div class="page-content">
            <!-- BEGIN PAGE BASE CONTENT -->
            <div class="row">
                <div class="col-md-12 ">
                    <!-- BEGIN SAMPLE FORM PORTLET-->
                    <div class="portlet light bordered">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="icon-settings font-dark"></i>
                                <span class="caption-subject font-dark sbold uppercase">Appointment List</span>
                            </div>
                        </div>
                        <div class="portlet-body form">
                            <div class="app-query col-sm-12 row">
                            @if (Session::has('message'))
                                <div class="alert alert-info">{{ Session::get('message') }}</div>
                            @endif
                                {!! Form::open(['url' => ['/appointments'], 'method' =>'post', 'class'=>'form-horizontal','enctype'=>"multipart/form-data"]) !!}
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Select Doctor</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="doctorname">
                                            <option value="">---- Select Doctor ----</option>
                                            @foreach($doctors as $doctor)
                                            <option value="{{$doctor->name}}">{{$doctor->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Appointment Date</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control datepicker" name="datefrom" />
                                    </div>
                                    <label class="col-sm-2 control-label">To Date</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control datepicker" name="dateto" />
                                    </div>
                                </div>
                                <div class="form-group text-center">
                                    {!! Form::submit('Submit', ['class'=> 'btn btn-primary']) !!}
                                </div>
                                {!! Form::close() !!}
                            <hr>
                            </div>
                            <table class="table table-bordered app-list row" id="datatable"> 
                                <thead>
                                    <tr> 
                                        <th class="col-md-1">Sl No</th>
                                        <th class="col-md-2">Patients Name</th>
                                        <th class="col-md-1">Gender</th>
                                        <th class="col-md-1">Birth Date</th>
                                        <th class="col-md-2">Mobile</th>
                                        <th class="col-md-2">Dr. Name</th>
                                        <th class="col-md-1">App Date</th>
                                        <th class="col-md-2">Message</th>
                                        <th class="col-md-1">Action</th>
                                    </tr>
                                </thead>
                                <tbody> 
                                                                @foreach($appointments as $appointment)
                                    <tr> 
                                        <td>{{ $slno }}</td>
                                        <td>{{ $appointment->patient }}</td>
                                        <td>{{ $appointment->gender }}</td>
                                        <td>{{ $appointment->birthdate }}</td>
                                        <td>{{ $appointment->mobile }}</td>
                                        <td>{{ $appointment->doctor }}</td>
                                        <td>{{ $appointment->app_date }}</td>
                                        <td>{{ $appointment->message }}</td>
                                        <td class="align-middle">
                                            @can('appointment-delete')
                                            {!! Form::open([ 'method' => 'Delete', 'url' => ['/appointments', $appointment->id]]) !!}
                                            {!! Form::submit('Delete',['class'=>'btn btn-sm btn-danger']) !!}
                                            {!! Form::close() !!}     
                                            @endcan                                   
                                        </td>
                                    </tr>
                                                                    @endforeach
                                </tbody>
                            </table>                          
                        </div>
                    </div>
                </div>
            </div>
            <!-- END PAGE BASE CONTENT -->
        </div>
        <!-- END CONTENT BODY -->
    </div>
@endsection

@section('script')
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="/js/dataTables.bootstrap.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<script>
$(document).ready(function() {
    $('#datatable').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'pdf'
        ]
    } );
} );
</script>
@endsection