@extends('layouts/acc_layout')
@section('title', '| Daily Task')
@section('content')
    @include('successMsg')

    <div class="row add-data-form">
        <div class="col-md-12">
            <div class="col-md-3"></div>
            <div class="col-md-6 fullbody">
                <div class="viewTitle" style="border-bottom: 1px solid white;">
                    <a href="{{ url('dailyTask/viewDailyTask/') }}" class="btn btn-info pull-right addViewBtn"><i
                            class="glyphicon glyphicon-th-list viewIcon">
                        </i>View Daily Task</a>
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title">Daily Task</div>
                    </div>
                    {!! Form::open(['url' => '#', 'role' => 'form', 'class' => 'form-horizontal form-groups']) !!}
                    <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',
                                            'autocomplete' => 'off',
                                        ]) !!}
                                        <p id='taskNameError' style="max-height:3px;"></p>
                                    </div>

                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    {!! Form::label('branch', '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">
                                    {!! 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">
                                    {!! 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">
                                    {!! 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' => 'specifictDayPicker',
                                            '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 class="form-group">
                            {!! Form::label('submit', ' ', ['class' => 'col-sm-5 control-label']) !!}
                            <div class="col-sm-5">
                                {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-info submitButton']) !!}
                                <a href="{{ url('dailyTask/viewDailyTask') }}" class="btn btn-danger closeBtn">Close</a>
                                <span id="success" style="color:green; font-size:20px;" class="pull-right"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {!! Form::close() !!}
    </div>
    {{-- <div class="footerTitle" style="border-top:1px solid white"></div> --}}
    <div class="col-md-2"></div>

    <script type="text/javascript">
        $(document).ready(function() {
            /* Style selected options */
            $('#specifictDayPicker').select2({
                placeholder: "Select Dates",
                allowClear: true,
                closeOnSelect: false // Keep dropdown open for multi-select
            }).on('select2:select', function(e) {
                // Get the selected value
                var selectedValue = e.params.data.id;

                // Apply a random color for each selected value
                var colors = ["#ff9800", "#4caf50", "#2196f3", "#9c27b0", "#f44336"];
                var randomColor = colors[Math.floor(Math.random() * colors.length)];

                // Apply the color dynamically
                $('.select2-selection__choice').each(function() {
                    if ($(this).text().trim() == selectedValue) {
                        $(this).css({
                            "background-color": randomColor,
                            "border-color": randomColor,
                            "color": "#fff"
                        });
                    }
                });
            });

            // Fetch departments based on selected branch
            $('#branch_id').change(function() {
                var branchId = $(this).val();

                if (branchId) {
                    $.ajax({
                        url: '{{ route('getDepartmentsByBranch') }}',
                        type: 'GET',
                        data: {
                            branch_id: branchId
                        },
                        dataType: 'json',
                        success: function(data) {
                            $('#department_id').empty().append(
                                '<option value="">Select</option>');
                            $('#employee').empty().append(
                                '<option value="">Select</option>'); // Reset employees

                            $.each(data, function(key, value) {
                                $('#department_id').append('<option value="' + key +
                                    '">' + value + '</option>');
                            });
                        }
                    });
                } else {
                    $('#department_id').empty().append('<option value="">Select</option>');
                    $('#employee').empty().append('<option value="">Select</option>');
                }
            });

            // Fetch employees based on selected department
            $('#department_id').change(function() {
                var departmentId = $(this).val();
                var branchId = $('#branch_id').val();
                if (departmentId) {
                    $.ajax({
                        url: '{{ route('getEmployeesByDepartment') }}',
                        type: 'GET',
                        data: {
                            department_id: departmentId,
                            branch_id: branchId
                        },
                        dataType: 'json',
                        success: function(data) {
                            $('#employee').empty().append('<option value="">Select</option>');

                            $.each(data, function(key, value) {
                                $('#employee').append('<option value="' + key + '">' +
                                    value + '</option>');
                            });
                        }
                    });
                } else {
                    $('#employee').empty().append('<option value="">Select</option>');
                }
            });

            // Initialize the datepicker for both fields
            $('#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('');

                }
            });


            $('form').submit(function(event) {
                event.preventDefault();
                // alert();
                var form = $(this);
                var formData = new FormData(form[0]);
                let submitButton = form.find('button[type="submit"]');
                $.ajax({
                    type: 'post',
                    url: './storeDailyTask',
                    data: $('form').serialize(),
                    dataType: 'json',
                    processData: false,
                    headers: {
                        'X-CSRF-Token': "{{ csrf_token() }}",
                    },
                    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() {
                        submitButton.prop('disabled', false);
                    }







                });
            });
        });
    </script>
@endsection