@extends('layouts.main')
@section('title', __('form.dashboard'))
@section('content')
 {{-- {{ dd($member_list) }} --}}
    <style>
        div.dataTables_filter input {
            margin-left: 0 !important;

        }

        /*td div{
            display: none !important;
        }*/
        .hide {
            display: none;
        }

        table.dataTable {

            margin-top: 0 !important;
            border-top: 0 !important;
        }

        .dataTables_info {
            font-size: 13px;
        }
    </style>

    <div>

        @if (auth()->user()->is_administrator)
            <div class="main-content" style="margin-bottom: 10px !important;">
                @include('dashboard_stat')
            </div>
        @endif

        <div class="row">


            <div class="col-md-8">
                <div class="main-content">
                    <h5> @lang('form.my_tasks')</h5>
                    <hr>
                    <table class="table table-striped table-bordered" cellspacing="0" width="100%" id="data">
                        <thead>
                            <tr>
                                <th>@lang('form.task_#')</th>
                                <th>@lang('form.name')</th>
                                <th>@lang('form.status')</th>
                                <th style="display: none;">@lang('form.start_date')</th>
                                <th style="display: none;">@lang('form.due_date')</th>
                                <th style="display: none;">@lang('form.assigned_to')</th>
                                <th style="display: none;">@lang('form.tags')</th>
                                <th>@lang('form.priority')</th>
                                <th style="display: none;">@lang('form.created_by')</th>
                                <th>@lang('form.action')</th>
                            </tr>
                        </thead>
                    </table>

                   

                </div>
                <hr>

         
                 <div class="">
                    @include('task_suggestions')
                </div>
            </div>
           
            <div class="col-md-4">

                <div class="main-content">
                    @include('todo')
                </div>

                <div class="main-content border rounded p-3 shadow-sm d-flex justify-content-between align-items-center">
                    @include('monthly_task')
                </div>


                <div class="main-content border rounded p-3 shadow-sm d-flex justify-content-between align-items-center">
                    @include('current_month_hours')
                </div>


                <div class="main-content border rounded p-3 shadow-sm d-flex justify-content-between align-items-center">
                    @include('user_contribute')
                </div>



            </div>

        </div>


    </div>
 <div id="timeSheetModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">@lang('form.timesheet')</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="timeSheetModalForm" action="" method="POST">
                        @csrf
                        {{-- This hidden ID is for editing. It will be empty for new entries. --}}
                        <input type="hidden" name="id" value="">
                        
                        {{-- This hidden task_id will be filled by JavaScript --}}
                        <input type="hidden" name="task_id" id="modal_task_id" value="">

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>@lang('form.start_time') <span class="required">*</span></label>
                                <input type="text" class="form-control form-control-sm dateTimePicker" name="start_time">
                                <div class="invalid-feedback d-block start_time"></div>
                            </div>
                            <div class="form-group col-md-6">
                                <label>@lang('form.end_time') <span class="required">*</span></label>
                                <input type="text" class="form-control form-control-sm dateTimePicker" name="end_time">
                                <div class="invalid-feedback d-block end_time"></div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>@lang('form.member') <span class="required">*</span></label>
                                {{-- This dropdown will be populated by JavaScript --}}
                                <select name="user_id" id="modal_user_id" class="form-control form-control-sm selectPickerWithoutSearch">
  @foreach($member_list as $id => $name)
            <option value="{{ $id }}">{{ $name }}</option>
        @endforeach
