@extends('layouts.app_admin')
@section('content')



<div class="box">
    <div class="box-header with-border">
      <h3 class="box-title">Hover Export Data Table</h3>
      <h6 class="box-subtitle">طباعة - نسخ - تصدير أكسل - تصدير بيدي أف </h6>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <div class="table-responsive">
            <button type="button" class="btn btn-primary pull-left" onclick="create_item('categories')">
                add item
              </button>
          <table id="example" class="table table-bordered table-hover display nowrap margin-top-10 w-p100">
            <thead>
                <tr>
                    <th>الرقم </th>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody  id="create_item_table">

                @if($categories ?? '')


                                        @else
                        @php
                            $categories = App\Admin\Category::all();
                        @endphp
                                        @endif
                @foreach ($categories as $item )
                <tr id="create_item_{{$item->id}}_row">
                    <td>{{ $item->id }}</td>
                    <td><img class="wp-post-image img-rounded" src="{{asset('images/categories')}}/{{ $item->image }}" alt="Cinque Terre" width="77" height="55"></td>
                    <td>{{ $item->name }}</td>
                    <td>{{ $item->name }}</td>
                    <td>{{ $item->name }}</td>
                    <td>
                    @include('back.include.eye',['id'=>$item->id,'name'=>'categories','active'=>$item->active])
                    </td>
                    <td>
                    @include('back.include.update',['id'=>$item->id,'name'=>'categories'])
                    </td>
                </tr>
                  @endforeach

            </tbody>
          </table>
        </div>
    </div>
    <!-- /.box-body -->
  </div>
{{-- @php
    $name =null;
@endphp
    <div class="page-inner" id="info_item_user">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">{{ $name }}</h3>
                <h6 class="box-subtitle"> {{ $name }} </h6>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="table-responsive">
                    <button type="button" class="btn btn-primary pull-left" onclick="create_item('categories')">
                        add item
                    </button>

                    <div class="table-responsive">
                        {!! $dataTable->table([
                        'class' => 'table table-bordered table-hover display nowrap margin-top-10 w-p100',
                        'style' => 'width: 100%; cellspacing: 0;',
                        'id' => 'example',])!!}


                    </div>

                </div>
            </div>
            <!-- /.box-body -->
        </div> --}}

        {{-- <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOgyEYGdiCZ6ekVq2mTZhOLHcnyhYJlMs">
        </script>
        <script type="text/javascript" src="{{ asset('assets/js/frondJS.js') }}"></script> --}}

        @push('script')
  {{-- {!! $dataTable->scripts() !!} --}}
            {{-- <script type="text/javascript">
                < ? php /* blade_comment_start */ ? > function createGift() {
                    var form = $('#form_create_gift')[0]; // You need to use standard javascript object here
                    var formData = new FormData(form);

                    $.ajax({
                        type: 'POST',
                        url: 'gift_create',
                        data: formData,
                        contentType: false,
                        cache: false,
                        processData: false,
                        beforeSend: function() {
                            //$('.submitBtn').attr("disabled","disabled");
                            $('#form_create_gift').css("opacity", ".5");
                        },
                        success: function(msg) {
                            if (msg == 'error') {

                                //$("#modal_slider").modal('hide');
                                demo.showNotification('top', 'left', 'danger', "تاكد من المدخلات");
                            } else {
                                $("#modal_gift").modal('hide');

                                $('#form_create_gift').css("opacity", "1");
                                //$("#modalConfirmupdateclass").modal('hide');
                                demo.showNotification('top', 'left', 'success', "تم تعديل الفصل");
                                //$("#classback").html(msg);
                            }
                            //$('#form_create_slider').css("opacity","");
                            //$(".submitBtn").removeAttr("disabled");

                        }
                    });
                }

            </script>
            <script type="text/javascript">
                function createUser() {
                    var form = $('#form_create_slider')[0]; // You need to use standard javascript object here
                    var formData = new FormData(form);

                    $.ajax({
                        type: 'POST',
                        url: 'slider_create',
                        data: formData,
                        contentType: false,
                        cache: false,
                        processData: false,
                        beforeSend: function() {
                            //$('.submitBtn').attr("disabled","disabled");
                            $('#form_create_slider').css("opacity", ".5");
                        },
                        success: function(msg) {
                            if (msg == 'error') {

                                //$("#modal_slider").modal('hide');
                                demo.showNotification('top', 'left', 'danger', "تاكد من المدخلات");
                            } else {
                                $("#modal_slider").modal('hide');

                                $('#form_create_slider').css("opacity", "1");
                                //$("#modalConfirmupdateclass").modal('hide');
                                demo.showNotification('top', 'left', 'success', "تم تعديل الفصل");
                                //$("#classback").html(msg);
                            }
                            //$('#form_create_slider').css("opacity","");
                            //$(".submitBtn").removeAttr("disabled");

                        }
                    });
                }

            </script>
            <script type="text/javascript">
                function DatatableAdmin(page, data) {
                    $.ajax({
                        type: 'get',
                        url: page,
                        contentType: false,
                        cache: false,
                        processData: false,
                        beforeSend: function() {
                            //$('.submitBtn').attr("disabled","disabled");
                            $('#pages_admin_datatables').css("opacity", ".5");
                        },
                        success: function(msg) {
                            if (msg == 'error') {
                                document.getElementById('pages_admin_datatables').innerHTML = msg;
                            } else {
                                document.getElementById('title_page').innerHTML = data;
                                //$('.nav-link.active').removeClass('active');
                                //  $("#" + page).addClass('active');
                                document.getElementById('pages_admin_datatables').innerHTML = msg;


                            }
                        }
                    });
                }

            </script>
            <script type="text/javascript">
                // function create_item(item) {

                //     var form = $("#form_create_" + item)[0]; // You need to use standard javascript object here
                //     var formData = new FormData(form);

                //     $.ajax({
                //         type: 'POST',
                //         url: item + "_create",
                //         data: formData,
                //         contentType: false,
                //         cache: false,
                //         processData: false,
                //         beforeSend: function() {
                //             //$('.submitBtn').attr("disabled","disabled");
                //             $("#form_create_" + item).css("opacity", ".5");
                //         },
                //         success: function(msg) {
                //             if (msg == 'error') {


                //                 $("#form_create_" + item).css("opacity", ".5");
                //                 document.getElementById('create_item_table').innerHTML = msg;
                //                 document.showNotification('top', 'left', 'danger', "تاكد من المدخلات");
                //             } else {

                //                 $("#form_create_" + item).css("opacity", "1");
                //                 $("#modal_" + item).modal("hide");
                //                 document.getElementById('create_item_table').innerHTML = msg;

                //                 $("#form_create_" + item).css("opacity", "1");
                //                 document.showNotification('top', 'left', 'success', "تم تعديل الفصل");

                //             }

                //         }
                //     });
                // }

                function updata_itemJq(id, item) {

                    var form = $("#form_updata_" + item + "" + id)[0]; // You need to use standard javascript object here
                    var formData = new FormData(form);
                    $.ajax({
                        type: 'POST',
                        url: item + "_updata",
                        data: formData,
                        contentType: false,
                        cache: false,
                        processData: false,
                        beforeSend: function() {
                            $("#form_updata_" + item + "" + id).css("opacity", ".5");
                        },
                        success: function(msg) {
                            if (msg == 'error') {
                                document.getElementById(item + "_" + id).innerHTML = msg;
                            } else {
                                $("#modal_updata_" + item + "" + id).modal("hide");
                                document.getElementById(item + "_" + id).innerHTML = msg;
                                document.getElementById(item + "ss" + id).value = '';
                                $("#form_updata_" + item + "" + id).css("opacity", "1");
                            }

                        }
                    });
                }

                function categorySubCreate() {
                    var form = $('#form_create_categorysub')[0]; // You need to use standard javascript object here
                    var formData = new FormData(form);

                    $.ajax({
                        type: 'POST',
                        url: 'categorysub_create',
                        data: formData,
                        contentType: false,
                        cache: false,
                        processData: false,
                        beforeSend: function() {
                            //$('.submitBtn').attr("disabled","disabled");
                            $('#form_create_categorysub').css("opacity", ".5");
                        },
                        success: function(msg) {
                            if (msg == 'error') {
                                document.getElementById('create_item_table').innerHTML = msg;
                                demo.showNotification('top', 'left', 'danger', "تاكد من المدخلات");
                            } else {
                                document.getElementById('create_item_table').innerHTML = msg;
                                $("#modal_categorysub").modal('hide');
                                $('#form_create_categorysub').css("opacity", "1");
                                demo.showNotification('top', 'left', 'success', "تم تعديل الفصل");

                            }

                        }
                    });
                }

                function categorySubEdit(id) {
                    var form = $("#form_updata_categorysub" + id)[0]; // You need to use standard javascript object here
                    var formData = new FormData(form);
                    $.ajax({
                        type: 'POST',
                        url: 'categorysub_updata',
                        data: formData,
                        contentType: false,
                        cache: false,
                        processData: false,
                        beforeSend: function() {
                            $("#form_updata_categorysub" + id).css("opacity", ".5");
                        },
                        success: function(msg) {
                            if (msg == 'error') {
                                document.getElementById('create_item_table').innerHTML = msg;
                                demo.showNotification('top', 'left', 'danger', "تاكد من المدخلات");
                            } else {
                                document.getElementById("categorysub_" + id).innerHTML = msg;
                                $("#modal_updata_categorysub" + id).modal('hide');
                                $("#form_updata_categorysub" + id).css("opacity", "1");
                                demo.showNotification('top', 'left', 'success', "تم تعديل الفصل");
                            }
                        }
                    });
                }



                function maps_customer(x, y) {
                    $("#modal_street_id").modal("show");
                    $("#modal_street_id").modal({
                        backdrop: false
                    });

                    initMap(x, y);
                }

                function initMap(x, y) {

                    var map;

                    const center = {

                        lat: 15.337063490932561,
                        lng: 44.21876895259539
                    };
                    const options = {
                        zoom: 15,
                        scaleControl: true,
                        center: center
                    };
                    map = new google.maps.Map(
                        document.getElementById('mapCanvas'), options);
                    // Locations of landmarks
                    const dakota = {
                        lat: parseFloat(x),
                        lng: parseFloat(y)
                    };
                    const frick = {
                        lat: 15.337063490932561,
                        lng: 44.21876895259539
                    };
                    // The markers for The Dakota and The Frick Collection
                    var directionsService = new google.maps.DirectionsService();
                    var directionsRenderer = new google.maps.DirectionsRenderer();
                    directionsRenderer.setMap(map); // Existing map object displays directions
                    // Create route from existing points used for markers
                    const route = {
                        origin: dakota,
                        destination: frick,
                        travelMode: 'DRIVING'
                    }
                    directionsService.route(route, function(response, status) { // anonymous function to capture directions
                        if (status !== 'OK') {
                            window.alert('Directions request failed due to ' + status);
                            return;
                        } else {
                            directionsRenderer.setDirections(response); // Add route to the map
                            var directionsData = response.routes[0].legs[0]; // Get data about the mapped route
                            if (!directionsData) {
                                window.alert('Directions request failed');
                                return;
                            } else {
                                document.getElementById("price_deliver_id_value").innerHTML = parseInt(directionsData
                                    .distance.text);
                                if (parseInt(directionsData.distance.text) < 4) {
                                    document.getElementById("price_deliver_id_data_rivi").innerHTML = "600";
                                } else {
                                    document.getElementById("price_deliver_id_data_rivi").innerHTML = parseInt(
                                        directionsData.distance.text) * 150 + " ريال يمني";
                                }
                            }
                        }
                    });
                }

            </script>  --}}
        @endpush

    </div>
@endsection