@extends('layouts.app')

@section('title', 'Edit Tasks')
{{-- custom css --}}
@push('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<style>
    /* CK-editor css */
    .ck-editor__main {
        border: 1px solid lightgray !important;
    }

    .ck-editor ul {
        margin-left: 20px;
    }

    .ck-editor li {
        list-style-type: unset !important;
        margin-left: 10px;
    }

    .ck-editor blockquote {
        border-left: 4px solid #ccc;
        margin: 10px 0;
        padding: 10px 15px;
        background-color: #f9f9f9;
        font-style: italic;
        color: #555;
    }

    .ck-editor blockquote p {
        margin: 0;
    }

    /* Input field styling */
    #multiDatePicker {
        width: 150px;
        height: 30px;
        font-size: 14px;
        padding: 5px;
    }

    /* Calendar popup adjustments */
    .flatpickr-calendar {
        font-size: 12px;
        transform: scale(0.9);
    }

    /* Calendar header (Month-Year section) */
    .flatpickr-month {
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: relative;
        background: #f8f9fa;
        /* Light gray background */
        border-bottom: 3px solid rgb(228, 235, 241);
        padding: 8px 10px;
        border-radius: 5px 5px 0 0;
    }

    /* Selected Month Custom Styling */
    .flatpickr-current-month {
        font-size: 18px;
        /* Bigger font */
        font-weight: bold;
        color: rgb(23, 162, 184);
        /* Blue color */
        padding: 5px 10px;
        /* background: rgba(0, 123, 255, 0.1); Light blue background */
        border-radius: 4px;
        transition: background 0.3s ease, color 0.3s ease;
    }

    /* Hover effect on Selected Month */
    .flatpickr-current-month:hover {
        background: rgba(0, 123, 255, 0.2);
        /* color: #0056b3;x */
    }

    /* Disable Month Dropdown */
    .flatpickr-monthDropdown-months {
        pointer-events: none;
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Weekday styling */
    .flatpickr-weekday {
        font-size: 12px;
    }

    /* Calendar days styling */
    .flatpickr-day {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    /* Next & Previous buttons styling */
    .flatpickr-prev-month,
    .flatpickr-next-month {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 50%;
        transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    }

    /* Hover effect on Next & Previous buttons */
    .flatpickr-prev-month:hover,
    .flatpickr-next-month:hover {
        background-color: rgb(23, 162, 184);
        color: white;
        transform: scale(1.1);
    }

    /* Adjust container height */
    .dayContainer {
        height: 150px !important;
        margin-bottom: 12px;
        padding: 2px;

    }

    .select-wrapper {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .select-wrapper select {
        appearance: none;
        /* Remove default styling */
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-right: 30px;
        /* Space for the arrow */
        background: white;
        /* Background color */
        border: 1px solid #ccc;
        border-radius: 5px;
        height: 35px;
        width: 100%;
    }

    /* Custom dropdown arrow */
    .select-wrapper::after {
        content: "\f078";
        /* FontAwesome downward arrow */
        font-family: FontAwesome;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        /* Prevent click interference */
        color: #666;
    }
</style>
@endpush

{{-- page connect --}}
@section('content')
<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-row-card>

        <x-slot:title>
            <h4 class="card-title">Edit Task</h4>
        </x-slot:title>

        <x-form id="edit-task-form">

            <div x-data="{
                setTime: {{ $task['set_time'] ? 'true' : 'false' }},
                repeat: '{{ $task['repeat'] ?? '' }}'
            }">
                @method('PUT')
                <input type="hidden" name="id" value="{{ $task['id'] }}">

                <div class="row">
                    <div class="mb-6 col-md-6">
                        <label class="form-label">Task Name<span class="text-danger">*
                            </span></label>
                        <x-text-input name="task_name" id="name" placeholder="Enter Name"
                            value="{{ old('name', $task['task_name'] ?? '') }}" />
                    </div>
                    <div class="mb-6 col-md-6">
                        <label class="form-label">Assign To Agent </label>
                        <x-select name="agent_id" id="assignTo" :options="$users" class="multi-select"
                            selected-value="{{ $task['agent_id'] }}" default-option="Select Agent"
                            empty-option="Agent not found" />
                    </div>
                    <div class="mb-6 col-md-6 mt-3">
                        <label class="form-label"> Choose Contact </label>
                        <x-select name="contact_id" id="contactList" class="multi-select" :options="$contacts"
                            selected-value="{{ $task['contact_id'] }}" default-option="Select Contact"
                            empty-option="Contact not found" />
                    </div>

                    <!-- assign to property   -->
                    <div class="mb-6 col-md-6 mt-3">
                        <label class="form-label">Assign To Property</label>
                        <x-select name="property_id" id=" " :options="$properties" class="multi-select"
                            selected-value="{{ $task['property_id'] }}" default-option="Select Property"
                            empty-option="Property Not Found" />
                    </div>
                    <div class="col-md-6 mt-3">
                        <x-input-label for="start_date" :value="__('Start Date')" /><span class="text-danger">*</span>
                        <input type="date" class="form-control form-control-sm" name="start_date" id="start_date" value="{{ old('start_date', $task['start_date'] ?? '') }}">
                    </div>

                    <!-- dead line date  -->
                    <div class="col-md-6 mt-3">
                        <x-input-label for="deadline_date" :value="__('Deadline Date')" />
                        <input type="date" class="form-control form-control-sm" id="deadline_date"
                            name="deadline_date" value="{{ old('deadline_date', $task['deadline_date'] ?? '') }}">
                    </div>

                    <!-- type  -->
                    <div class="mb-6 col-md-6 mt-3">
                        <label class="form-label">Task Type</label>
                        <x-select name="task_type" id="type" class="multi-select"
                            :options="[ 'Follow Up' => 'Follow Up', 'Email' => 'Email', 'Call' => 'Call','Meeting' => 'Meeting']"
                            selected-value="{{ $task['task_type'] }}" default-option="To Do" />
                    </div>
                    <!-- Priority -->
                    <div class="mb-6 col-md-6 mt-3">
                        <label class="form-label">Task Priority</label>
                        <x-select name="priority" id="priority" class="multi-select"
                            :options="['Low' => 'Low', 'Medium' => 'Medium', 'High' => 'High']"
                            selected-value="{{ $task['priority'] }}" default-option="None" />
                    </div>

                    <!-- tags -->
                    <div class="mb-6 col-md-6 mt-3">
                        <label class="form-label"> Tags/Property Of Interest </label>
                        @php
                        $taskTags = json_decode($task['task_tags']);
                        @endphp
                        <div class="select-wrapper">
                            <select class="multi-select form-control form-control-sm" multiple="multiple"
                                name="task_tags[]" id="tags-select" data-placeholder="Select Tags...">
                                <option value="none" disabled>None</option>
                                <option value="affordable_housing" @if(in_array('affordable_housing', $taskTags)) selected @endif>Affordable Housing</option>
                                <option value="aircraft_hangar" @if(in_array('aircraft_hangar', $taskTags)) selected @endif>Aircraft Hangar</option>
                                <option value="amusement_park" @if(in_array('amusement_park', $taskTags)) selected @endif>Amusement Park</option>
                                <option value="animal_boarding_kennel" @if(in_array('animal_boarding_kennel', $taskTags)) selected @endif>Animal Boarding/Kennel</option>
                                <option value="auto_body_shop" @if(in_array('auto_body_shop', $taskTags)) selected @endif>Auto Body Shop</option>
                                <option value="auto_dealership" @if(in_array('auto_dealership', $taskTags)) selected @endif>Auto Dealership</option>
                                <option value="auto_repair" @if(in_array('auto_repair', $taskTags)) selected @endif>Auto Repair</option>
                                <option value="auto_sales" @if(in_array('auto_sales', $taskTags)) selected @endif>Auto Sales</option>
                                <option value="bank" @if(in_array('bank', $taskTags)) selected @endif>Bank</option>
                                <option value="bar_tavern" @if(in_array('bar_tavern', $taskTags)) selected @endif>Bar/Tavern</option>
                                <option value="brewery" @if(in_array('brewery', $taskTags)) selected @endif>Brewery</option>
                                <option value="bulk_warehouse" @if(in_array('bulk_warehouse', $taskTags)) selected @endif>Bulk Warehouse</option>
                                <option value="campground" @if(in_array('campground', $taskTags)) selected @endif>Campground</option>
                                <option value="casino" @if(in_array('casino', $taskTags)) selected @endif>Casino</option>
                                <option value="cement_gravel_facility" @if(in_array('cement_gravel_facility', $taskTags)) selected @endif>Cement/Gravel Facility</option>
                                <option value="cemetery_mausoleum" @if(in_array('cemetery_mausoleum', $taskTags)) selected @endif>Cemetery/Mausoleum</option>
                                <option value="chemical_oil_refinery" @if(in_array('chemical_oil_refinery', $taskTags)) selected @endif>Chemical/Oil Refinery</option>
                                <option value="church_religious_facility" @if(in_array('church_religious_facility', $taskTags)) selected @endif>Church/Religious Facility</option>
                                <option value="cold_storage" @if(in_array('cold_storage', $taskTags)) selected @endif>Cold Storage</option>
                                <option value="community_center" @if(in_array('community_center', $taskTags)) selected @endif>Community Center</option>
                                <option value="convenience_store" @if(in_array('convenience_store', $taskTags)) selected @endif>Convenience Store</option>
                                <option value="correctional_facility" @if(in_array('correctional_facility', $taskTags)) selected @endif>Correctional Facility</option>
                                <option value="crematorium" @if(in_array('crematorium', $taskTags)) selected @endif>Crematorium</option>
                                <option value="day_care" @if(in_array('day_care', $taskTags)) selected @endif>Day Care</option>
                                <option value="data_center" @if(in_array('data_center', $taskTags)) selected @endif>Data Center</option>
                                <option value="dental_office" @if(in_array('dental_office', $taskTags)) selected @endif>Dental Office</option>
                                <option value="distribution_center" @if(in_array('distribution_center', $taskTags)) selected @endif>Distribution Center</option>
                                <option value="drive_thru_restaurant" @if(in_array('drive_thru_restaurant', $taskTags)) selected @endif>Drive-Thru Restaurant</option>
                                <option value="dry_cleaner" @if(in_array('dry_cleaner', $taskTags)) selected @endif>Dry Cleaner</option>
                                <option value="education_facility" @if(in_array('education_facility', $taskTags)) selected @endif>Education Facility</option>
                                <option value="event_space" @if(in_array('event_space', $taskTags)) selected @endif>Event Space</option>
                                <option value="event_venue" @if(in_array('event_venue', $taskTags)) selected @endif>Event Venue</option>
                                <option value="farm_agricultural" @if(in_array('farm_agricultural', $taskTags)) selected @endif>Farm/Agricultural</option>
                                <option value="fast_food_restaurant" @if(in_array('fast_food_restaurant', $taskTags)) selected @endif>Fast Food Restaurant</option>
                                <option value="financial_institution" @if(in_array('financial_institution', $taskTags)) selected @endif>Financial Institution</option>
                                <option value="fitness_center_gym" @if(in_array('fitness_center_gym', $taskTags)) selected @endif>Fitness Center/Gym</option>
                                <option value="hospital" @if(in_array('hospital', $taskTags)) selected @endif>Hospital</option>
                                <option value="industrial_real_estate" @if(in_array('industrial_real_estate', $taskTags)) selected @endif>Industrial Real Estate</option>
                                <option value="investment_properties" @if(in_array('investment_properties', $taskTags)) selected @endif>Investment Properties</option>
                                <option value="luxury_real_estate" @if(in_array('luxury_real_estate', $taskTags)) selected @endif>Luxury Real Estate</option>
                                <option value="mixed_use_office" @if(in_array('mixed_use_office', $taskTags)) selected @endif>Mixed-Use Office</option>
                                <option value="real_estate_consulting" @if(in_array('real_estate_consulting', $taskTags)) selected @endif>Real Estate Consulting</option>
                                <option value="warehouse" @if(in_array('warehouse', $taskTags)) selected @endif>Warehouse</option>
                                <option value="workforce_housing" @if(in_array('workforce_housing', $taskTags)) selected @endif>Workforce Housing</option>
                                <option value="other" @if(in_array('other', $taskTags)) selected @endif>Other</option>
                            </select>
                        </div>
                    </div>

                    <!-- set time  -->
                    <div class="mb-6 col-md-6 mt-3">
                        <label for="form-label"> Set Task Time</label>

                        <div class="d-flex justify-content-between">
                            <!-- switch for time  -->
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id=""
                                    name="set_time" @checked(old('set_time', $task['set_time']==="true" ))
                                    x-model="setTime">
                            </div>
                            <!-- this section depend on set time value  -->
                            <div x-show="setTime == true">
                                <div class="d-flex w-100" style="margin-top: -14px;">
                                    <div class="d-flex me-5">
                                        <label class="form-label">Start Time</label>
                                        <x-text-input type="time" class="start-time" name="s_time"
                                            value="{{ old('s_time', $task['s_time'] ?? '') }}" />
                                    </div>
                                    <div class="d-flex">
                                        <label class="form-label">End Time</label>
                                        <x-text-input type="time" class="end-time" name="e_time"
                                            value="{{ old('e_time', $task['e_time'] ?? '') }}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mt-3">
                        <label class="form-label">Task Reminder</label>
                        <div class="d-flex">
                            <x-text-input name="task_reminder" type="number" id="task_reminder" min="0" value="{{ $task['task_reminder'] ?? '' }}" placeholder="Enter Number" class="me-1" />
                            <select class="form-control form-control-sm" name="task_reminder_interval">
                                <option value="">Select Option</option>
                                <option value="minutes" {{ isset($task['task_reminder_interval']) &&  $task['task_reminder_interval'] == "minutes" ? 'selected' : '' }}>Minutes</option>
                                <option value="hour" {{ isset($task['task_reminder_interval']) && $task['task_reminder_interval'] == "hour" ? 'selected' : '' }}>Hours</option>
                            </select>
                        </div>
                    </div>
                    <!-- repeat  -->
                    <div class="mb-6 col-md-6 mt-3">
                        <label class="form-label">Task Repeat</label>
                        <select class="form-control form-control-sm task-reminder multi-select" name="task_repeat">
                            <option value="">Select Type</option>
                            <option value="daily" {{ old('task_repeat', $task['task_repeat'] ?? '') == 'daily' ? 'selected' : '' }}>Daily</option>
                            <option value="weekly" {{ old('task_repeat', $task['task_repeat'] ?? '') == 'weekly' ? 'selected' : '' }}>Weekly</option>
                            <option value="monthly" {{ old('task_repeat', $task['task_repeat'] ?? '') == 'monthly' ? 'selected' : '' }}>Monthly</option>
                            <option value="yearly" {{ old('task_repeat', $task['task_repeat'] ?? '') == 'yearly' ? 'selected' : '' }}>Yearly</option>
                        </select>
                    </div>

                    <div class="row">
                        <div class="{{ $task['task_repeat']=='monthly' ||  $task['task_repeat']=='weekly' ? 'col-6' : 'col-12'}} text-area">
                            <div class="mb-12 col-md-12 col-lg-12 col-12 mb-5 mt-3">
                                <label class="form-label">Task Description</label>
                                <textarea name="task_description" id="text_editor" cols="10" rows="7"
                                    class="form-control form-control-sm"
                                    placeholder="Write your text"> {{ old('description', $task['task_description'] ?? '') }} </textarea>
                            </div>
                        </div>

                        <div class="mb-6 col-6 mt-4">
                            <div class="mx-4 mt-4 task-reminder-weekly" style="display: none;">
                                <div class="d-flex">
                                    <label for="days" class="w-25">Days:</label>
                                    <div class="days-checkboxes">
                                        @foreach (['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'] as $day)
                                        <input type="checkbox" id="{{ $day }}" name="week_days[]"
                                            {{ in_array($day, json_decode($task['week_days'] ?? '[]', true)) ? 'checked' : '' }}
                                            value="{{ $day }}">
                                        <label for="{{ $day }}" class="me-2">{{ ucfirst(substr($day, 0, 2)) }}</label>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <div class="task-reminder-monthly" style="display: none;">
                                <div class="d-flex">
                                    <input type="text" id="multiDatePicker" name="month_date_range"
                                        class="d-none form-control open monthly-end-date"
                                        value="{{ old('month_date_range', $task['month_date_range'] ?? '') }}"
                                        placeholder="Select dates" style="width: 160%;">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            </div>
            <div class="row">

            </div>
            <div class="row">
                <div class="my-4 text-end">
                    <x-button type="submit" class="btn-primary me-3"> Update</x-button>
                </div>
            </div>
            </div>
        </x-form>

    </x-row-card>
</x-content-body>
@endsection


{{-- custom js --}}
@push('js')
<script>
    var editTaskRoute = @json(route('tasks.update', ['task' => $task['id']]));
    var allTasksRoute = "{{ route('tasks.index') }}";
</script>
<script src="{{ asset('assets/js/custom/task.js') }}"></script>
<!-- Flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const datePicker = flatpickr('#multiDatePicker', {
            mode: 'multiple',
            dateFormat: 'Y-m-d',
            static: true,
            defaultDate: "{{ old('month_date_range', $task['month_date_range'] ?? '') }}",
            allowInput: true,
            onReady: function(selectedDates, dateStr, instance) {
                instance.calendarContainer.classList.add('open');
            },
            onClose: function(selectedDates, dateStr, instance) {
                instance.open();
            },
        });
    });
    $(document).ready(function() {
        let reminderType = {
            !!json_encode($task['task_repeat'] ?? '') !!
        };

        console.log("Initial Reminder Type:", reminderType);

        const reminderWeekly = $(".task-reminder-weekly");
        const reminderMonthly = $(".task-reminder-monthly");
        const textArea = $('.text-area');

        function toggleFields(value) {
            textArea.removeClass('col-6 col-12');
            textArea.addClass(value === "weekly" || value === "monthly" ? 'col-6' : 'col-12');

            reminderWeekly.hide();
            reminderMonthly.hide();

            if (value === "weekly") {
                reminderWeekly.show();
            } else if (value === "monthly") {
                reminderMonthly.show();
            }
        }

        // Run on page load
        toggleFields(reminderType);

        // Event Listener for Select Change
        $('.task-reminder').on('change', function() {
            let selectedValue = $(this).val();
            console.log("Selected Reminder Type:", selectedValue);
            toggleFields(selectedValue);
        });
    });

    $('#task_reminder').on('input', function() {
        if ($(this).val() < 0) {
            $(this).val("");
        }
    });
    $('#task_reminder').on('keydown', function(e) {
        if (e.key === '-' || e.key === 'Subtract') {
            e.preventDefault();
        }
    });
    $(document).ready(function() {
        $("#tags").select2({
            tags: true,
            tokenSeparators: [',', ' '],
            placeholder: "Select or add new tags",
            allowClear: true,
            width: '100%',
            search: true
        });
    });
    // CK-5 Editor for task form (edit and create)
    ClassicEditor
        .create(document.querySelector('#text_editor'), {
            toolbar: [
                'heading', 'paragraph',
                'bold', 'italic', 'underline', 'strike', 'code', '|',
                'fontFamily', 'fontSize', 'fontColor', 'bgColor', '|',
                'link', 'unlink', 'insertImage', 'insertTable', 'mediaEmbed', 'emoji', 'insertVideo', 'horizontalLine', '|',
                'bulletedList', 'numberedList', 'blockQuote', '|',
                'alignment', 'indent', 'outdent', '|',
                'subscript', 'superscript', '|',
                'findAndReplace', 'removeFormat', 'selectAll', 'styles', 'format', 'paragraph', '|',
                'source', 'showBlocks', 'spellChecker', 'language', 'insertDateTime', 'specialChar', '|',
                'undo', 'redo', '|'
            ],
        })
        .catch(error => {
            console.error(error);
        });
</script>
@endpush