@if(session()->has('admin_userid'))
   
@else 
 <script>window.location.href="admin";</script>
@endif

@extends('backend.header')
@section('content')

    <div class="container-fluid">
        <div class="row bg-title">
                    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                        <h4 class="page-title">Manage Parking Providers</h4> </div>
                     <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12 text-right">
                            <button type="button" class="btn btn-primary" onclick="window.location.href='add_parking'"><i class="fa fa-plus"></i>&nbsp; Add Provider</button>
                        </div>
                    <!-- <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
                        <ol class="breadcrumb">
                            <li><a href="#">Home</a></li>
                            <li class="active">Dashboard</li>
                        </ol>
                    </div> -->
                    <!-- /.col-lg-12 -->
                </div>
        <!-- <div class="row bg-title">
            <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <h4 class="page-title">Manage Parking Providers </h4> </div>
        </div> -->
            @php
                $get_provider =DB::table('parking_provider')->get();
                $count = 1;
            @endphp
        <div class="col-sm-12">
            <div class="white-box">
              <!--   <div style="display: flex; margin-bottom: 2%;">
                    <h3 class="box-title m-b-0">Parking Providers Details</h3>
                    <a href="{{'add_parking'}}" class="btn btn-primary" style="margin-left: 77%; z-index:999;" ><i class="fa fa-plus"></i>&nbsp; Add</a>
                </div> -->
                <div class="table-responsive">
                    <table id="myTable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Name</th>
                                <th>Service type</th>
                                <th>Logo</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($get_provider as $provider)
                            <tr>
                                <td>{{$count}}</td>
                                <td>{{$provider->provider_name}}</td>
                                <td>{{$provider->service_type}}</td>
                                <td><img src="{{$provider->logo}}" alt="logo" width="100px; height:100px;"></td>
                                <td>
                                    <button class="btn view_provider" id="{{$provider->providerid}}" data-toggle="modal" data-target=".bs-example-modal-lg"><i class="fa fa-eye"></i></button>
                                    <!-- <button class="btn"><i class="fa fa-eye"></i></button> -->
                                    <button class="btn" onclick="window.location.href='edit_parking&id={{$provider->providerid}}'"><i class="fa fa-edit"></i></button>
                                    <button class="btn" onclick="if(confirm('Are you Sure Want to Delete this Provider?') == true){location.href = 'delete_parking&id={{$provider->providerid}}';}"><i class="fa fa-trash-o"></i></button>
                                </td>
                            </tr>
                            @php
                             $count++   
                            @endphp
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
</div>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myLargeModalLabel">Providers Details</h4> </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="example-text-input" class="col-4 col-form-label">Name</label>
                                <div class="col-8">
                                    <input class="form-control form-control-line" type="text" id="providername" name="providername">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="example-text-input" class="col-4 col-form-label">Service Type</label>
                                <div class="col-8">
                                    <input class="form-control form-control-line" type="text" id="servicetype" name="servicetype">
                                </div>
                            </div>
                        </div>
                    <div class="clear"></div>
                    <!-- <div class="col-md-6">
                            <div class="form-group row">
                                <label for="example-text-input" class="col-4 col-form-label">Rating</label>
                                <div class="col-8">
                                    <input class="form-control form-control-line" type="text" id="provider_rating" name="provider_rating">
                                </div>
                            </div>
                        </div> -->
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="example-text-input" class="col-4 col-form-label">Description</label>
                                <div class="col-8">
                                     <textarea class="form-control form-control-line" id="description" name="description"></textarea>
                                    <!-- <input class="form-control form-control-line" type="text" id="terminal" name="terminal"> -->
                                </div>
                            </div>
                        </div>
                    
                    <div class="col-md-6">
                            <div class="form-group row">
                                <label for="example-text-input" class="col-4 col-form-label">Overview</label>
                                <div class="col-8">
                                    <textarea class="form-control form-control-line" id="overview" name="overview"></textarea>
                                     <!-- <div id="overview"></div> -->
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="example-text-input" class="col-4 col-form-label">Return Procedure</label>
                                <div class="col-8">
                                    <textarea class="form-control form-control-line" id="returns" name="returns"></textarea>
                                </div>
                            </div>
                        </div>
                    <div class="col-md-6">
                            <div class="form-group row">
                                <label for="example-text-input" class="col-4 col-form-label">Drop off Procedure</label>
                                <div class="col-8">
                                    <textarea class="form-control form-control-line" id="drop_off" name="drop_off"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="example-text-input" class="col-4 col-form-label">Booking Process</label>
                                <div class="col-8">
                                    <input class="form-control form-control-line" type="text" id="cancellation" name="cancellation">
                                </div>
                            </div>
                        </div>
                    <div class="col-md-6">
                            <div class="form-group row">
                                <label for="example-text-input" class="col-4 col-form-label">No.of Slots</label>
                                <div class="col-8">
                                    <input class="form-control form-control-line" type="text" id="noofslots" name="noofslots">
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="example-text-input" class="col-4 col-form-label">Logo</label>
                                <div class="col-8">
                                    <div id="logo" class="pop-img"></div>
                                </div>
                            </div>
                        </div>
                    <div class="clear"></div>
                </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger waves-effect text-left" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->


