@extends('dash.layouts.app')

@section('title')
    Client Appointments
@endsection

@section('css')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('dash/plugins/datatables/dataTables.bootstrap.css') }}">
@endsection


@section('content')
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <div class="pull-left">
                            <h3 class="box-title">Client Appoinments</h3>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="example1" class="table table-bordered table-striped text-center">
                            <thead>
                            <tr>
                                <th width="3%">#</th>
                                <th>Client Name</th>
                                <th>Email</th>
                                <th>Contacts</th>
                                
                                
                                <th>Date</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($appointments as $key => $appointment)
                                <tr>
                                    <td>{{$key+1}}</td>
                                    <td>{{$appointment->name}}</td>
                                    <td>{{$appointment->email}}</td>
                                    <td>{{$appointment->phone}}</td>
                                    
                                    <td>{{$appointment->date}} at {{$appointment->time}}</td>
                                   <td>
                                        @if($appointment->status==0)
                                            <div class="badge badge-warning">Pending</div>
                                        @elseif($appointment->status==1)
                                            <div class="badge badge-info">In Process</div>
                                        @elseif($appointment->status==2)
                                            <div class="badge badge-primary">Hold</div>
                                        @elseif($appointment->status==3)
                                            <div class="badge badge-danger">Cancel</div>
                                        @elseif($appointment->status==4)
                                            <div class="badge badge-success">Completed</div>
                                        @else
                                            N/A
                                        @endif
                                   </td>
                                    <td>
                                        <form action="{{route('appointments.update',[$appointment->id])}}" class="order_status" method="post" >
                                            @method('PUT')
                                            @csrf
                                            <select class="form-control" name="status" onchange="this.form.submit()">
                                                <option value="0" @if($appointment->status==0) selected @endif>Pending</option>
                                                <option value="1" @if($appointment->status==1) selected @endif>In Process</option>
                                                <option value="2" @if($appointment->status==2) selected @endif>Hold</option>
                                                <option value="3" @if($appointment->status==3) selected @endif>Cancel</option>
                                                <option value="4" @if($appointment->status==4) selected @endif>Completed</option>
                                            </select>
                                        </form>
                                      {{--  <div class="dropdown">
                                          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fa fa-list-ul"></i>
                                          </button>
                                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <ul class="list-group">
                                                <li class="list-group-item">
                                                    <a class="dropdown-item" href="{{route('client-order.edit',[$order->id])}}">
                                                        <i class="fa fa-pencil"></i> Edit
                                                    </a>
                                                </li>
                                                <li class="list-group-item">
                                                    <a class="dropdown-item" href="{{route('client-order.delete',[$order->id])}}">
                                                        <i class="fa fa-trash"></i> Delete
                                                    </a>
                                                </li>
                                            </ul>
                                          </div>
                                        </div> --}}
                                    </td>
                                   
                                </tr>
                            @endforeach

                            </tbody>
                            
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
@endsection

@section('js')
    <!-- DataTables -->
    <script src="{{ asset('dash/plugins/datatables/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('dash/plugins/datatables/dataTables.bootstrap.min.js') }}"></script>

    <script>
        $(function () {
            $('#example1').DataTable()
            $('#example2').DataTable({
                'paging': true,
                'lengthChange': false,
                'searching': false,
                'ordering': true,
                'info': true,
                'autoWidth': false
            })
        })
    </script>
@endsection