@extends('layout.layout')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title
                    title="Create Task"
                    description="Create a task, choose who should own it, and attach supporting files if needed."
                />

                <div class="ui-card">
                    <div class="ui-card__header">
                        <div>
                            <h6 class="mb-0 ui-title">Task Details</h6>
                            <p class="mb-0 ui-muted">Use “Assign to me” to save the task directly under your account.</p>
                        </div>
                    </div>

                    <div class="p-3 p-md-4">
                        <form action="{{ route('tasks.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                    <input type="text" id="title" name="title" class="form-control border border-2 border-secondary-subtle"
                                        value="{{ old('title') }}" required>
                                    @error('title')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-3">
                                    <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                    <select id="status" name="status" class="form-select border border-2 border-secondary-subtle" required>
                                        <option value="open" {{ old('status', 'open') === 'open' ? 'selected' : '' }}>Open</option>
                                        <option value="hold" {{ old('status') === 'hold' ? 'selected' : '' }}>Hold</option>
                                        <option value="closed" {{ old('status') === 'closed' ? 'selected' : '' }}>Closed</option>
                                    </select>
                                    @error('status')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-3">
                                    <label for="task_type" class="form-label">Task Type <span class="text-danger">*</span></label>
                                    <select id="task_type" name="task_type" class="form-select border border-2 border-secondary-subtle" required>
                                        <option value="a" {{ old('task_type', 'a') === 'a' ? 'selected' : '' }}>Type A</option>
                                        <option value="b" {{ old('task_type') === 'b' ? 'selected' : '' }}>Type B</option>
                                    </select>
                                    @error('task_type')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-12">
                                    <label for="description" class="form-label">Description</label>
                                    <textarea id="description" name="description" class="form-control border border-2 border-secondary-subtle" rows="4">{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-12">
                                    <label class="form-label d-block">Assignment <span class="text-danger">*</span></label>
                                    <div class="d-flex flex-wrap gap-3">
                                        <label class="form-check-label d-flex align-items-center gap-2">
                                            <input class="form-check-input" type="radio" name="assign_mode" value="me"
                                                {{ old('assign_mode', 'me') === 'me' ? 'checked' : '' }}>
                                            <span>Assign to me</span>
                                        </label>
                                        <label class="form-check-label d-flex align-items-center gap-2">
                                            <input class="form-check-input" type="radio" name="assign_mode" value="user"
                                                {{ old('assign_mode') === 'user' ? 'checked' : '' }}>
                                            <span>Assign to another user</span>
                                        </label>
                                    </div>
                                </div>

                                <div class="col-md-6" id="assignToUserWrap">
                                    <label for="assign_to" class="form-label">Assign To</label>
                                    <select id="assign_to" name="assign_to" class="form-select border border-2 border-secondary-subtle">
                                        <option value="">Select user</option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}" {{ (string) old('assign_to') === (string) $user->id ? 'selected' : '' }}>
                                                {{ $user->full_name ?: $user->email ?: 'User #'.$user->id }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('assign_to')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4">
                                    <label for="start_date" class="form-label">Start Date</label>
                                    <input type="date" id="start_date" name="start_date" class="form-control border border-2 border-secondary-subtle"
                                        value="{{ old('start_date') }}">
                                    @error('start_date')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4">
                                    <label for="end_date" class="form-label">End Date</label>
                                    <input type="date" id="end_date" name="end_date" class="form-control border border-2 border-secondary-subtle"
                                        value="{{ old('end_date') }}">
                                    @error('end_date')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4">
                                    <label for="reminder" class="form-label">Reminder</label>
                                    <input type="date" id="reminder" name="reminder" class="form-control border border-2 border-secondary-subtle"
                                        value="{{ old('reminder') }}">
                                    @error('reminder')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-12">
                                    <label for="attachments" class="form-label">Attachments</label>
                                    <input type="file" id="attachments" name="attachments[]" class="form-control border border-2 border-secondary-subtle"
                                        multiple>
                                    <div class="form-text">Accepted: JPG, PNG, PDF, DOC, DOCX, XLS, XLSX. Max 20MB each.</div>
                                    @error('attachments')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                    @error('attachments.*')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="d-flex flex-wrap gap-2 justify-content-end mt-4">
                                <a href="{{ route('tasks.index') }}" class="asset-btn asset-btn--secondary">Cancel</a>
                                <button type="submit" class="asset-btn asset-btn--primary">Save Task</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function toggleAssignUserField() {
            const assignMode = document.querySelector('input[name="assign_mode"]:checked')?.value;
            const assignToWrap = document.getElementById('assignToUserWrap');
            const assignToSelect = document.getElementById('assign_to');

            if (assignMode === 'user') {
                assignToWrap.style.display = '';
                assignToSelect.disabled = false;
            } else {
                assignToWrap.style.display = 'none';
                assignToSelect.disabled = true;
                assignToSelect.value = '';
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('input[name="assign_mode"]').forEach((radio) => {
                radio.addEventListener('change', toggleAssignUserField);
            });

            toggleAssignUserField();
        });
    </script>
@endpush