</select>
    </select>
                                <div class="invalid-feedback d-block user_id"></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>@lang('form.note')</label>
                            <textarea class="form-control form-control-sm" rows="2" name="note"></textarea>
                            <div class="invalid-feedback d-block note"></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('form.close')</button>
                    <button type="button" class="btn btn-primary" id="submitForm">@lang('form.submit')</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('onPageJs')
    <script>
        $(function() {

            dataTable = "";

            dataTable = $('#data').DataTable({
                dom: 'Bfrtip',
                // "bInfo" : false,
                "bLengthChange": false,
                "lengthMenu": [
                    [5, 50, 100, 200],
                    ['5 rows', '50 rows', '100 rows', '200 rows']
                ],
                //"lengthMenu": [[15, 25, 50, 75, 100, -1], [15, 25, 50, 75, 100, "All"]],
                buttons: [{
                    init: function(api, node, config) {
                        $(node).removeClass('btn-secondary')
                    },
                    className: "btn-light btn-sm",
                    extend: 'collection',
                    text: 'Row Filter',
                    buttons: [
                        'pageLength'
                    ]
                }],
                "language": {
                    "lengthMenu": '_MENU_ ',
                    "search": '',
                    "searchPlaceholder": "{{ __('form.search') }}",
                    "infoFiltered": ""
                },
                // "oLanguage": { "sSearch": "" } ,
                // "dom": '<"float-md-left"f><"float-md-right"l>tip',
                searching: true,
                responsive: true,
                processing: true,
                serverSide: true,
                //iDisplayLength: 5
                pageLength: 5,
                ordering: false,
                "columnDefs": [{
                        "visible": false,
                        "targets": [3, 4, 5, 6, 8]
                    },
                    {
                        className: "text-left",
                        "targets": [2]
                    },
                    { "orderable": false, "searchable": false, "targets": 9 }
                ],
                "ajax": {
                    "url": '{!! route('datatables_tasks') !!}',
                    "type": "POST",
                    'headers': {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    "data": function(d) {

                        d.assigned_to = "{{ auth()->user()->id }}";

                    }
                }
            }).
            on('mouseover', 'tr', function() {
                jQuery(this).find('div.row-options').show();
            }).
            on('mouseout', 'tr', function() {
                jQuery(this).find('div.row-options').hide();
            });

            $('.dataTables_filter input').attr("placeholder", "Search Here");
$('#data tbody').on('click', '.fill-timesheet-btn', function() {
            const button = $(this);
            const taskId = button.data('task-id');
            const assignedToId = button.data('assigned-to-id');
            const assignedToName = String(button.data('assigned-to-name')).trim();
            
            
            $('#modal_task_id').val(taskId);
            $('#modal_user_id').val(assignedToId).trigger('change');
            
            const modalUserIdSelect = $('#modal_user_id');
            // modalUserIdSelect.empty();
            
            if (assignedToId && assignedToName) {
                const newOption = new Option(assignedToName, assignedToId, true, true);
                modalUserIdSelect.append(newOption).trigger('change');
            }
        });

        // 3. MODAL INITIALIZATION (for Date Pickers & Select2 from your reference)
        var modalWindow = $('#timeSheetModal');
        modalWindow.on('shown.bs.modal', function () {
            $('.selectPickerWithoutSearch').select2({ theme: "bootstrap", minimumResultsForSearch: -1 });
            $('.dateTimePicker').daterangepicker({
                parentEl: "#timeSheetModal",
                singleDatePicker: true,
                timePicker: true,
                locale: { format: 'DD-MM-YYYY hh:mm A' }
            });
        });

        // Clean up modal on close
        modalWindow.on('hidden.bs.modal', function () {
            $('#timeSheetModalForm')[0].reset();
            $('#timeSheetModalForm input[name=id]').val('');
            $('.invalid-feedback').html("");
        });

        // 4. FORM SUBMISSION LOGIC (from your reference)
        $('#submitForm').click(function (e) {
            e.preventDefault();
            
            var id = $('input[name=id]').val();
            // The URL will be for adding a new entry since 'id' will be empty
            var url = (id) ? "{{ route('update_time_sheet') }}" : "{{ route('add_time_sheet') }}";

            $.post(url, $('#timeSheetModalForm').serialize())
                .done(function (response) {
                    if (response.status == 2) { // Validation Error
                        $('.invalid-feedback').html('');
                        $.each(response.errors, function (index, value) {
                            $('.' + index).html(value.join()).show();
                        });
                    } else { // Success
                        modalWindow.modal('hide');
                        // Optionally, you can redraw the tasks table if logging time affects it
                        // dataTable.draw(); 
                    }
                });
        });