@extends('layouts.main_without_top_button', ['title' => 'LOGISTICS | Loading Orders'])
@section('title')
    OFFENSES
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">OFFENSES</li>
    </ul>
@stop




@section('contentinner')
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
    <style>
        table {
            border-collapse: collapse; /* This property removes the default spacing and borders between table cells */
            width: 100%;
        }

        th, td {
            border: 1px solid #dddddd; /* Set border for table cells */
            padding: 8px; /* Add padding for better spacing */
            text-align: left;
        }

        th {
            background-color: #f2f2f2; /* Add background color for header cells */
        }


        #right-panel {
            font-family: 'Roboto', 'sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }

        #right-panel select, #right-panel input {
            font-size: 15px;
        }

        #right-panel select {
            width: 100%;
        }

        #right-panel i {
            font-size: 12px;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
            float: left;
            width: 70%;
            height: 100%;
        }

        #right-panel {
            margin: 20px;
            border-width: 2px;
            width: 20%;
            height: 400px;
            float: left;
            text-align: left;
            padding-top: 0;
        }

        #directions-panel {
            margin-top: 10px;
            background-color: #FFEE77;
            padding: 10px;
            overflow: scroll;
            height: 174px;
        }

        #map_canvas {
            z-index: 99999;
        }
    </style>

    <div class="tabbable" onload="loadScript()">
        @include('operations.employee_offense.master.auto_generated.profile')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="row-fluid" style="margin-top: 15px">
                    <div class="span12  profile-left">

                        <div class="msghead" style="margin-bottom: 20px;margin-top: -20px;">
                            <ul class="msghead_menu">
                                <li class="left btn-group">
                                    <form class="form-inline form-filter" id="vehicle_import_excel"
                                          action="{{route('asset_register.import')}}" method="post"
                                          enctype="multipart/form-data">
                                        <select name="item_id" width="200px" id="item_id" class="searchable" required>
                                            <option value="">Select Offense</option>
                                            @foreach($items as $item)
                                                {{--                            <option style="text-transform: uppercase;" value="{{$item->id}}" class="text-uppercase" onclick="{{ route('offenses-master.data-table.index', $item->id) }}">{{$item->name}}</option>--}}
                                                <option id="offense_item" style="text-transform: uppercase;"
                                                        value="{{$item->id}}"
                                                        class="text-uppercase">{{$item->name}}</option>
                                            @endforeach
                                        </select>
                                    </form>
                                </li>
                                <li class="right btn-group">
                                    <a class="btn"
                                       onclick="create('{!! route('offenses-master.offense.create-offense') !!}')">OFFENSE</a>
                                </li>
                            </ul>
                            <span class="clearall"></span>
                        </div>


                        <table class="table table-bordered table-condensed  logistics_table"  id="offense_table">
                            <thead>
                            <tr id="table_header_row">
                                <!-- Table headers will be added here dynamically -->
                            </tr>
                            </thead>
                            <tbody id="table_body">
                            <!-- Table body content will be added here dynamically -->
                            </tbody>
                        </table>
                    </div><!--span12-->
                </div>
            </div><!--tab-pane-->
        </div>
    </div>
    {{--    <script>
            jQuery('.searchable').select2();
            $(document).ready(function () {
                $("#item_id").click(function () {
                    // var clonedSection = $("#addFrequencySection").clone();
                    // // Clear input values in the cloned section
                    // clonedSection.find('input').val('');
                    // clonedSection.find('select').val('');
                    // $("#addFrequencySection").after(clonedSection);


                    alert("hello")
                });
            });



            var oTable = jQuery('#offense_table').on('error.dt', function (e, settings, techNote, message) {
                console.log('An error has been reported by DataTables: ', message);
                $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
                stopSpinner();
            })
                .DataTable({
                    "oLanguage": {
                        "sLoadingRecords": startSpinner(),
                        "sZeroRecords": "No store records to display.",
                        "sProcessing": "Please wait - loading records...",
                        "sInfoEmpty": "No entries to display."
                    },
                    "initComplete": function (settings, json) {
                        stopSpinner();
                    },
                    ajax: {
                        url: '{{ route("assets.get_asset_datatables") }}',
                        data: function (d) {
                            d.asset_group_id = jQuery('#asset_group_id').val();
                            d.item_id = jQuery('#item_id').val();
                        }
                    },
                    scrollCollapse: true,
                    "sPaginationType": "full_numbers",
                    processing: true,
                    serverSide: true,
                    // "order":[[0,'asc']],
                    "columns": [
                        {"class": "link", data: 'asset_code'},
                        {"class": "link", data: 'name'},
                        {"class": "link", data: 'asset_group'},
                        {"class": "link", data: 'item'},
                        // {"class": "link", data: 'color'},
                        // {"class": "link", data: 'size'},
                        {"class": "link", data: 'location'},
                        {"class": "link", data: 'custodian'},
                        // {"class": "link", data: 'book_value'},
                        // {"class": "link", data: 'first_registration'},
                        // {"class": "link", data: 'manufacture_year'},
                        {"class": "link", data: 'ownership'},
                        {"class": "link", data: 'action'}
                    ],
                    "bStateSave": true
                });

            jQuery('#filter_general_requisitions').on('click',function (e) {
                e.preventDefault();
                oTable.draw();
            });



        </script>--}}

    <script>

        $(document).ready(function () {

            $('#item_id').change(function () {
                var selectedItemId = $(this).val();
                if (selectedItemId !== "") {

                    var apiUrl = "offenses-master/data-table1/index/" + selectedItemId;
                    var apiUrl2 = "offenses-master/data-table/items/" + selectedItemId;
                    var dt


                    // Fetch column names and initialize DataTable
                    /*getColumnNames().done(function (columnNames) {
                            // Clear the existing table headers
                            $('#offense_table thead tr').empty();

                            var tableHeaderRow = $('#table_header_row');

                            // Loop through the retrieved column names and create table headers
                            $.each(columnNames, function (key, value) {
                                tableHeaderRow.append('<th>' + value + '</th>');
                            });
                            tableHeaderRow.append('<th>Action</th>');

                            // Initialize DataTable
                            var oTable = jQuery('#offense_table').on('error.dt', function (e, settings, techNote, message) {
                                console.log('An error has been reported by DataTables: ', message);
                                $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
                                stopSpinner();
                            }).DataTable({
                                "oLanguage": {
                                    "sLoadingRecords": startSpinner(),
                                    "sZeroRecords": "No store records to display.",
                                    "sProcessing": "Please wait - loading records...",
                                    "sInfoEmpty": "No entries to display."
                                },
                                "initComplete": function (settings, json) {
                                    stopSpinner();
                                },
                                ajax: function (data) {
                                    // url: apiUrl2,
                                    // dataSrc: 'data', // Adjust this based on your API response structure

                                    //retrieve
                                    //console.log(getColumnValues().re);

                                    //console.log("The test ")
                                },
                                scrollCollapse: true,
                                "sPaginationType": "full_numbers",
                                processing: true,
                                serverSide: true,
                                "columns": [
                                    // Define your columns here
                                    {data: 'Vehicle registration'},
                                    {data: 'Driver Names'},
                                    {data: 'Address'},
                                    {data: 'Detected at'},
                                    {data: 'Remarks Action Plan'},
                                    // Add more columns as needed
                                    {
                                        // Example action column
                                        data: null,
                                        render: function (data, type, row) {
                                            return '<button onclick="handleAction(' + row.id + ')">Action</button>';
                                        }
                                    }
                                ],
                                "bStateSave": true
                            });


                        })*/


                    $.ajax({
                        url: apiUrl,
                        type: 'GET',
                        dataType: 'json',
                        success: function (columnNames) {

                            // Clear the existing table headers
                            $('#offense_table thead tr').empty();
                            // Create an empty table body
                            var tbody = $('#offense_table tbody');
                            tbody.empty();

                            var tableHeaderRow = $('#table_header_row');
                            dt = columnNames;

                            // Loop through the retrieved column names and create table headers
                            $.each(columnNames, function (key, value) {
                                tableHeaderRow.append('<th  style="text-align: center; text-transform: uppercase;">' + value + '</th>');
                            });
                            tableHeaderRow.append('<th>Action</th>');
                        },
                        error: function (error) {
                            console.error("Error:", error);
                        }
                    });


                    $.ajax({
                        url: apiUrl2,
                        type: 'GET',
                        dataType: 'json',
                        success: function (data) {
                            var tableBody = $('#table_body');

                            // Loop through the retrieved values and create rows
                            $.each(data, function (index, item) {

                                var itemData = JSON.parse(item.item);
                                var row = '<tr>';


                                // Loop through the keys in itemData and match them with column names
                                $.each(dt, function (key, value) {
                                    console.log("Column names " + itemData[value]);
                                    row += '<td>' + itemData[value] + '</td>';
                                });

                                var deleteUrl = '{{ route("offenses-master.destroy", ["offense_item_id" => ":offense_id"]) }}'.replace(':offense_id', item.id);
                                var editUrl = '{{ route('offenses-master.edit', ["offense_item" => ":offense_id"]) }}'.replace(':offense_id', item.id);


                                row += '<td>' +
                                    "<div class=\"btn-group\">" +
                                    '<a class=\"btn btn-mini\" style=\"margin-left: 2px\" href=\'javascript:editRecordByURL(\"' + editUrl + '\", ' + selectedItemId + ', ' + item.offense_id + ');\'><i class="icon-pencil"></i></a>' +
                                    '<a class="btn btn-danger btn-mini" href=\'javascript:deleteRecordByURL("' + deleteUrl + '","offenses-master.index");\'><i class="icon-trash"></i></a>' +
                                    '</div>' +
                                    '</td>';

                                row += '</tr>';

                                tableBody.append(row);
                            });
                        },
                        error: function (error) {
                            console.error("Error:", error);
                        }
                    });



                }
            });
        });

        function editRecordByURL(url, offense_id,id) {



            jQuery.ajax({
                url: url+"?offence_id="+id,
                type: "GET",
                dataType: "html",
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {

                    // open create method
                    jQuery('#edit_form').empty().append(data);
                    jQuery('#edit_model').appendTo("body").modal('toggle');


                },
                complete: function () {
                    stopSpinner()
                },
                error: function (data) {
                    console.log('Error: ');
                    console.log(data);
                }
            });
        }
    </script>
    {{--<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyB79NNEPOp-SUuaqOMW7EtIxtss_5MbdnI&callback=initMap"></script>--}}
@stop