@extends('layouts.admin')

@section('main-content')

<div class="card shadow">
    <h1 class="card-header h3 mb-4 text-gray-800">
        Munkafolyamatok
    </h1>
    <div class="card-body">
        <div class="row input-daterange col-md-4 position-absolute" style="top: 146px; margin-left: 200px; z-index: 1000;">
            <div><form method="GET">
                <label>Dátum:
                    <input type="date" onchange="this.form.submit();" value="{{ app('request')->input('date') ?? Carbon\Carbon::now()->format('Y-m-d') }}" name="date" id="date" class="form-control form-control-sm d-inline-block w-auto" placeholder="Dátum" />
                </label></form>
            </div>
        </div>
        <table class="table table-bordered table-striped" id="tasks-table">
            <thead>
                <tr>
                    <th></th>
                    <th>Helyszín</th>
                    <th>Kezdet</th>
                    <th>Vég</th>
                    <th>Munkafolymat</th>
                    <th>Művelet</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>

function save(id) {
    const date = $('input[name="date"]').val();
    const task = $('input[name="task_'+id+'"]').val();
    const start = $('input[name="start_'+id+'"]').val();
    const end = $('input[name="end_'+id+'"]').val();
    const attendance = $('select[name="attendance_'+id+'"]').val();
    const company = $('select[name="company_'+id+'"]').val();
    const note = $('input[name="note_'+id+'"]').val();    
    const timesheet_id = $('input[name="timesheet_id_'+id+'"]').val();    

    $.ajax( {
            url: "{{ route('timesheet.store') }}",
            type: "post",
            data: {
                worker_id: id,
                task_id: task,
                workday: date,
                start_of_working: start,
                end_of_working: end,
                attendance: attendance,
                company_id: company,
                note: note,
                timesheet_id: timesheet_id,
            },
            dataType: 'json',
            success: function ( json ) {
                console.log(json);
            },
            error: function (xhr, status, error) {
                var errorMessage = JSON.parse(xhr.responseText).error;
                if(status == 'error')
                    alert(errorMessage);
            }
    } );

    $('#btn_'+id).removeClass (function (index, className) {
        return (className.match (/(^|\s)btn-\S+/g) || []).join(' ');
    });

    $('#btn_'+id).addClass ('btn-success');
}

function btnColor(id) {
    $('#btn_'+id).removeClass (function (index, className) {
        return (className.match (/(^|\s)btn-\S+/g) || []).join(' ');
    });

    $('#btn_'+id).addClass ('btn-primary');
}


