@extends('layouts/acc_layout')
@section('title', '| Daily Task')
@section('content')
    @include('successMsg')
    <div class="row">
        <div class="col-md-12">
            <div class="" style="">
                <div class="">
                    <div class="panel panel-default" style="background-color:#708090;">
                        <div class="panel-heading" style="padding-bottom:0px">
                            <div class="panel-options">
                                <a href="{{ url('dailyTask/addDailyTask') }}" class="btn btn-info pull-right addViewBtn">
                                    <i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Daily Task</a>
                            </div>
                            <h1 align="center" style="font-family: Antiqua;letter-spacing: 2px">
                                <font color="white"> Daily Task</font>
                            </h1>
                        </div>
                        <div class="panel-body panelBodyView">
                            <div class="row">
                                <div class="row" style=" margin: 15px 0px;">
                                    <div>
                                        <table class="table table-stripe" style="width:100%;">
                                            <thead>
                                                <tr>

                                                    <th width="45">SL#</th>
                                                    <th>Task</th>
                                                    <th>Branch</th>
                                                    <th>Department</th>
                                                    <th>Assign Employee</th>
                                                    <th>Task Type</th>
                                                    <th>Duration</th>
                                                    <th>Action</th>


                                                </tr>
                                                {{ csrf_field() }}
                                            </thead>
                                            <tbody>

                                                                                                @foreach ($dailyTasks as $dailyTask)
                                                    <tr>
                                                        <td class="text-center slNo">{{ ++$no }}</td>

                                                        <td style="text-align: left; padding-left: 5px;">
                                                            {{ $dailyTask->task_name }}
                                                        </td>
                                                        <td style="text-align: left; padding-left: 5px;">
                                                            {{ $dailyTask->branch_name }}
                                                        </td>
                                                        <td style="text-align: left; padding-left: 5px;">
                                                            {{ $dailyTask->department_name }}
                                                        </td>
                                                        <td style="text-align: left; padding-left: 5px;">
                                                            {{ $dailyTask->employee_name }}
                                                        </td>

                                                        <td style="text-align: left; padding-left: 5px;">

                                                            @if ($dailyTask->task_type == 1)
                                                                {{ 'Fixed' }}
                                                            @else
                                                                {{ 'One Time' }}
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if ($dailyTask->fixed_type == 1)
                                                                {{ 'Daily' }}
                                                            @elseif ($dailyTask->fixed_type == 2)
                                                                {{ $dailyTask->start }}-{{ $dailyTask->end }} Date
                                                            @elseif($dailyTask->fixed_type == 3)
                                                                {{ \Carbon\Carbon::create()->month($dailyTask->start)->format('F') }}
                                                                -
                                                                {{ \Carbon\Carbon::create()->month($dailyTask->end)->format('F') }}
                                                            @elseif($dailyTask->fixed_type == 4)
                                                                {{ 'Specific Dates (' . implode(',', json_decode($dailyTask->specificDates, true)) . ')' }}
                                                            @elseif($dailyTask->task_type == 2)
                                                                {{ \Carbon\Carbon::parse($dailyTask->start_date)->format('d-m-Y') }}
                                                                -
                                                                {{ \Carbon\Carbon::parse($dailyTask->end_date)->format('d-m-Y') }}
                                                            @endif
                                                        </td>
                                                        <td class="text-center" width="80">

                                                            <a id="editIcone" taskId="{{ $dailyTask->id }}"
                                                                class="edit-modal"
                                                                style="cursor: pointer; padding-right: 5px;">
                                                                <span class="glyphicon glyphicon-edit"></span>
                                                            </a>

                                                            <a href="javascript:;" class="delete-modal"
                                                                taskId="{{ $dailyTask->id }}" style="cursor: pointer;">
                                                                <span class="glyphicon glyphicon-trash"></span>
                                                            </a>


                                                        </td>

                                                    </tr>
                                                @endforeach

                                            </tbody>
                                        </table>

                                        {{ $dailyTasks->appends(request()->input())->links() }}


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="editModal" class="modal fade" style="margin-top:2%;">
        <div class="modal-header">
            <h4 class="modal-title">Update Task</h4>
        </div>
        <div class="modal-body" style="padding:30px;margin-left:160px">
            <div class="col-md-10 fullbody">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-title" style="margin-top:30px">Update Task</div>
                    </div>

                    {!! Form::open(['url' => '#', 'files' => 'true', 'id' => 'updateForm']) !!}

                    <!-- Hidden input to store the ID -->

                    {{-- <input id="id" type="hidden" name="id" value="" /> --}}
                    <input type="hidden" id="EMtaskId" name="id">

                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {!! Form::label('taskName', 'Task Name:', ['class' => 'col-sm-2 control-label']) !!}
                                    <div class="col-sm-5">
                                        {!! Form::text('task_name', null, [
                                            'class' => 'form-control',
                                            'id' => 'taskName',
                                            'type' => 'text',
                                            'autocomplete' => 'off',
                                        ]) !!}
                                        <p id='taskName' style="max-height:3px;"></p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group" style="margin-top: 10px;">
                                    {!! Form::label('branch_id', 'Branch:', ['class' => 'col-sm-2 control-label']) !!}
                                    <div class="col-sm-5">
                                        {!! Form::select('branch_id', ['' => 'Select'] + $branchList, null, [
                                            'class' => 'form-control',
                                            'id' => 'branch_id',
                                        ]) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group" style="margin-top: 10px;">
                                    {!! Form::label('department', 'Department:', ['class' => 'col-sm-2 control-label']) !!}
                                    <div class="col-sm-5">
                                        {!! Form::select('department_id', ['' => 'Select'], null, [
                                            'class' => 'form-control',
                                            'id' => 'department_id',
                                        ]) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group" style="margin-top: 10px;">
                                    {!! Form::label('employee', 'Employee:', ['class' => 'col-sm-2 control-label']) !!}
                                    <div class="col-sm-5">
                                        {!! Form::select('employee', ['' => 'Select'], null, [
                                            'class' => 'form-control',
                                            'id' => 'employee',
                                        ]) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group" style="margin-top: 10px;">
                                    {!! Form::label('module', 'Module:', ['class' => 'col-sm-2 control-label']) !!}
                                    <div class="col-sm-5">
                                        {!! Form::select('module_id', ['' => 'Select'] + $module, null, [
                                            'class' => 'form-control',
                                            'id' => 'module_id',
                                        ]) !!}
                                        <p id="module_id" style="max-height:3px;"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    {!! Form::label('taskType', 'Task Type:', ['class' => 'col-sm-2 control-label']) !!}
                                    <div class="col-sm-4" style="margin-top: 6px;">
                                        <label>
                                            <input type="radio" class="taskType" id="fixed" name="task_type"
                                                value="1"> Fixed
                                        </label>
                                        <label>
                                            <input type="radio" class="taskType" id="extra" name="task_type"
                                                value="2"> One Time
                                        </label>
                                        <p id="taskTypee" style="max-height:3px;"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12" id="fixedTypeContainer" style="display: none;">
                                <div class="form-group">
                                    {!! Form::label('fixedType', 'Fixed Type:', ['class' => 'col-sm-2 control-label']) !!}
                                    <div class="col-sm-8" style="margin-top: 6px;">
                                        <label>
                                            <input type="radio" class="fixedType" id="daily" name="fixedType"
                                                value="1"> Daily
                                        </label>
                                        <label>
                                            <input type="radio" class="fixedType" id="dateWise" name="fixedType"
                                                value="2"> Date Wise(range)
                                        </label>
                                        <label>
                                            <input type="radio" class="fixedType" id="monthWise" name="fixedType"
                                                value="3"> Month Wise(range)
                                        </label>

                                        <label>
                                            <input type="radio" class="fixedType" id="specificWise" name="fixedType"
                                                value="4"> Specific Dates
                                        </label>
                                        <p id="taskTypee" style="max-height:3px;"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6" id="startDayPickerContainer" style="display: none;">
                                <div class="form-group">
                                    {!! Form::label('startDay', 'Start Day:', ['class' => 'col-sm-4 control-label']) !!}
                                    <div class="col-sm-8">
                                        {!! Form::select('startDay', ['' => 'Select Day'] + array_combine(range(1, 31), range(1, 31)), null, [
                                            'class' => 'form-control',
                                            'id' => 'startDayPicker',
                                        ]) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6" id="endDayPickerContainer" style="display: none;">
                                <div class="form-group">
                                    {!! Form::label('endDay', 'End Day:', ['class' => 'col-sm-4 control-label']) !!}
                                    <div class="col-sm-8">
                                        {!! Form::select('endDay', ['' => 'Select Day'] + array_combine(range(1, 31), range(1, 31)), null, [
                                            'class' => 'form-control',
                                            'id' => 'endDayPicker',
                                        ]) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6" id="startmonthPickerContainer" style="display: none;">
                                <div class="form-group">
                                    {!! Form::label('start', 'Start Month:', ['class' => 'col-sm-4 control-label']) !!}
                                    <div class="col-sm-8">
                                        {!! Form::select(
                                            'start',
                                            ['' => 'Select Month'] + [
                                                '1' => 'January',
                                                '2' => 'February',
                                                '3' => 'March',
                                                '4' => 'April',
                                                '5' => 'May',
                                                '6' => 'June',
                                                '7' => 'July',
                                                '8' => 'August',
                                                '9' => 'September',
                                                '10' => 'October',
                                                '11' => 'November',
                                                '12' => 'December',
                                            ],
                                            null,
                                            ['class' => 'form-control', 'id' => 'startmonthPicker'],
                                        ) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6" id="endmonthPickerContainer" style="display: none;">
                                <div class="form-group">
                                    {!! Form::label('end', 'End Month:', ['class' => 'col-sm-4 control-label']) !!}
                                    <div class="col-sm-8">
                                        {!! Form::select(
                                            'end',
                                            ['' => 'Select Month'] + [
                                                '1' => 'January',
                                                '2' => 'February',
                                                '3' => 'March',
                                                '4' => 'April',
                                                '5' => 'May',
                                                '6' => 'June',
                                                '7' => 'July',
                                                '8' => 'August',
                                                '9' => 'September',
                                                '10' => 'October',
                                                '11' => 'November',
                                                '12' => 'December',
                                            ],
                                            null,
                                            ['class' => 'form-control', 'id' => 'endmonthPicker'],
                                        ) !!}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6" id="specificDayPickerContainer" style="display: none;">
                                <div class="form-group">
                                    {!! Form::label('specificDates', 'Dates:', ['class' => 'col-sm-4 control-label']) !!}
                                    <div class="col-sm-8">
                                        {!! Form::select('specificDates[]', array_combine(range(1, 31), range(1, 31)), null, [
                                            'class' => 'form-control',
                                            'id' => 'specificDayPicker',
                                            'multiple' => 'multiple',
                                        ]) !!}
                                    </div>
                                </div>
                            </div>


                            <div class="col-md-6" id="startDateContainer" style="display: none;">

                                <div class="form-group">
                                    {!! Form::label('start_date', 'Start Date:', ['class' => 'col-sm-4 control-label']) !!}
                                    <div class="col-sm-8">
                                        {!! Form::text('start_date', null, [
                                            'class' => 'form-control',
                                            'id' => 'startDatePicker',
                                            'autocomplete' => 'off',
                                        ]) !!}
                                        <p id="startDateError" style="max-height: 3px;"></p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6" id="endDateContainer" style="display: none;">
                                <div class="form-group">
                                    {!! Form::label('end_date', 'End Date:', ['class' => 'col-sm-4 control-label']) !!}
                                    <div class="col-sm-8">
                                        {!! Form::text('end_date', null, [
                                            'class' => 'form-control',
                                            'id' => 'endDatePicker',
                                            'autocomplete' => 'off',
                                        ]) !!}
                                        <p id="endDateError" style="max-height: 3px;"></p>
                                    </div>
                                </div>
                            </div>
                        </div><br>

                    </div>

                    <div class="modal-footer d-flex justify-content-between">
                        {{-- <input id="EMreconcileId" type="hidden" name="reconcileId" value=""> --}}

                        <!-- Update Button -->
                        <button type="button" id="updateButton" class="btn btn-success">
                            <span class="glyphicon glyphicon-edit" style="padding-right:4px;"></span>Update
                        </button>

                        <!-- Close Button -->
                        <button type="button" style="margin-bottom:10px" class="btn btn-danger" data-dismiss="modal">
                            <span class="glyphicon glyphicon-remove" style="padding-right:4px;"></span>Close
                        </button>
                    </div>

                    {!! Form::close() !!}

                </div>
            </div>
        </div>
    </div>

    <div id="deleteModal" class="modal fade" style="margin-top:3%;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"
                        style="clear:both;background-color:black;color:white; padding:10px;text-align:center;">
                        Delete Task</h4>
                </div>
                <div class="modal-body ">
                    {{-- <div class="row" style="padding-bottom:20px;"> </div> --}}
                    <h2 style="color: red;">Are You Confirm to Delete This Record?</h2>
                    <div class="modal-footer">
                        <input id="DMtaskId" type="hidden" value="" />
                        <button type="button" class="btn btn-danger" id="DMtask"
                            data-dismiss="modal">confirm</button>
                        <button type="button" class="btn btn-warning" data-dismiss="modal"><span
                                class="glyphicon glyphicon-remove" style="padding-right:4px;"></span>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {

        $(document).on('click', '.edit-modal', function() {
            let taskId = $(this).attr('taskId');
            let csrf = "{{ csrf_token() }}";
            $("#EMtaskId").val(taskId);

            $.ajax({
                url: './editTask',
                type: 'POST',
                dataType: 'json',
                data: {
                    id: taskId,
                    _token: csrf
                },
                success: function(data) {
                    let taskData = data.editDailyTask;

                    console.log("specificDates Data:", taskData.specificDates); // Debugging

                    $('#taskName').val(taskData.task_name);
                    $('#branch_id').val(taskData.branchIdFk);
                    $('#module_id').val(taskData.module_id);
                    $('#startDayPicker, #startmonthPicker').val(taskData.start);
                    $('#endDayPicker, #endmonthPicker').val(taskData.end);

                    // Initialize Select2 before setting values
                    $('#specificDayPicker').select2({
                        placeholder: "Select Dates",
                        allowClear: true,
                        closeOnSelect: false
                    });
                    // Assuming taskData.specificDates is a string like "1,10,15" or an array like ["1", "10", "15"]
                    let specificDatesArray = taskData.specificDates ? taskData.specificDates
                        .split(',') : [];

                    // Set the value to the select element and trigger a change event for select2
                    $('#specificDayPicker').val(specificDatesArray).trigger('change');


                    $('#startDatePicker').val(taskData.start_date);
                    $('#endDatePicker').val(taskData.end_date);

                    // Set checked radio buttons
                    $('input[name="task_type"][value="' + taskData.task_type + '"]').prop(
                        'checked', true).change();
                    $('input[name="fixedType"][value="' + taskData.fixed_type + '"]').prop(
                        'checked', true).change();

                    // Fetch departments and employees, then set selected values
                    fetchDepartments(taskData.branchIdFk).then(() => {
                        $('#department_id').val(taskData.department_id);
                        return fetchEmployees(taskData.department_id, taskData
                            .branchIdFk);
                    }).then(() => {
                        $('#employee').val(taskData.emp_id_fk);
                    });

                    // Show the modal
                    $('#editModal').modal('show');
                }
            });
        });

        // Function to fetch departments
        function fetchDepartments(branchId) {
            return new Promise((resolve) => {
                let departmentDropdown = $('#department_id').empty().append(
                    '<option value="">Select</option>');
                let employeeDropdown = $('#employee').empty().append(
                    '<option value="">Select</option>'); // Clear employees

                if (!branchId) return resolve(); // If no branch, exit

                $.ajax({
                    url: '{{ route('getDepartmentsByBranch') }}',
                    type: 'GET',
                    data: {
                        branch_id: branchId
                    },
                    dataType: 'json',
                    success: function(data) {
                        $.each(data, function(key, value) {
                            departmentDropdown.append(
                                `<option value="${key}">${value}</option>`);
                        });
                        resolve();
                    }
                });
            });
        }

        // Function to fetch employees
        function fetchEmployees(departmentId, branchId) {
            return new Promise((resolve) => {
                let employeeDropdown = $('#employee').empty().append(
                    '<option value="">Select</option>'); // Clear employees

                if (!departmentId) return resolve(); // If no department, exit

                $.ajax({
                    url: '{{ route('getEmployeesByDepartment') }}',
                    type: 'GET',
                    data: {
                        department_id: departmentId,
                        branch_id: branchId
                    },
                    dataType: 'json',
                    success: function(data) {
                        $.each(data, function(key, value) {
                            employeeDropdown.append(
                                `<option value="${key}">${value}</option>`);
                        });
                        resolve();
                    }
                });
            });
        }

        // Event listener for branch selection change
        $('#branch_id').change(function() {
            let branchId = $(this).val();
            fetchDepartments(branchId);
        });

        // Event listener for department selection change
        $('#department_id').change(function() {
            let departmentId = $(this).val();
            let branchId = $('#branch_id').val();
            fetchEmployees(departmentId, branchId);
        });
        $('#startDatePicker, #endDatePicker').datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true
        });

        // Handle task type change
        $('input[name="task_type"]').change(function() {
            if ($(this).val() === '2') { // Extra task
                $('#startDateContainer, #endDateContainer').show();
                $('#fixedTypeContainer,#specificDayPickerContainer, #startDayPickerContainer, #endDayPickerContainer, #startmonthPickerContainer, #endmonthPickerContainer')
                    .hide();

            } else if ($(this).val() === '1') { // Fixed task
                $('#fixedTypeContainer').show();
                $('#startDateContainer, #endDateContainer')
                    .hide()
                    .find('input').val(''); // Clear date fields
            }
        });


        // Handle fixed type change
        $('input[name="fixedType"]').change(function() {
            if ($(this).val() === '1') { // Daily
                $('#startDayPickerContainer, #endDayPickerContainer').hide().find('select').val('');
                $('#startmonthPickerContainer, #endmonthPickerContainer').hide().find('select').val('');
                $('#specificDayPickerContainer').hide().find('select').val('');
            } else if ($(this).val() === '2') { // Date-wise
                $('#startDayPickerContainer, #endDayPickerContainer').show();
                $('#startmonthPickerContainer, #endmonthPickerContainer').hide().find('select').val('');
                $('#specificDayPickerContainer').hide().find('select').val('');
            } else if ($(this).val() === '3') { // Month-wise
                $('#startmonthPickerContainer, #endmonthPickerContainer').show();
                $('#startDayPickerContainer, #endDayPickerContainer').hide().find('select').val('');
                $('#specificDayPickerContainer').hide().find('select').val('');
            } else if ($(this).val() === '4') { // specific-wise
                $('#specificDayPickerContainer').show();

                $('#startmonthPickerContainer, #endmonthPickerContainer').hide().find('select').val('');
                $('#startDayPickerContainer, #endDayPickerContainer').hide().find('select').val('');

            }
        });


        $("#updateButton").on('click', function() {
            // $("#updateButton").prop("disabled", true);
            var taskId = $("#EMtaskId").val(); // Fetch from hidden input


            $.ajax({
                url: "{{ route('updateTask') }}",
                type: 'POST',
                data: $('#updateForm').serialize(),
                dataType: 'json',


                success: function(response) {
                    if (response.errors) {
                        $.each(response.errors, function(name, error) {
                            let field = $('[name="' + name +
                                '"]'); // Select input field by name
                            field.after("<p class='error text-danger'>* " + error[
                                0] + "</p>");
                        });
                    } else {
                        if (response.responseTitle == 'Warning!') {
                            toastr.warning(response.responseText, response.responseTitle,
                                opts);
                            // $("#submit").prop('disabled', false);
                        } else {
                            toastr.success(response.responseText, response.responseTitle,
                                opts);
                            setTimeout(function() {


                                window.location.href =
                                    "{{ url('dailyTask/viewDailyTask/') }}";
                            }, 1000);


                        }
                    }
                },
                error: function(xhr) {
                    handleError(xhr);
                },
                complete: function() {

                }
            });

        });
        $(document).on('click', '.delete-modal', function() {
            $("#DMtaskId").val($(this).attr('taskId'));
            $('#deleteModal').modal('show');
        });
        $("#DMtask").on('click', function() {
            var taskId = $("#DMtaskId").val();
            var csrf = "{{ csrf_token() }}";
            $.ajax({
                    url: './deleteTask',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        id: taskId,
                        _token: csrf
                    },
                })
                .done(function(data) {
                    // location.reload();

                    setTimeout(function() {
                        window.location.reload();
                    }, 1500);

                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                });
        });
    });
</script>