@extends('layouts.app')


@section('title', 'Add New Tasks')

{{-- custom css --}}
@push('css')
<link rel="stylesheet" href="{{ asset('assets/css/custom/workflow.css') }}">
<style>

</style>
@endpush

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

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

    <x-row-card>

        <x-slot:title>
            <h4 class="card-title">Add WorkFlow</h4>
        </x-slot:title>

        <x-form id="add-work-flow-form">
            <div class="row">
                <div class="mb-3 col-md-6">
                    <label class="form-label">Title<span class="text-danger"> *
                        </span></label>
                    <x-text-input name="workflow_title" placeholder="Enter Title "/>
                </div>

                <div x-data="tagDropdown()" class="row">
                    <!-- Use With Dropdown -->
                    <div class="mb-3 col-md-6">
                        <label class="form-label">Use With</label>
                        <select class="form-control form-control-sm" x-model="useWith" @change="fetchTags">
                            <option value="">Select Option</option>
                            <option value="contact">Contact</option>
                            <option value="property">Property</option>
                            <option value="transaction">Transaction</option>
                            <option value="task">Task</option>
                        </select>
                    </div>
                
                    <!-- Tags Dropdown -->
                    <div class="mb-3 col-md-6">
                        <label class="form-label">Tags<span class="text-danger"> *</span></label>
                        <select class="multi-select form-control form-control-sm" multiple="multiple" x-bind:disabled="!tags.length" x-model="selectedTags">
                            <template x-for="tag in tags" :key="tag">
                                <option x-text="tag"></option>
                            </template>
                        </select>
                    </div>
                </div>
                
                <script>
                    function tagDropdown() {
                        return {
                            useWith: '',    // Selected value for "Use With"
                            tags: [],       // Tags array populated by API
                            selectedTags: [],
                
                            // Fetch tags based on the 'Use With' dropdown
                            async fetchTags() {
                                if (this.useWith) {
                                    try {
                                        const response = await fetch(`/workflow-get-tags?use_with=${this.useWith}`);
                                        this.tags = await response.json();
                                        console.log(this.tags);
                                        
                                    } catch (error) {
                                        console.error("Error fetching tags:", error);
                                    }
                                } else {
                                    this.tags = [];  // Reset tags if no option is selected
                                }
                            }
                        }
                    }
                </script>
                
                {{-- <div class="mb-3 col-md-6">
                    <label class="form-label">Use With</label>
                    <select class="form-control form-control-sm" name="workflow_use_with" id="">
                        <option value=""> Select Option</option>
                        <option value="contact">Contact</option>
                        <option value="property">Property</option>
                        <option value="transaction">Transaction</option>
                        <option value="task">Task</option>
                    </select>
                </div>

                <div class="mb-3 col-md-6">
                    <label class="form-label">Tags<span class="text-danger"> *
                        </span></label>
                    <select class="multi-select form-control form-control-sm" multiple="multiple" name="workflow_tags" id="">
                        <option>#NewProperty</option>
                        <option>#Sale</option>
                        <option>#2024</option>
                    </select>
                </div> --}}
                
                <div class="mb-3 col-md-12">
                    <x-input-label for="description" :value="__('Description')" />
                    <x-text-area name="workflow_description" rows="4" placeholder="Workflow Description" />
                </div>
            </div>

            <x-work-flow.work-flow-activity-template :users="$users"/>


            <div class="mt-4 text-end">
                <x-button type="submit" class="btn-primary me-3 submit"> Add</x-button>
            </div>
        </x-form>
    </x-row-card>
</x-content-body>
@endsection


{{-- custom js --}}
@push('js')
<script>
    storeWrokFlowRoute = @json(route('workflows.store'));
    allWrokFlowRoute = @json(route('workflows.index'));
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="{{ asset('assets/js/custom/workflow.js') }}"></script>

<script>
     $('form[id="add-work-flow-form"]').validate({
        rules: {
            workflow_title: {
                required: true
            },
            workflow_use_with: {
                required: true
            },
            workflow_description: {
                required: true
            },
        },
        messages: {
            workflow_title: {
                required: "Title is required."
            },
            workflow_use_with: {
                required: "Use with is required."
            },
            workflow_description: {
                required: "Description is required."
            },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.after(error);
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid').removeClass('is-valid');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid').addClass('is-valid');
        },
        errorClass: 'text-danger',
        submitHandler: function (form) {
            // Correct the route for updating the transaction
            handleAjaxRequest(form, "#add-work-flow-form", storeWrokFlowRoute, null, allWrokFlowRoute, null, null);
        }
    });
</script>
@endpush