@extends('layouts.dashboard')
@section('stylesheet')
    {{ Html::style('backoffice/vendor/datatables-plugins/dataTables.bootstrap.css')}}
    <!-- DataTables Responsive CSS -->
    {{ Html::style('backoffice/vendor/datatables-responsive/dataTables.responsive.css')}}
@endsection
@section('content')
<!-- /.row -->
<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="fa fa-comments fa-5x"></i>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">0</div>
                        <div>New Comments!</div>
                    </div>
                </div>
            </div>
            <a href="#">
                <div class="panel-footer">
                    <span class="pull-left">View Details</span>
                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                    <div class="clearfix"></div>
                </div>
            </a>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="panel panel-green">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="fa fa-tasks fa-5x"></i>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">0</div>
                        <div>New Tasks!</div>
                    </div>
                </div>
            </div>
            <a href="#">
                <div class="panel-footer">
                    <span class="pull-left">View Details</span>
                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                    <div class="clearfix"></div>
                </div>
            </a>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="panel panel-yellow">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="fa fa-shopping-cart fa-5x"></i>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">0</div>
                        <div>New Orders!</div>
                    </div>
                </div>
            </div>
            <a href="#">
                <div class="panel-footer">
                    <span class="pull-left">View Details</span>
                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                    <div class="clearfix"></div>
                </div>
            </a>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="panel panel-red">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="fa fa-support fa-5x"></i>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">0</div>
                        <div>Support Tickets!</div>
                    </div>
                </div>
            </div>
            <a href="#">
                <div class="panel-footer">
                    <span class="pull-left">View Details</span>
                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                    <div class="clearfix"></div>
                </div>
            </a>
        </div>
    </div>
</div>
<!-- /.row -->
<div class="row">
    <div class="col-lg-12 col-md-12 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-bar-chart-o fa-fw"></i> Booking List
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover table-striped" id="dataTables-example">
                                <thead>
                                    <tr>
                                        <th>Reference</th>
                                        <th>Booking date</th>
                                        <th>Departue Date</th>
                                        <th>Arrival Date</th>
                                        <th>Client</th>
                                        <th>Tour</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($bookings as $booking)

                                        <tr>
                                            <td>{{ $booking->booking_id }}</td>
                                            <td>{{ $booking->booking_date }}</td>
                                            <td>{{ $booking->departure_date }}</td>
                                            <td>{{ $booking->arrival_date }}</td>
                                            <td>{{ $booking->customer->full_name }}</td>
                                            <td>{{ $booking->tourDate->tour->name_en }}</td>
                                            <td>{!! $booking->status !!}</td>
                                            <td>
                                                <a href="{{ route('administration.bookings.show',$booking->id) }}" class="btn btn-primary pull-left marginr-5">View
                                                </a>
                                                {!! Form::open(['route'=>['administration.bookings.destroy', $booking->id],'method'=>'DELETE','class'=>'form-delete']) !!}
                                                            <i class="icon-trash"></i>
                                                            {!! Form::submit('Delete',['class'=>'btn btn-danger']) !!}
                                                {!! Form::close() !!}
                                            </td>
                                        </tr>

                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div id="morris-bar-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.col-lg-12 -->
</div>
<div class="modal confirm" id="confirm-delete">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Delete confirmation !</h4>
            </div>
            <div class="modal-body">
                <p>On deleting this Booking you will delete also all customer and passengers associated with it. <br/> Do you really want to delete this Booking ?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-danger" id="delete-btn-confirm">Confirm</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<!-- /.row -->
@endsection
@section('scripts')
<!-- DataTables JavaScript -->
    {{Html::script('backoffice/vendor/datatables/js/jquery.dataTables.min.js')}}
    {{Html::script('backoffice/vendor/datatables-plugins/dataTables.bootstrap.min.js')}}
    {{Html::script('backoffice/vendor/datatables-responsive/dataTables.responsive.js')}}
    <script>
        $(document).ready(function() {
            $('#dataTables-example').DataTable({
                responsive: true
            });
        });
    </script>
@endsection