@extends('layouts.app')


@section('title', '')

{{-- custom css --}}
@push('css')
@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 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-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>
                    </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