@extends('maintenance.breakdowns.includes.breakdowns')
@section('breakdown')
    <div class="tab-pane active">
        <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
            <ul class="msghead_menu">
                <li class="right btn-group">

                    <a class="btn" onclick="createOrEdit('{{route('breakdowns.create')}}')">REPORT BREAKDOWN</a>

                    <a class="btn" id="open_job_card" onclick="openServiceDone()">OPEN JOBCARD</a>
                </li>
            </ul>
            <span class="clearall"></span>
        </div><!--msghead-->
        <br><br>
        <table class="table table-bordered table-condensed logistics_table" id="break_down_reports">
            <thead>
            <tr>
                <th>No.</th>
                <th>Date</th>
                <th>Vehicle</th>
                <th>Driver</th>
                <th>Destination</th>
                <th>Location</th>
                <th>Time Taken</th>
                <th>Description</th>
                <th>Action</th>
            </tr>
            </thead>
        </table>
    </div>



    <script>

        var dt = jQuery('#break_down_reports');
        var mainDataTable = dt.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 Orders available.",
                    "sInfoEmpty": "No entries to display."
                },
                ajax: {
                    url: "{{ route('breakdowns.data_table.index') }}",
                    data: function (d) {
                    }
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order": [[2, "desc"]],
                "columns": [
                    {data: 'checkbox'},
                    {"class": "link number", data: 'date'},
                    {"class": "link", data: 'truck'},
                    {"class": "link", data: 'driver'},
                    {"class": "link", data: 'destination'},
                    {"class": "link", data: 'location'},
                    {"class": "link", data: 'time_elapsed'},
                    {"class": "link", data: 'remark'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });

        function openServiceDone(breakdown_id) {
            breakDownDetails(breakdown_id);
            jQuery('#createNewVehicleService').appendTo("body").modal('toggle');
        }
        function breakDownDetails(breakdown_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('breakdown.details')}}",
                data: {breakdown_id: breakdown_id},
                success: function (data) {
                    jQuery('#service_details').empty().append(data);
                }
            })
        }
    </script>

    <script>
        jQuery('.removeCostRow').on('click', function () {
            jQuery(this).parent().parent().remove();
            var sum = 0;
            jQuery('.onRoute_amount').each(function () {
                if (this.value != '') {
                    sum += parseFloat(this.value.replace(',', '').replace(',', '').replace(',', '').replace(',', ''));
                }
            });
        });
        jQuery('#add_on_route_cost').on('click', function () {
            var addRow = jQuery('#addedRowCost').html();
            jQuery('#onRouteCost').prepend(addRow);

            jQuery('.removeCostRow').on('click', function () {
                jQuery(this).parent().parent().remove();
                var sum = 0;
                jQuery('.onRoute_amount').each(function () {
                    if (this.value != '') {
                        sum += parseFloat(this.value.replace(',', '').replace(',', '').replace(',', '').replace(',', ''));
                    }
                });
            });
        });

        function createVehicleService(vehicle_id, service_id) {
            jQuery("#createNewVehicleServiceSchedule").appendTo("body").modal('show');

            jQuery.ajax({
                url: "{{route('vehicle.schedule.service.create')}}",
                type: 'GET',
                data: {
                    'vehicle_id': vehicle_id,
                    'service_id': service_id
                },
                beforeSend: function () {
                },
                success: function (response) {
                    jQuery('#scheduleService').empty().html(response);
                    jQuery(".datepicker").datepicker();
                },
            });
        }

    </script>
@stop