@extends('layouts.app')


@section('title', 'Add New 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__main ul {
        margin-left: 20px;
    }

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

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

    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;
        border-bottom: 3px solid rgb(228, 235, 241);
        /* Blue border 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">Add Task</h4>
        </x-slot:title>

        <x-form id="create-task-form">
            <div x-data="{setTime : '', repeat : ''}">
                <div class="row">
                    <div class="mb-6 col-md-6">
                        <x-input-label for="name" required="true" :value="__('Task Name')" />
                        <x-text-input name="task_name" id="name" placeholder="Enter Task Name" />
                    </div>
                    <div class="mb-6 col-md-6">
                        <label class="form-label">Assign To Agent </label>
                        <x-select name="agent_id" id="" :options="$users" default-option="Select Agent" class="multi-select"
                            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"
                            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"
                            default-option="Select Property" empty-option="Property Not Found" />
                    </div>

                    <!-- start date  -->
                    <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" id="start_date"
                            name="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">
                    </div>

                    <!-- type  -->
                    <div class="mb-6 col-md-6 mt-3">
                        <x-input-label for="type" :value="__('Task Type')" />
                        <x-select name="task_type" id="assignTo" class="multi-select"
                            :options="[ 'Follow Up' => 'Follow Up', 'Email' => 'Email', 'Call' => 'Call','Meeting' => 'Meeting']"
                            default-option="To Do" />
                    </div>
                    <!-- Priority -->
                    <div class="mb-6 col-md-6 mt-3">
                        <x-input-label for="priority" :value="__('Task Priority')" />
                        <x-select name="priority" id="priority" class="multi-select"
                            :options="[ 'Low' => 'Low','Medium' => 'Medium', 'High' => 'High']"
                            default-option="None" />
                    </div>

                    <!-- tags -->
                    <div class="mb-6 col-md-6 mt-3">
                        <x-input-label for="tags" :value="__('Tags/Properties of Interest')" />
                        <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">Affordable Housing</option>
                                <option value="aircraft_hangar">Aircraft Hangar</option>
                                <option value="amusement_park">Amusement Park</option>
                                <option value="animal_boarding_kennel">Animal Boarding/Kennel</option>
                                <option value="auto_body_shop">Auto Body Shop</option>
                                <option value="auto_dealership">Auto Dealership</option>
                                <option value="auto_repair">Auto Repair</option>
                                <option value="auto_sales">Auto Sales</option>
                                <option value="bank">Bank</option>
                                <option value="bar_tavern">Bar/Tavern</option>
                                <option value="brewery">Brewery</option>
                                <option value="bulk_warehouse">Bulk Warehouse</option>
                                <option value="campground">Campground</option>
                                <option value="camping_grounds">Camping Grounds</option>
                                <option value="casino">Casino</option>
                                <option value="cement_gravel_facility">Cement/Gravel Facility</option>
                                <option value="cemetery_mausoleum">Cemetery/Mausoleum</option>
                                <option value="chemical_oil_refinery">Chemical/Oil Refinery</option>
                                <option value="church_religious_facility">Church/Religious Facility</option>
                                <option value="cold_storage">Cold Storage</option>
                                <option value="community_center">Community Center</option>
                                <option value="convenience_store">Convenience Store</option>
                                <option value="correctional_facility">Correctional Facility</option>
                                <option value="crematorium">Crematorium</option>
                                <option value="day_care">Day Care</option>
                                <option value="data_center">Data Center</option>
                                <option value="dental_office">Dental Office</option>
                                <option value="distribution_center">Distribution Center</option>
                                <option value="drive_thru_restaurant">Drive-Thru Restaurant</option>
                                <option value="dry_cleaner">Dry Cleaner</option>
                                <option value="education_facility">Education Facility</option>
                                <option value="event_space">Event Space</option>
                                <option value="event_venue">Event Venue</option>
                                <option value="farm_agricultural">Farm/Agricultural</option>
                                <option value="fast_food_restaurant">Fast Food Restaurant</option>
                                <option value="financial_institution">Financial Institution</option>
                                <option value="financial_services_office">Financial Services Office</option>
                                <option value="fitness_center_gym">Fitness Center/Gym</option>
                                <option value="flex_space">Flex Space</option>
                                <option value="funeral_home">Funeral Home</option>
                                <option value="gas_station">Gas Station</option>
                                <option value="golf_course">Golf Course</option>
                                <option value="grocery_store">Grocery Store</option>
                                <option value="health_care">Health Care</option>
                                <option value="health_clinic">Health Clinic</option>
                                <option value="hospital">Hospital</option>
                                <option value="hospitality">Hospitality</option>
                                <option value="hotel_motel">Hotel / Motel</option>
                                <option value="integrative_health_center">Integrative Health Center</option>
                                <option value="laboratory">Laboratory</option>
                                <option value="land_for_development">Land for Development</option>
                                <option value="light_assembly">Light Assembly</option>
                                <option value="light_manufacturing">Light Manufacturing</option>
                                <option value="library">Library</option>
                                <option value="lumber_yard">Lumber Yard</option>
                                <option value="luxury_apartments">Luxury Apartments</option>
                                <option value="manufacturing_facility">Manufacturing Facility</option>
                                <option value="medical_lab">Medical Lab</option>
                                <option value="medical_office">Medical Office</option>
                                <option value="medical_office_building">Medical Office Building</option>
                                <option value="medical_urgent_care">Medical Urgent Care</option>
                                <option value="maternity_center">Maternity Center</option>
                                <option value="mid_rise_apartments">Mid-Rise Apartments</option>
                                <option value="mixed_use">Mixed-Use</option>
                                <option value="mixed_use_multi_family">Mixed-Use Multi-Family</option>
                                <option value="mixed_use_office">Mixed-Use Office</option>
                                <option value="mobile_home_park">Mobile Home Park</option>
                                <option value="movie_theater_cinema">Movie Theater/Cinema</option>
                                <option value="multi_family">Multi Family (4 or less)</option>
                                <option value="nursing_home">Nursing Home</option>
                                <option value="office">Office</option>
                                <option value="office_building">Office Building</option>
                                <option value="office_complex_large">Office Complex - Large</option>
                                <option value="office_complex_med">Office Complex - Medium</option>
                                <option value="office_complex_small">Office Complex - Small</option>
                                <option value="office_condo">Office Condo</option>
                                <option value="optometry_office">Optometry Office</option>
                                <option value="outpatient_clinic">Outpatient Clinic</option>
                                <option value="parking_garage">Parking Garage</option>
                                <option value="parking_lot">Parking Lot</option>
                                <option value="pain_management_clinic">Pain Management Clinic</option>
                                <option value="pharmacy">Pharmacy</option>
                                <option value="physical_therapy_office">Physical Therapy Office</option>
                                <option value="police_station">Police Station</option>
                                <option value="post_office">Post Office</option>
                                <option value="power_plant">Power Plant</option>
                                <option value="quick_service_restaurant">Quick Service Restaurant</option>
                                <option value="recycling_center">Recycling Center</option>
                                <option value="recycling_facility">Recycling Facility</option>
                                <option value="rehab_center">Rehab Center</option>
                                <option value="religious_facility">Religious Facility</option>
                                <option value="research_development_facility">Research and Development (R&D) Facility</option>
                                <option value="research_development_office">R&D (Research and Development) Office</option>
                                <option value="restaurant">Restaurant</option>
                                <option value="retail">Retail</option>
                                <option value="retail_space">Retail Space</option>
                                <option value="retail_strip_center">Retail Strip Center</option>
                                <option value="rv_park">RV Park</option>
                                <option value="shelter">Shelter</option>
                                <option value="shopping_mall">Shopping Mall</option>
                                <option value="showroom">Showroom</option>
                                <option value="ski_resort">Ski Resort</option>
                                <option value="sports_complex">Sports Complex</option>
                                <option value="sports_entertainment">Sports & Entertainment</option>
                                <option value="stadium">Stadium</option>
                                <option value="student_housing">Student Housing</option>
                                <option value="supermarket">Supermarket</option>
                                <option value="technology_office">Tech Office</option>
                                <option value="telehealth_center">Telehealth Center</option>
                                <option value="theme_park">Theme Park</option>
                                <option value="trailer_park">Trailer Park</option>
                                <option value="truck_stop">Truck Stop</option>
                                <option value="truck_terminal">Truck Terminal</option>
                                <option value="truck_terminal_parking">Truck Terminal & Parking</option>
                                <option value="utility_sub_station">Utility Sub-Station</option>
                                <option value="urgent_care_center">Urgent Care Center</option>
                                <option value="vineyard">Vineyard</option>
                                <option value="veterinary_clinic">Veterinary Clinic</option>
                                <option value="water_park">Water Park</option>
                                <option value="warehouse">Warehouse</option>
                                <option value="workforce_housing">Workforce Housing</option>
                                <option value="tax_sales">Tax Sales</option>
                                <option value="foreclosures">Foreclosures</option>
                                <option value="short_sales">Short Sales</option>
                                <option value="reo_properties">REO (Real Estate Owned) Properties</option>
                                <option value="commercial_real_estate">Commercial Real Estate</option>
                                <option value="luxury_real_estate">Luxury Real Estate</option>
                                <option value="investment_properties">Investment Properties</option>
                                <option value="new_construction_sales">New Construction Sales</option>
                                <option value="property_management">Property Management</option>
                                <option value="land_sales">Land Sales</option>
                                <option value="acquisition_and_development">Acquisition and Development</option>
                                <option value="senior_housing_real_estate">Senior Housing Real Estate</option>
                                <option value="first_time_home_buyers">First-Time Home Buyers</option>
                                <option value="vacation_and_second_homes">Vacation and Second Homes</option>
                                <option value="industrial_real_estate">Industrial Real Estate</option>
                                <option value="retail_real_estate">Retail Real Estate</option>
                                <option value="relocation_services">Relocation Services</option>
                                <option value="lease_negotiation">Lease Negotiation</option>
                                <option value="real_estate_consulting">Real Estate Consulting</option>
                                <option value="auction_properties">Auction Properties</option>
                                <option value="multi_family_properties">Multi-Family Properties</option>
                                <option value="corporate_real_estate_services">Corporate Real Estate Services</option>
                                <option value="agricultural_real_estate">Agricultural Real Estate</option>
                                <option value="green_and_sustainable_real_estate">Green and Sustainable Real Estate</option>
                                <option value="historic_property_sales">Historic Property Sales</option>
                                <option value="affordable_housing">Affordable Housing</option>
                                <option value="estate_liquidation">Estate Liquidation</option>
                                <option value="asset_management">Asset Management</option>
                                <option value="real_estate_investment_trusts">Real Estate Investment Trusts (REITs)</option>
                                <option value="distressed_property_sales">Distressed Property Sales</option>
                                <option value="condo_and_coop_sales">Condo and Co-Op Sales</option>
                                <option value="manufactured_and_mobile_home_sales">Manufactured and Mobile Home Sales</option>
                                <option value="leasing_specialist">Leasing Specialist</option>
                                <option value="real_estate_analytics_and_research">Real Estate Analytics and Research</option>
                                <option value="real_estate_technology_specialist">Real Estate Technology Specialist</option>
                                <option value="title_and_escrow_services">Title and Escrow Services</option>
                                <option value="fha_va_loan_specialist">FHA/VA Loan Specialist</option>
                                <option value="commercial_leasing">Commercial Leasing</option>
                                <option value="other">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" x-data="{ setTime: false }">
                            <div>
                                <!-- Hidden input to always send a value -->
                                <input type="hidden" name="set_time" x-bind:value="setTime ? 1 : 0">

                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch"
                                        name="set_time" x-model="setTime">
                                </div>
                            </div>


                            <!-- this section depend on set time value  -->
                            <div x-show="setTime == true" x-clock>
                                <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" />
                                    </div>
                                    <div class="d-flex">
                                        <label class="form-label">End Time</label>
                                        <x-text-input type="time" class="end-time" name="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 class="" name="task_reminder" type="number" id="task_reminder" value="" placeholder="Enter Number" class="me-1" />
                            <div class="select-wrapper">
                                <select class="form-control form-control-sm " name="task_reminder_interval">
                                    <option value="">Select Option</option>
                                    <option value="minutes">Minutes</option>
                                    <option value="hour">Hours</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- reminder  -->
                    <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 " name="task_repeat" x-model="repeat">
                            <option value="">Select Type</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="monthly">Monthly</option>
                            <option value="yearly">Yearly</option>
                        </select>
                    </div>
                    <div class="row">
                        <div class="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('task_description') }} </textarea>
                            </div>
                        </div>
                        <div class="mb-6 col-6  mt-4">
                            <div class="mx-4 mt-4" x-show="repeat == 'weekly'" x-clock>
                                <div class="d-flex">
                                    <label for="days" class="w-25">Days:</label>
                                    <div class="days-checkboxes">
                                        <input type="checkbox" id="monday" name="week_days[]" value="monday">
                                        <label for="monday" class="me-2">Mo</label>
                                        <input type="checkbox" id="tuesday" name="week_days[]" value="tuesday">
                                        <label for="tuesday" class="me-2">Tu</label>
                                        <input type="checkbox" id="wednesday" name="week_days[]" value="wednesday">
                                        <label for="wednesday" class="me-2">We</label>
                                        <input type="checkbox" id="thursday" name="week_days[]" value="thursday">
                                        <label for="thursday" class="me-2">Th</label>
                                        <input type="checkbox" id="friday" name="week_days[]" value="friday">
                                        <label for="friday" class="me-2">Fr</label>
                                        <input type="checkbox" id="saturday" name="week_days[]" value="saturday">
                                        <label for="saturday" class="me-2">Sa</label>
                                        <input type="checkbox" id="sunday" name="week_days[]" value="sunday">
                                        <label for="sunday" class="me-2">Su</label>
                                    </div>
                                </div>
                            </div>

                            <div x-show="repeat == 'monthly'" x-clock>
                                <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') }}"
                                        placeholder="Select dates" style="width: 160%;">
                                </div>

                            </div>
                        </div>

                    </div>

                </div>

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

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


{{-- custom js --}}
@push('js')
<script>
    addTaskRoute = "{{ route('tasks.store') }}";
    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,
            allowInput: true,
            onReady: function(selectedDates, dateStr, instance) {
                instance.calendarContainer.classList.add('open');

                // Disable Month Dropdown
                const monthDropdown = instance.calendarContainer.querySelector('.flatpickr-monthDropdown-months');
                if (monthDropdown) {
                    monthDropdown.style.pointerEvents = 'none';
                    monthDropdown.style.opacity = '0.5';
                    monthDropdown.style.cursor = 'not-allowed';
                }
            },
            onClose: function(selectedDates, dateStr, instance) {
                instance.open();
            },
        });
    });
    $(".task-reminder").change(function() {

        let reminderType = $(this).val();
        const reminderWeekly = $(".task-reminder-weekly");
        const reminderMonthly = $(".task-reminder-monthly");
        const textArea = $('.text-area');
        textArea.removeClass('col-6 col-12');
        textArea.addClass(reminderType === "weekly" || reminderType === "monthly" ? 'col-6' : 'col-12');

        reminderWeekly.show();
        reminderMonthly.show();

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

    });



    $('#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