<button  class="btn btn-primary add-btn" data-toggle="modal" data-target="#view_provider" id="view_provider_modal" style="display:none;"><i class="fa fa-plus"></i></button>
    <script src="assets/plugins/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="assets/plugins/bower_components/datatables/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>

    <link href="assets/plugins/bower_components/datatables/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script>
        $(document).ready(function() {
            $('#myTable').DataTable();
            $(document).ready(function() {
                var table = $('#example').DataTable({
                    "columnDefs": [{
                        "visible": false,
                        "targets": 2
                    }],
                    "order": [
                        [2, 'asc']
                    ],
                    "displayLength": 25,
                    "drawCallback": function(settings) {
                        var api = this.api();
                        var rows = api.rows({
                            page: 'current'
                        }).nodes();
                        var last = null;
    
                        api.column(2, {
                            page: 'current'
                        }).data().each(function(group, i) {
                            if (last !== group) {
                                $(rows).eq(i).before(
                                    '<tr class="group"><td colspan="5">' + group + '</td></tr>'
                                );
    
                                last = group;
                            }
                        });
                    }
                });
    
                // Order by the grouping
                $('#example tbody').on('click', 'tr.group', function() {
                    var currentOrder = table.order()[0];
                    if (currentOrder[0] === 2 && currentOrder[1] === 'asc') {
                        table.order([2, 'desc']).draw();
                    } else {
                        table.order([2, 'asc']).draw();
                    }
                });
            });
        });
        $('#example23').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
        </script>
        <script>
            $('.view_provider').click(function(){
              var id = this.id;
              $.ajax({
                url: 'get_provider_details',
                method: "post",
                data: {proid: id,
                _token: '{{ csrf_token() }}'},
                dataType: "json",
                success: function (response) { 
                    var detail = response.details[0];
                    
                    $('#providername').val(detail.provider_name);
                    $('#servicetype').val(detail.service_type);
                    $('#providerrating').val(detail.provider_rating);
                    $('#description').val(detail.description);
                    $('#overview').val(detail.overview);
                    $('#drop_off').val(detail.drop_off);
                    $('#returns').val(detail.returns);
                    $('#cancellation').val(detail.cancellation);
                    $('#noofslots').val(detail.no_of_slots);

                   

                    $('#drop_off').html('');
                    $('#returns').html('');
                    $('#logo').html('');
                    $('#logo').append('<a href="'+detail.logo+'" data-fancybox="images"><img src="'+detail.logo+'" style="width: 150px;height: 150px;"></a>');

                    // alert(detail.postalcode);
                    

                    $('#view_provider_modal').click();
                }
            });
          });
       </script>
@endsection