@if ($errors->any())
    <div class="row">
        <div class="col-md-12">
            <div class="mb-3">
                <div class="alert alert-primary" role="alert">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endif


<div class="row">
    <div class="col-md-6">
        <div class="mb-3">
            <label class="col-form-label">
                Title <span class="text-danger">*</span>
            </label>
            <input type="text" wire:model="form.title" class="form-control">
            @error('form.title')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>
    <div class="col-md-6">
        <div class="mb-3">
            <label for="is_completed" class="col-form-label">Is Complete <span class="text-danger">*</span></label>
            <select id="is_completed" wire:model='form.is_completed' class="form-select">
                <option value="no" {{ $form->completed_at == null ? 'selected' : '' }}>No</option>
                <option value="yes" {{ $form->completed_at != null ? 'selected' : '' }}>Yes</option>
            </select>
            @error('form.is_completed')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>
    <div class="col-md-12">
        <div class="mb-3">
            <label for="task_note" class="col-form-label">Note <span class="text-danger">*</span></label>
            <textarea id="task_note" wire:model='form.task_note' class="form-control" rows="4"></textarea>
            @error('form.task_note')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>
    <div class="col-md-6" wire:ignore>
        <div class="mb-3">
            <label class="col-form-label">Due Date <span class="text-danger">*</span></label>
            <div class="icon-form">
                <span class="form-icon"><i class="ti ti-calendar-check"></i></span>
                <input id="task_due_date" type="text" value="" name="due_date" class="form-control" data-picker placeholder="Select Due Date" />
            </div>
            @error('form.due_date')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>
    <div class="col-md-6">
        <div class="mb-3">
            <label for="assigned_to" class="col-form-label">Assign To <span class="text-danger">*</span></label>
            <select id="assigned_to" wire:model='form.assigned_to' class="form-select">
                <option value="">Select Users</option>
                @foreach ($users as $user)
                    <option value="{{ $user->id }}">{{ $user->display_name }}</option>
                @endforeach
            </select>
            @error('form.assigned_to')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>
    <div class="col-md-6">
        <div class="mb-3">
            <label for="field_status" class="col-form-label">Status <span class="text-danger">*</span></label>
            <select id="field_status" wire:model="form.status" class="form-select">
                @foreach (config('env.status') as $k => $v)
                    <option value="{{ $k }}">{{ $v }}</option>
                @endforeach
            </select>
            @error('form.status')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>
</div>

@script
<script>
    $(document).ready(function () {
        ['is_completed', 'assigned_to', 'field_status'].forEach(function (id) {
            // For initial load
            $(`#${ id }`).select2({
                placeholder: ""
            });

            // For DOM reloads
            Livewire.hook('morphed', ({el, component}) => {
                $(`#${ id }`).select2({
                    placeholder: ""
                });
            });
        });
    })
</script>
@endscript