$(function() {

    // excel export all row | serverSide: true
    var oldExportAction = function (self, e, dt, button, config) {
        if (button[0].className.indexOf('buttons-excel') >= 0) {
                if ($.fn.dataTable.ext.buttons.excelHtml5.available(dt, config)) {
                    $.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config);
                }
                else {
                    $.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config);
                }
        } else if (button[0].className.indexOf('buttons-print') >= 0) {
                $.fn.dataTable.ext.buttons.print.action(e, dt, button, config);
        }
    };

    var newExportAction = function (e, dt, button, config) {
        var self = this;
        var oldStart = dt.settings()[0]._iDisplayStart;

        dt.one('preXhr', function (e, s, data) {
            // Just this once, load all data from the server...
            data.start = 0;
            data.length = 2147483647;

            dt.one('preDraw', function (e, settings) {
                // Call the original action function
                oldExportAction(self, e, dt, button, config);

                dt.one('preXhr', function (e, s, data) {
                    // DataTables thinks the first item displayed is index 0, but we're not drawing that.
                    // Set the property to what it was before exporting.
                    settings._iDisplayStart = oldStart;
                    data.start = oldStart;
                });

                // Reload the grid with the original page. Otherwise, API functions like table.cell(this) don't work properly.
                setTimeout(dt.ajax.reload, 0);

                // Prevent rendering of the full data to the DOM
                return false;
            });
        });

        // Requery the server with the new one-time export settings
        dt.ajax.reload();
    };

    $("#tasks-table").append(
       $('<tfoot/>').append( $("#tasks-table thead tr").clone() )
    );

    $('#tasks-table tfoot th').each( function (i) {
        if(i === 0 || i === 5) return;
        var title = $(this).text();
        $(this).html( '<input type="text" class="form-control form-control-sm" placeholder="'+title+'" />' );
    } );

    window.tasksTable = $('#tasks-table').DataTable({
        processing: true,
        serverSide: false, // false for search
        responsive: true,
        fixedHeader : {
            header : true,
            footer : false,
            headerOffset: 45
        },

        ajax: {
            url: "{{ url()->current() }}",
        },
        columns: [
            {
                className:      'details-control',
                orderable:      false,
                data:           null,
                defaultContent: '<i class="fas fa-solid fa-plus"></i>'
            },
            { data: 'place', name: 'place' },
            { data: 'start_date', name: 'task.start_date' },
            { data: 'end_date', name: 'task.end_date' },
            { data: 'name', name: 'task.name' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false },
        ],
        pageLength: 25,
        //pagingType: 'full',
        filter: true,
        search: {
            "smart": true,
            "caseInsensitive": true
        },
        order: [[2, 'asc']],
        lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
        dom: "<'mb-2'B><'row'<'col-sm-6'l><'col-sm-6'f>>rtip",
        buttons: [
            {
                filename: 'tasks',
                text: 'Excel',
                extend: 'excel',
                //action: newExportAction
            },
            {
                extend: 'colvis',
                text: 'Láthatóság'
            }
        ],
        createdRow: function( row, data, dataIndex){
            /*
            if( data['status_name'] !=  'Lezárva') {
                $(row).addClass(data['SLA_name']+'_color');
            }
            else {
                $(row).addClass('closed_color');
            }
            */
        },
        initComplete: function () {
            this.api().columns().every(function () {
                var column = this;
//                var input = document.createElement("input");
//                input.className = 'form-control form-control-sm';
//                input.placeholder = 'text';
//                $(input).appendTo($(column.footer()).empty())
                $('input', this.footer())
//                .on('keyup change clear', function () {
                .on('change', function () {
                    if ( column.search() !== this.value ) {
                        column.search( this.value ).draw();
                    }
                });
            });
        },
        drawCallback: function( settings )
        {
            $('#tasks-table button').off('click').on('click', function(){
                var action = $(this).data('action');
                var id     = $(this).data('id');
                var row    = tasksTable.row( $(this).parents('tr') );

                if( action == 'edit' )
                {
                    var url = "{{ route('task.edit', ':slug') }}";
                    url = url.replace(':slug', id);
                    rowEdit( url, 'Munka adatainak módosítása', 'Mentés', row, 'Sikertelen módosítás!');
                }

                if( action == 'delete' )
                {
                    var url = "{{ route('task.destroy', ':slug') }}"; url = url.replace(':slug', id);
                    rowDelete( url, 'Munka törlése', 'Törlés', row, 'Sikertelen törlés!' );
                }

                if( action == 'add_worker' )
                {
                    var url = "{{ route('team.edit', ':slug') }}"; url = url.replace(':slug', id);
                    rowEdit( url, 'Dolgozó felvétele', 'Mentés', row, 'Sikertelen módosítás!' );
                }

            });
        }
    });

    function format ( rowData ) {
        var div = $('<div/>')
            .addClass( 'loading' )
            .html( '<span>Loading...</span>' );
    
        $.ajax( {
            url: "{{ route('team') }}",
            data: {
                id: rowData.id,
                date: $('input[name="date"]').val()
            },
            dataType: 'json',
            success: function ( json ) {
                console.log(json);
                div
                    .html( json )
                    .removeClass( 'loading' );
            }
        } );
    
        return div;
    }

    $('#tasks-table tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = tasksTable.row( tr );
    
        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    });
});
</script>
@endpush