@extends(getThemeBasePath())
@section('page_title')
    {{ $page_title }}
@endsection
<!--begin::Card-->
@section('content')
<form class="form" method="post" action="{{ $action }}" id="task_form" enctype="multipart/form-data">
    @if (!empty($data['id']))
        @method('PUT')
    @endif
    @csrf
    <input type="hidden" name="is_mobile" value="{{!empty($isMobile) && $isMobile == true?1:''}}" id="">
    <input type="hidden" name="token" value="{{$token??''}}" id="">
    <div class="card shadow-sm">
        <!--begin::Card header-->
        <div class="card-header card-header-tabs-line nav-tabs-line-3x">
            <!--begin::Toolbar-->
            <div class="card-toolbar">
                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                    <!--begin::Item-->
                    <li class="nav-item mr-3">
                        <a class="nav-link active" data-bs-toggle="tab" href="#kt_task_edit_tab_1">
                            <span class="nav-icon">
                                <i class="fa fa-tasks"></i>
                            </span>
                            <span class="nav-text font-size-lg">{{ $page_title }}</span>
                        </a>
                    </li>


                    @if (!empty($data['id']))
                        <li class="nav-item me-3">
                            <a class="nav-link {{ $activeTab == 'history' ? 'active' : '' }}" data-bs-toggle="tab"
                                href="#kt_task_edit_tab_2" aria-controls="kt_task_edit_tab_2">
                                <span class="nav-icon">
                                    <i class="fas fa-list"></i>
                                </span>
                                <span class="nav-text font-size-lg">History</span>
                            </a>
                        </li>
                    @endif
                </ul>
            </div>
            <!--end::Toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body">

            <div class="tab-content">


                <!--begin::Tab-->
                <div class="tab-pane show active" id="kt_task_edit_tab_1" role="tabpanel">
                    <h3 class="mt-5">Task Detail</h3>
                    <div class="separator separator-dotted border-primary my-2"></div>
                    <!--begin::Row-->
                    <div class="row">
                        @if (!empty($errors->all()))
                            <div class="content-column col-lg-12 col-md-12 col-sm-12">
                                @foreach ($errors->all() as $message)
                                    <div class="alert alert-danger">{{ $message }}</div>
                                @endforeach
                            </div>
                        @endif

                        <div class="col-xl-12">
                            <div class="row">
                                <div class="col-xl-4">
                                    <!--begin::Group-->
                                    <div class="form-group fv-row mb-7">
                                        <label
                                            class="col-form-label col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12 text-lg-right text-left">Summary
                                            <span class="text-danger">*</span></label>
                                        <div class="col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12">
                                            <input
                                                class="form-control form-control-lg form-control-solid date_datepicker required"
                                                id="summary" type="text" name="summary"
                                                value="{{ $data['summary'] ?? old('summary') }}" maxlength="255"
                                                autocomplete="off" />
                                        </div>
                                    </div>
                                    <!--end::Group-->
                                </div>

                                <div class="col-xl-4">
                                    <!--begin::Group-->
                                    <div class="form-group fv-row mb-7">
                                        <label
                                            class="col-form-label col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12 text-lg-right text-left">Assignee
                                            <span class="text-danger">*</span></label>
                                        <div class="col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12">
                                            <select
                                                class="form-control form-control-lg form-control-solid form-select kt_select2_11 customer_rate_calc_field required"
                                                data-control="select2" name="assignee_id" id="assignee_id">
                                                <option value="">Select</option>

                                                @foreach ($user_list ?? [] as $id => $val)
                                                    <option value="{{ $id }}" {{ old('assignee_id', $data['assignee_id'] ?? null) == $id ? 'selected' : '' }}>{{ $val }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <!--end::Group-->
                                </div>
                                <div class="col-xl-4">
                                    <!--begin::Group-->
                                    <div class="form-group fv-row mb-7">
                                        <label
                                            class="col-form-label col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12 text-lg-right text-left">Status
                                            <span class="text-danger">*</span></label>
                                        <div class="col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12">
                                            <select class="form-control form-control-lg form-control-solid form-select kt_select2_11 status_field required"
                                                data-control="select2" name="status" id="status">
                                                @foreach (config("constant.tasks_status") as $pVal)
                                                <option value="{{ $pVal }}" {{ isset($data['status']) && $data['status'] == $pVal ? 'selected' : 
                                                ( old('status','') == $pVal ? 'selected' : '' ) }}>{{ $pVal }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <!--end::Group-->
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-xl-4">
                                    <!--begin::Group-->
                                    <div class="form-group fv-row mb-7">
                                        <label
                                            class="col-form-label col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12 text-lg-right text-left">Priority
                                            <span class="text-danger">*</span></label>
                                        <div class="col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12">
                                            <select
                                                class="form-control form-control-lg form-control-solid form-select kt_select2_11 priority_field required"
                                                data-control="select2" name="priority" id="priority">

                                                @foreach (config("constant.task_priority") as $pVal)
                                                <option value="{{ $pVal }}" {{ isset($data['priority']) && $data['priority'] == $pVal ? 'selected' : 
                                                ( old('priority','Medium') == $pVal ? 'selected' : '' ) }}>{{ $pVal }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <!--end::Group-->
                                </div>
                                <div class="col-xl-4">
                                    <div class="form-group fv-row mb-7">
                                        <label
                                            class="col-form-label col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12 text-lg-right text-left">Start
                                            Date <span class="text-danger">*</span></label>
                                        <div class="col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12">
                                            <input
                                                class="form-control form-control-lg form-control-solid age-datepicker required"
                                                type="text" name="start_date" id="start_date"
                                                value="{{ $data['start_date'] ?? '' }}" autocomplete="off" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4">
                                    <!--begin::Group-->
                                    <div class="form-group fv-row mb-7">
                                        <label
                                            class="col-form-label col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12 text-lg-right text-left">Due
                                            Date <span class="text-danger">*</span></label>
                                        <div class="col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12">
                                            <input
                                                class="form-control form-control-lg form-control-solid age-datepicker required"
                                                type="text" name="due_date" id="due_date"
                                                value="{{ $data['due_date'] ?? '' }}" autocomplete="off" />
                                        </div>
                                    </div>
                                    <!--end::Group-->
                                </div>
                            </div>
                            <Div class="row">
                                <div class="col-xl-12">

                                    <!--begin::Group-->
                                    <div class="form-group fv-row mb-7">
                                        <label
                                            class="col-form-label col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12 text-lg-right text-left">Description
                                            <span class="text-danger">*</span></label>
                                        <div class="col-lg-12 col-xl-12 col-md-12 col-sm-12 col-xs-12">

                                            <textarea name="description" id="kt-ckeditor-5">{{ $data['description'] ?? '' }}</textarea>

                                        </div>
                                    </div>
                                    <!--end::Group-->

                                </div>
                            </div>


                            <div class="row">
                                <!--begin::Input group-->
                                <div class="form-group fv-row">
                                    <!--begin::Label-->
                                    <label class="col-lg-2 col-form-label text-lg-right">Upload Files:</label>
                                    <!--end::Label-->

                                    <!--begin::Col-->
                                    <div class="col-lg-10">
                                        <!--begin::Dropzone-->
                                        <div class="dropzone dropzone-queue mb-2" id="kt_dropzonejs_example_1">
                                            <!--begin::Controls-->
                                            <div class="dropzone-panel mb-lg-0 mb-2">
                                                <a class="dropzone-select btn btn-sm btn-primary me-2">Attach
                                                    files</a>
                                                <a class="dropzone-remove-all btn btn-sm btn-light-primary">Remove
                                                    All</a>
                                            </div>
                                            <!--end::Controls-->

                                            <!--begin::Items-->
                                            <div class="dropzone-items wm-200px">
                                                <div class="dropzone-item" style="display:none">
                                                    <!--begin::File-->
                                                    <div class="dropzone-file">
                                                        <div class="dropzone-filename"
                                                            title="some_image_file_name.jpg">
                                                            <span data-dz-name>some_image_file_name.jpg</span>
                                                            <strong>(<span data-dz-size>340kb</span>)</strong>
                                                        </div>

                                                        <div class="dropzone-error" data-dz-errormessage></div>
                                                    </div>
                                                    <!--end::File-->

                                                    <!--begin::Progress-->
                                                    <div class="dropzone-progress">
                                                        <div class="progress">
                                                            <div class="progress-bar bg-primary"
                                                                role="progressbar" aria-valuemin="0"
                                                                aria-valuemax="100" aria-valuenow="0"
                                                                data-dz-uploadprogress>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--end::Progress-->

                                                    <!--begin::Toolbar-->
                                                    <div class="dropzone-toolbar">
                                                        <span class="dropzone-delete"><i
                                                                class="bi bi-x fs-1"></i></span>
                                                    </div>
                                                    <!--end::Toolbar-->
                                                </div>
                                                @foreach ($task_files ?? [] as $fileId => $file)
                                                    <div class="dropzone-item" id="{{ $fileId }}">
                                                        <!--begin::File-->
                                                        <div class="dropzone-file">
                                                            <div class="dropzone-filename"
                                                                title="{{ $file }}"
                                                                style="width: 85%;word-break: break-all;">
                                                                <span data-dz-name><a
                                                                        href="{{ asset('uploads/tasks_attachment/files/' . $data['id'] . '/' . $file) }}"
                                                                        target="_blank">{{ $file }}</a></span>
                                                                <strong><span data-dz-size></span></strong>
                                                            </div>

                                                            <div class="dropzone-error" data-dz-errormessage>
                                                            </div>
                                                        </div>
                                                        <!--end::File-->

                                                        <!--begin::Toolbar-->
                                                        <div class="dropzone-toolbar">
                                                            <span class="dropzone-delete"><i
                                                                    class="bi bi-x fs-1"></i></span>
                                                        </div>
                                                        <!--end::Toolbar-->
                                                    </div>
                                                @endforeach
                                            </div>

                                            <!--end::Items-->
                                        </div>
                                        <!--end::Dropzone-->

                                        <!--begin::Hint-->
                                        <span class="form-text text-muted">Max file size is 8MB and multiple
                                            files can be uploaded.</span>
                                        <!--end::Hint-->
                                    </div>
                                    <!--end::Col-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <textarea id="task_attachments_hidden_input" name="task_attachments_hidden_input" hidden></textarea>
                        </div>


                    </div>
                    @if (request()->is('tasks/create') != true)

                        <h3 class="mt-10">Comments</h3>
                        <div class="separator separator-dotted border-primary my-2"></div>

                        <div class="row">
                            <div class="col-xl-12 col-sm-12 col-lg-12 col-md-12 table-responsive float-end">
                                <a id="add_row" class="btn btn-primary float-end"><i class="fa fa-plus"></i>
                                    Add
                                    Comment</a>
                            </div>
                            <div class="col-xl-12 col-sm-12 col-lg-12 col-md-12 clearfix table-responsive mb-7">
                                <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable"
                                    id="tab_logic">
                                    <thead>
                                        <tr>

                                            <th class="text-center" width="15%">
                                                Who
                                            </th>
                                            <th class="text-center" width="20%">
                                                Date / Time
                                            </th>
                                            <th class="text-center" width="30%">
                                                Comments
                                            </th>
                                            <th class="text-center" width="20%">
                                                Files
                                            </th>
                                            <th class="text-center" width="15%">
                                                Actions
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if (!empty($comments) && count($comments) > 0)
                                            @foreach ($comments as $i => $comment)
                                                @php
                                                    $rowCount = $i;

                                                @endphp
                                                <tr id='addr{{ $rowCount }}' data-id="{{ $rowCount }}"
                                                    class="hidden">
                                                    <td data-name="task_id" hidden>
                                                        <input type="text"
                                                            class="form-control form-control-lg form-control-solid  min-w-125px select_task_id"
                                                            name="comment[{{ $rowCount }}][task_id]"
                                                            value="{{ $data['id'] }}" />
                                                    </td>
                                                    <td data-name="user_id">
                                                        <input type="hidden"
                                                            name='comment[{{ $rowCount }}][id]'
                                                            value="{{ $comment['id'] }}" />
                                                        <select name="comment[{{ $rowCount }}][user_id]"
                                                            required
                                                            class="form-control form-control-lg form-control-solid form-select min-w-125px select_loc_type"
                                                            disabled>

                                                            @foreach ($users_list as $id => $name)
                                                                <option value="{{ $id }}"
                                                                    {{ isset($comment['user_id']) ? ($comment['user_id'] == $id ? 'selected' : '') : '' }}>
                                                                    {{ $name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </td>

                                                    <td data-name="date">
                                                        <input type="text" required
                                                            name='comment[{{ $rowCount }}][created_at]'
                                                            value="{{ isset($comment['created_at']) ? date('d-m-Y H:i:s', strtotime($comment['created_at'])) : '' }}"
                                                            placeholder='Date'
                                                            class="form-control form-control-lg form-control-solid datepicker3 min-w-125px"
                                                            disabled />

                                                    </td>
                                                    <td data-name="comment">

                                                        <textarea name='comment[{{ $rowCount }}][comment]' value="{{ $comment['comment'] ?? '' }}"
                                                            class="form-control form-control-lg form-control-solid  min-w-125px" readonly>{!! $comment['comment'] ?? '' !!}</textarea>
                                                    </td>
                                                    <td data-name="files" class="text-center">

                                                        <input type="file"
                                                            name="comment[{{ $rowCount }}][files][]"
                                                            class="form-control editable-field file-input"
                                                            accept=".pdf,.docx,.jpg,.jpeg,.png,.gif" multiple
                                                            style="display: none;" disabled>

                                                        <!-- Custom Button or Icon -->
                                                        <button type="button"
                                                            class="btn btn-primary select-files-btn">
                                                            <i class="fa fa-paperclip"></i>
                                                        </button>


                                                        <div class="dropzone-items wm-200px">
                                                            <div class="dropzone-item" style="display:none">
                                                                <!--begin::File-->

                                                                <!--end::File-->

                                                                <!--begin::Progress-->
                                                                <div class="dropzone-progress">
                                                                    <div class="progress">
                                                                        <div class="progress-bar bg-primary"
                                                                            role="progressbar" aria-valuemin="0"
                                                                            aria-valuemax="100" aria-valuenow="0"
                                                                            data-dz-uploadprogress>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <!--end::Progress-->

                                                                <!--begin::Toolbar-->
                                                                <div class="dropzone-toolbar">
                                                                    <span class="dropzone-delete-cmnt"><i
                                                                            class="bi bi-x fs-1"></i></span>
                                                                </div>
                                                                <!--end::Toolbar-->
                                                            </div>
                                                            @foreach ($comment['files'] as $file)
                                                                <div class="dropzone-item existing-files"
                                                                    id="{{ $file['id'] }}">
                                                                    <!--begin::File-->
                                                                    <div class="dropzone-file">
                                                                        <div class="dropzone-filename"
                                                                            title="{{ $file['filename'] }}"
                                                                            style="width: 85%;word-break: break-all;">
                                                                            <span data-dz-name><a
                                                                                    href="{{ asset('uploads/tasks_cmnt_attachment/files/' . $comment['id'] . '/' . $file['filename']) }}"
                                                                                    target="_blank">{{ $file['filename'] }}</a></span>
                                                                            <strong><span
                                                                                    data-dz-size></span></strong>
                                                                        </div>

                                                                        <div class="dropzone-error"
                                                                            data-dz-errormessage>
                                                                        </div>
                                                                    </div>
                                                                    <!--end::File-->
                                                                    @if ($comment['user_id'] == auth()->user()->id)
                                                                        <!--begin::Toolbar-->
                                                                        <div class="dropzone-toolbar">
                                                                            <span class="dropzone-delete-cmnt"><i
                                                                                    class="bi bi-x fs-1"></i></span>
                                                                        </div>
                                                                        <!--end::Toolbar-->
                                                                    @endif
                                                                </div>
                                                            @endforeach
                                                        </div>

                                                    </td>
                                                    <td data-name="del" class="text-center">
                                                        @if ($comment['user_id'] == auth()->user()->id)
                                                            <button type="button"
                                                                name="comment[{{ $rowCount }}][id]"
                                                                value="{{ $comment['id'] ?? '' }}"
                                                                class='btn btn-danger glyphicon glyphicon-remove'
                                                                onclick="updateComment({{ $comment['id'] }}, this)">
                                                                <span aria-hidden="true"
                                                                    data-comment-id="{{ $comment['id'] }}"><i
                                                                        class="fa fa-pencil"
                                                                        aria-hidden="true"></i></span></button>
                                                            <button type="button"
                                                                name="comment[{{ $rowCount }}][id]"
                                                                value="{{ $comment['id'] ?? '' }}"
                                                                onclick="deleteComment({{ $comment['id'] }})"
                                                                class='btn btn-danger glyphicon glyphicon-remove '><span
                                                                    aria-hidden="true"><i class="fa fa-trash"
                                                                        aria-hidden="true"></i></span></button>
                                                        @endif
                                                    </td>

                                                </tr>
                                            @endforeach
                                        @else
                                            @php $rowCount = 0; @endphp
                                            <tr id='addr{{ $rowCount }}' data-id="{{ $rowCount }}">
                                                <td data-name="task_id" hidden>
                                                    <input type="text"
                                                        class="form-control form-control-lg form-control-solid min-w-125px select_task_id"
                                                        name="comment[{{ $rowCount }}][task_id]"
                                                        value="{{ $data['id'] ?? '' }}" />
                                                </td>

                                                <td data-name="user_id">
                                                    <input type="hidden" name='comment[{{ $rowCount }}][id]'
                                                        value="" />
                                                    <select name="comment[{{ $rowCount }}][user_id]" required
                                                        class="form-control form-control-lg form-control-solid form-select min-w-125px select_loc_type"
                                                        disabled>
                                                        <option value="">-- Select User --</option>
                                                        @foreach ($user_list as $id => $name)
                                                            <option value="{{ $id }}"
                                                                {{ auth()->user()->id == $id ? 'selected' : '' }}>
                                                                {{ $name }}</option>
                                                        @endforeach
                                                    </select>
                                                </td>

                                                <td data-name="date">
                                                    <input type="text" required
                                                        name='comment[{{ $rowCount }}][created_at]'
                                                        value="{{ \Carbon\Carbon::now()->tz(config('app.timezone'))->format('d-m-Y H:i:s') }}"
                                                        placeholder='Date'
                                                        class="form-control form-control-lg form-control-solid datepicker3 min-w-125px"
                                                        disabled />
                                                </td>

                                                <td data-name="comment">
                                                    <textarea name='comment[{{ $rowCount }}][comment]' class="form-control form-control-lg form-control-solid min-w-125px"></textarea>
                                                </td>

                                                <td data-name="files" class="text-center">
                                                    <input type="file"
                                                        name="comment[{{ $rowCount }}][files][]"
                                                        class="form-control file-input"
                                                        accept=".pdf,.docx,.jpg,.jpeg,.png,.gif" multiple
                                                        style="display: none;">
                                                    <button type="button"
                                                        class="btn btn-primary select-files-btn">
                                                        <i class="fa fa-paperclip"></i>
                                                    </button>


                                                    <div class="dropzone-items wm-200px"></div>
                                                </td>

                                                <td data-name="del" class="text-center">
                                                    <button type="button"
                                                        name="locations[{{ $rowCount }}][type]"
                                                        class='btn btn-danger glyphicon glyphicon-remove row-remove'><span
                                                            aria-hidden="true">×</span></button>
                                                </td>
                                            </tr>
                                        @endif

                                    </tbody>
                                </table>
                            </div>

                        </div>
                    @endif
                </div>
                <div class="tab-pane show {{ $activeTab == 'history' ? 'active' : '' }}" id="kt_task_edit_tab_2" role="tabpanel">
                    <div class="card shadow-sm">

                        <div class="card-body">

                            <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
                                id="comments-datatable">
                                <thead>
                                    <tr class="fw-semibold fs-6 text-gray-800">
                                        <th width="5%">#</th>
                                        <th width="15%">User</th>
                                        <th width="15%">Time Ago</th>
                                        <th width="40%">Old Value</th>
                                        <th width="15%">New Value</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- DataTable will populate this --}}
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
                <!--begin::Card body-->

            </div>
            <div class="card-footer text-right">
                <button type="button" class="btn btn-primary me-2 btn-hover-rise" onclick="submitForm(this);">Submit</button>
                @if (!empty($isMobile) && $isMobile == true)
                <button type="button" class="btn btn-secondary btn-hover-rise" onclick="cancelPostMessage();">Cancel</button>
                @else
                <a href="{{ route('tasks.index') }}"><button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button></a>
                @endif
            </div>
        </div>
        <!--end::Card-->
    </div>
</form>
@endsection
@section('scripts')
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="{{ asset('js/ckeditor_4/ckeditor.js') }}"></script>
    <script type="text/javascript">
        var validator;
        var commentEditor;
        let pageMode = "{{ Route::is('tasks.create') ? 'create' : 'edit' }}";
        let taskId = "{{ $data['id'] ?? '' }}";
        const currentDateTime = @json(\Carbon\Carbon::now(config('app.timezone'))->format('d-m-Y H:i:s'));

        var ajaxDropzoneUrl = "{{ route('tasks.uploads', $data['id'] ?? '') }}";
        var ajaxDropzoneDeleteUrl = "{!! route('tasks.destroy',1) !!}";
        var ajaxCommentDeleteUrl = "{!! route('task_comments.destroy',1) !!}";
        
        var isMobile = "{{!empty($isMobile) && $isMobile == true?1:0}}";
        var hasToken = "{{!empty($token) ?1:0}}";
        if (isMobile != 0 && hasToken != 0) {
            ajaxDropzoneUrl = "{{route('mobile.tasks.uploads',$data['id']??'')}}?is_mobile=1&token={{$token??''}}";
            ajaxDropzoneDeleteUrl = "{!! route('mobile.tasks.destroy',1) !!}?is_mobile=1&token={{$token??''}}";
            ajaxCommentDeleteUrl = "{!! route('mobile.task_comments.destroy',1) !!}?is_mobile=1&token={{$token??''}}";
        }

        $(document).on('click', '.select-files-btn', function() {
            $(this).closest('td').find('input[type="file"]').trigger('click');
        });


        function submitForm(ele) {
            if ($('#task_form').valid()) {
                $(ele).attr('disabled', true).addClass('disabled');
                $('#task_form').submit();
            } else {
                validator.focusInvalid();
            }
        }

        function initDropZone() {
            // set the dropzone container id
            const id = "#kt_dropzonejs_example_1";
            const ajaxUrl = ajaxDropzoneUrl;
            const dropzone = document.querySelector(id);
            if (!dropzone) {
                return;
            }

            var uploadedFiles = [];

            // set the preview element template
            var previewNode = dropzone.querySelector(".dropzone-item");
            previewNode.id = "";
            var previewTemplate = previewNode.parentNode.innerHTML;
            previewNode.parentNode.removeChild(previewNode);

            var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
                url: ajaxUrl, // Set the url for your upload script location
                method: 'post',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                // parallelUploads: 20,
                maxFilesize: 8, // Max filesize in MB
                previewTemplate: previewTemplate,
                acceptedFiles: "application/pdf,image/*,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.doc,.docx",
                // acceptedFiles: "application/pdf",
                previewsContainer: id + " .dropzone-items", // Define the container to display the previews
                clickable: id +
                    " .dropzone-select" // Define the element that should be used as click trigger to select files.
            });

            myDropzone.on("addedfile", function(file) {
                // Hookup the start button
                const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
                dropzoneItems.forEach(dropzoneItem => {
                    dropzoneItem.style.display = '';
                });
            });

            // Update the total progress bar
            myDropzone.on("totaluploadprogress", function(progress) {
                const progressBars = dropzone.querySelectorAll('.progress-bar');
                progressBars.forEach(progressBar => {
                    progressBar.style.width = progress + "%";
                });
            });

            myDropzone.on("sending", function(file) {
                // Show the total progress bar when upload starts
                const progressBars = dropzone.querySelectorAll('.progress-bar');
                progressBars.forEach(progressBar => {
                    progressBar.style.opacity = "1";
                });
            });

            // Hide the total progress bar when nothing"s uploading anymore
            myDropzone.on("complete", function(progress) {
                const progressBars = dropzone.querySelectorAll('.dz-complete');
                if (progress && progress.xhr && progress.xhr.status == 200 && progress.xhr.response) {
                    var res = JSON.parse(progress.xhr.response);
                    $(progress.previewElement).attr('id', res['id']);
                    // $(progress.previewElement).attr('data-type', res['type']);
                    // $(progress.previewElement).attr('data-sub-type', 'inside_of_cabin');
                    // $(progress.previewElement).attr('data-module-name', res['module_name']);
                    uploadedFiles.push(res['file_name']);
                    $('#task_attachments_hidden_input').val(uploadedFiles.join(";"));
                } else {
                    $(progress.previewElement).attr('id', 'new');
                }
                setTimeout(function() {
                    progressBars.forEach(progressBar => {
                        progressBar.querySelector('.progress-bar').style.opacity = "0";
                        progressBar.querySelector('.progress').style.opacity = "0";
                    });
                }, 300);
            });
        }

        initDropZone();

        // comemnt list
        if (pageMode === 'edit' && taskId !== '') {
            function deleteComment(commentId) {

                var id = commentId;

                let newDeleteAlert = deleteAlert;
                newDeleteAlert['text'] = "Are you sure you want to delete this file?";
                Swal.fire(newDeleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'DELETE',
                            dataType: 'json',
                            data: {
                                "id": id,
                                "_token": "{{ csrf_token() }}",
                                'task_id': pageMode === 'edit' && taskId !== '' ? taskId : '',
                            },
                            url: ajaxCommentDeleteUrl,

                            success: function(data) {
                                if (data.status) {
                                    $('#tab_logic').load(location.href + ' #tab_logic>*', '');
                                }
                            }
                        });
                    }
                });

            }

            $(document).ready(function() {


                $('#tab_logic tbody tr').each(function() {
                    var userId = $(this).find('[name*="[user_id]"]').val();
                    if (userId != "{{ auth()->user()->id }}") {

                        $(this).find('.btn-edit, .row-remove').addClass('d-none');
                    } else {
                        $(this).find('.btn-edit, .row-remove').removeClass('d-none');
                    }
                });

                // Sortable Code
                var fixHelperModified = function(e, tr) {
                    var $originals = tr.children();
                    var $helper = tr.clone();

                    $helper.children().each(function(index) {
                        $(this).width($originals.eq(index).width())
                    });

                    return $helper;
                };

                $(".table-sortable tbody").sortable({
                    helper: fixHelperModified,
                    stop: function(event, ui) {
                        resetIndex();
                    }
                }).disableSelection();

                $(".table-sortable thead").disableSelection();

            });

            function resetIndex() {
                $.each($("#tab_logic tbody tr"), function(newid) {
                    _self = this;
                    // loop through each td and create new elements with name of newid
                    $.each($(_self).find("td"), function() {
                        var td;
                        var cur_td = $(this);

                        var children = cur_td.children();

                        $.each(children, function(ci) {
                            var c = $(children[ci]);

                            // Replace name
                            var nameAttr = c.attr('name');
                            if (typeof nameAttr !== 'undefined') {
                                c.attr("name", nameAttr.replace(/\[\d+](?!.*\[\d)/, '[' + newid + ']'));
                            }

                            // Replace id
                            var idAttr = c.attr('id');
                            if (typeof idAttr !== 'undefined') {
                                c.attr("id", idAttr.replace(/\[\d+](?!.*\[\d)/, '[' + newid + ']'));
                            }

                            c.appendTo($(td));
                        });

                    });
                });
            }

            $(document).on("click", "#add_row", function() {
                // Dynamic Rows Code

                // Get max row id and set new id
                var newid = 0;
                $.each($("#tab_logic tr"), function() {
                    if (parseInt($(this).data("id")) > newid) {
                        newid = parseInt($(this).data("id"));
                    }
                });
                newid++;

                let trId = "new_comment_tr_" + newid;
                var tr = $("<tr></tr>", {
                    id: trId,
                    "data-id": newid
                });

                // loop through each td and create new elements with name of newid
                $.each($("#tab_logic tbody tr:nth(0) td"), function() {
                    var td;
                    var cur_td = $(this);

                    var children = cur_td.children();

                    // add new td and element if it has a nane
                    td = $("<td></td>", {
                        "data-name": $(cur_td).data("name"),
                        "class": $(cur_td).attr("class")
                    });
                    $.each(children, function(ci) {
                        var c = $(children[ci]).clone().val("");
                        if (c.attr('name') && c.attr('name').includes('[user_id]')) {
                            c.val("{{ auth()->user()->id }}"); // Set to logged-in user's id
                        }
                        if (c.attr('name') && c.attr('name').includes('[task_id]')) {
                            c.attr('type', 'hidden');
                            td.css('display', 'none') // Hide the input
                            // Set the value from JS variable
                            if (pageMode === 'edit' && taskId !== '') {
                                c.val(taskId);
                            }
                        }
                        // Set date to now if this is the date input
                        if (c.attr('name') && c.attr('name').includes('[created_at]')) {
                            c.val(currentDateTime);
                        }
                        if ($(c).attr('name')) {
                            c.attr("name", $(c).attr('name').replace(/\[\d+](?!.*\[\d)/, '[' +
                                newid +
                                ']'));
                        }
                        if ($(c).attr('id')) {
                            c.attr("id", $(c).attr('id').replace(/\[\d+](?!.*\[\d)/, '[' + newid +
                                ']'));
                        }
                        c.appendTo($(td));
                    });
                    if (pageMode === 'edit' && taskId !== '') {
                        if ($(this).data("name") === taskId) {
                            td.css('display', 'none'); // Optionally hide the TD
                        }
                    }
                    td.appendTo($(tr));

                    $(tr).find('td[data-name="comment"] textarea').prop('readonly', false);
                    $(tr).find('td[data-name="files"] input[type="file"]').prop('disabled', false);
                    if ($(cur_td).data("name") === "del") {
                        $(tr).find('td[data-name="del"] button').hide();

                        var removeBtn = $(
                            '<button type="button" class="btn btn-danger row-remove">x </button>'
                        );
                        td.append(removeBtn);
                    }
                    var x = document.getElementById(trId);
                    td.find(".existing-files").addClass("d-none");
                    if (pageMode === 'edit' && taskId !== '') {
                        td.find('.select_task_id').val(taskId);
                    }

                });


                // add the new row
                $(tr).appendTo($('#tab_logic'));


                var x = document.getElementById(trId);
                initDatePicker3();

            });
        }
        $('#tab_logic').on("click", "td button.row-remove", function () {
            const totalRows = $('#tab_logic tbody').find('tr').length;

            // If this is the last row, don't remove it
            if (totalRows <= 1) {
                alert('At least one comment is required!');
                return;
            }

            // Remove the row
            $(this).closest("tr").remove();

            // Recalculate indices or names
            resetIndex();
        });


        function initDatePicker3() {
            $(".datepicker3").flatpickr({
                dateFormat: "d-m-Y H:i:s"
            });
        }
        //enc comment js

        $(document).on('click', '.dropzone-delete', function() {
            actionDeleteDropZone(this);
        });
        $(document).on('click', '.dropzone-delete-cmnt', function() {
            actionDeleteDropZoneCmnt(this);
        });

        function actionDeleteDropZoneCmnt(ele) {
            var row = $(ele).parents('.dropzone-item:first');
            if (row) {
                var id = row.attr('id');
                if (id == "new") {
                    row.remove();
                } else if (id) {
                    let newDeleteAlert = deleteAlert;
                    newDeleteAlert['text'] = "Are you sure you want to delete this file?";
                    Swal.fire(newDeleteAlert).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                type: 'DELETE',
                                dataType: 'json',
                                data: {
                                    "id": id,
                                    "type": 'task_file',
                                    "_token": "{{ csrf_token() }}",
                                },
                                url: ajaxCommentDeleteUrl,

                                success: function(data) {
                                    if (data.status) {
                                        let newDeleteAlert = deleteSuccessAlert;
                                        newDeleteAlert['text'] = "File deleted successfully!";
                                        Swal.fire(newDeleteAlert);
                                        row.remove();
                                    }
                                }
                            });
                        }
                    });
                }
            }
        }

        function actionDeleteDropZone(ele) {
            var row = $(ele).parents('.dropzone-item:first');
            if (row) {
                var id = row.attr('id');
                if (id == "new") {
                    row.remove();
                } else if (id) {
                    let newDeleteAlert = deleteAlert;
                    newDeleteAlert['text'] = "Are you sure you want to delete this file?";
                    Swal.fire(newDeleteAlert).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                type: 'DELETE',
                                dataType: 'json',
                                data: {
                                    "id": id,
                                    "type": 'task_file',
                                    "_token": "{{ csrf_token() }}",
                                    'task_id': "{{ $data['id'] ?? '' }}",
                                },
                                url: ajaxDropzoneDeleteUrl,
                                success: function(data) {
                                    if (data.status) {
                                        let newDeleteAlert = deleteSuccessAlert;
                                        newDeleteAlert['text'] = "File deleted successfully!";
                                        Swal.fire(newDeleteAlert);
                                        row.remove();
                                    }
                                }
                            });
                        }
                    });
                }
            }
        }
        // Update comment
        function updateComment(commentId, btn) {
            var $tr = $(btn).closest('tr');

            // Enable comment textarea and file input in this row
            $tr.find('td[data-name="comment"] textarea').prop('readonly', false).css('background-color', '#fff');
            $tr.find('td[data-name="files"] input[type="file"]').prop('disabled', false).css('background-color', '#fff');

            // Hide both buttons in the "del" cell for this row

            // You can also add a class to indicate edit mode, if needed
            $tr.addClass('editing');
        }
        $(document).ready(function() {
            CKEDITOR.replace('kt-ckeditor-5', {
                fullPage: true,
                allowedContent: true
            });

            $('.nav-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
                var target = $(e.target).attr("href") // activated tab
                $('.tab-pane').hide();
                if (target == "#kt_task_edit_tab_2") {
                    $('.card-footer').hide();
                    $(target).show();
                } else {
                    $('.card-footer').show();
                    $(target).show();
                }
            });
            //history
            if (pageMode === 'edit' && taskId !== '') {
                var commentsTable = $('#comments-datatable').DataTable({

                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('tasks.tasks_history') }}",
                        type: "GET",
                        data: function(d) {
                            d.task_id = "{{ $data['id'] ?? '' }}"; // Pass task ID to the server

                        }
                    },

                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'user_name',
                            name: 'user.name',
                            orderable: false,
                            render: function(data, type, row) {
                                return '<div class="d-flex flex-column">' +
                                    '<span class="fw-bold">' + data + '</span>' +

                                    '</div>';
                            }
                        },


                        {
                            data: 'date_diff',
                            name: 'date_diff',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'old_value',
                            name: 'old_value',
                            orderable: false,
                            searchable: false,
                        },
                        {
                            data: 'new_value',
                            name: 'new_value',
                            orderable: false,
                            searchable: false,
                        },
                    ],
                    order: [
                        [3, 'desc']
                    ], // Order by date, newest first
                    pageLength: 100,
                    render: null,
                    orderable: false,
                    searchable: false,
                    exportable: false,
                    printable: false,
                    footer: '',

                    responsive: true,
                    dom: '<"row"<"col-6"<"d-flex  justify-content-start"<""l><"mt-3 ms-5">>><"col-6"<"d-flex justify-content-end"<"">>>>tpil',

                });

                // Refresh table when comments are added/updated
                window.refreshCommentsTable = function() {
                    console.log('refreshCommentsTable called');
                    commentsTable.ajax.reload(null, false);
                };
            }

            //end History

        });

        function cancelPostMessage(){
            if (typeof AppBridge !== 'undefined' && AppBridge.postMessage) { AppBridge.postMessage(JSON.stringify({status: true})); }
        }
    </script>
@endsection