@extends('dashboard.layouts.app')

@section('content')
    <style>
        .ui-card {
            border: 0;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .asset-col-6 {
            grid-column: span 6 / span 6;
        }

        .asset-col-4 {
            grid-column: span 4 / span 4;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select,
        .select2-container .select2-selection--single,
        .select2-container .select2-selection--multiple {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 12px !important;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .select2-container .select2-selection--single {
            display: flex !important;
            align-items: center;
        }
        .selection{
            width: 100%;
        }
        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 0 !important;
            padding-right: 1.5rem !important;
            color: #111827 !important;
            line-height: 1.5 !important;
        }

        .select2-container .select2-selection--single .select2-selection__arrow {
            height: 100% !important;
            right: 10px !important;
        }

        .select2-container .select2-selection--multiple {
            padding: 0.35rem 0.5rem !important;
        }

        .select2-container .select2-search--inline .select2-search__field {
            margin-top: 0 !important;
            height: 28px;
        }

        textarea.asset-input {
            min-height: 120px;
            resize: vertical;
        }

        .asset-input:focus,
        .asset-select:focus,
        .select2-container--default.select2-container--focus .select2-selection--multiple,
        .select2-container--default.select2-container--open .select2-selection--single {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .asset-invalid,
        .is-invalid + .select2-container .select2-selection,
        .asset-select.is-invalid,
        .asset-input.is-invalid {
            border-color: #dc3545 !important;
        }

        .assign-mode-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .assign-mode-card {
            display: block;
            cursor: pointer;
            margin: 0;
        }

        .assign-mode-card input {
            display: none;
        }

        .assign-mode-card__box {
            display: block;
            padding: 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #fff;
            transition: 0.2s ease;
            min-height: 110px;
        }

        .assign-mode-card__title {
            display: block;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.35rem;
        }

        .assign-mode-card__text {
            display: block;
            color: #6b7280;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .assign-mode-card input:checked + .assign-mode-card__box {
            border-color: #c7d2fe;
            background: #f8faff;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
        }

        .upload-box {
            border: 1px dashed #cbd5e1;
            border-radius: 16px;
            padding: 1rem;
            background: #f8fafc;
        }

        .upload-box__title {
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 0.25rem;
        }

        .upload-box__text {
            color: #64748b;
            font-size: 0.9rem;
            margin-bottom: 0.85rem;
        }

        .asset-actions {
            display: flex;
            justify-content: end;
            gap: 0.75rem;
            margin-top: 1rem;
        }

        @media (max-width: 991.98px) {
            .asset-col-6,
            .asset-col-4,
            .asset-col-12 {
                grid-column: span 12 / span 12;
            }

            .assign-mode-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>

    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Create New Task"
                    description="Create a task, define its schedule, assign it to staff or yourself, and attach supporting files if needed.">
                    <a href="{{ url()->previous() }}" class="asset-btn asset-btn--secondary">
                        Back
                    </a>
                </x-page-title>

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

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Task Information</h5>
                                <p class="form-section__sub mb-0">
                                    Fill in the main task details including title, type, description, priority, and status.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label for="task_name" class="asset-label">
                                        Task Name <span class="text-danger">*</span>
                                    </label>
                                    <input
                                        type="text"
                                        name="task_name"
                                        id="task_name"
                                        class="asset-input @error('task_name') asset-invalid @enderror"
                                        value="{{ old('task_name') }}"
                                        pattern="^[A-Za-z0-9\s]+$"
                                        title="Only letters, numbers, and spaces are allowed."
                                        required>
                                    @error('task_name')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="task_type" class="asset-label">
                                        Task Type <span class="text-danger">*</span>
                                    </label>

                                    @if($task_type == 'select')
                                        <select
                                            name="task_type"
                                            id="task_type"
                                            class="asset-select @error('task_type') asset-invalid @enderror"
                                            required>
                                            <option value="">Select Task Type</option>
                                            <option value="Report" {{ old('task_type') == 'Report' ? 'selected' : '' }}>Report</option>
                                            <option value="Meeting" {{ old('task_type') == 'Meeting' ? 'selected' : '' }}>Meeting</option>
                                            <option value="Training" {{ old('task_type') == 'Training' ? 'selected' : '' }}>Training</option>
                                            <option value="Follow-up" {{ old('task_type') == 'Follow-up' ? 'selected' : '' }}>Follow-up</option>
                                            <option value="Documentation" {{ old('task_type') == 'Documentation' ? 'selected' : '' }}>Documentation</option>
                                            <option value="Resignation" {{ old('task_type') == 'Resignation' ? 'selected' : '' }}>Resignation</option>
                                        </select>
                                    @else
                                        <input
                                            type="text"
                                            name="task_type"
                                            id="task_type"
                                            class="asset-input @error('task_type') asset-invalid @enderror"
                                            value="{{ old('task_type') }}"
                                            required>
                                    @endif

                                    @error('task_type')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label for="description" class="asset-label">Description</label>
                                    <textarea
                                        name="description"
                                        id="description"
                                        rows="4"
                                        class="asset-input @error('description') asset-invalid @enderror">{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="priority" class="asset-label">Priority</label>
                                    <select name="priority" id="priority" class="asset-select">
                                        <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High</option>
                                        <option value="medium" {{ old('priority', 'medium') == 'medium' ? 'selected' : '' }}>Medium</option>
                                        <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                    </select>
                                </div>

                                <div class="asset-col-6">
                                    <label for="status" class="asset-label">Status</label>
                                    <select name="status" id="status" class="asset-select">
                                        <option value="open" {{ old('status', 'open') == 'open' ? 'selected' : '' }}>Open</option>
                                        <option value="hold" {{ old('status') == 'hold' ? 'selected' : '' }}>On Hold</option>
                                        <option value="closed" {{ old('status') == 'closed' ? 'selected' : '' }}>Closed</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Assignment</h5>
                                <p class="form-section__sub mb-0">
                                    Choose whether this task should be assigned to yourself or to another staff member.
                                </p>
                            </div>

                            <div class="assign-mode-grid mb-3">
                                <label class="assign-mode-card">
                                    <input
                                        type="radio"
                                        name="assignment_mode"
                                        value="staff"
                                        {{ old('assign_to_me') ? '' : 'checked' }}>
                                    <span class="assign-mode-card__box">
                                        <span class="assign-mode-card__title">Assign to Staff</span>
                                        <span class="assign-mode-card__text">
                                            Select one staff member from the list below and assign the task directly.
                                        </span>
                                    </span>
                                </label>

                                <label class="assign-mode-card">
                                    <input
                                        type="radio"
                                        name="assignment_mode"
                                        value="me"
                                        {{ old('assign_to_me') ? 'checked' : '' }}>
                                    <span class="assign-mode-card__box">
                                        <span class="assign-mode-card__title">Assign to Myself</span>
                                        <span class="assign-mode-card__text">
                                            The task will be assigned to your own account instead of another staff member.
                                        </span>
                                    </span>
                                </label>
                            </div>

                            <input
                                type="hidden"
                                name="assign_to_me"
                                id="assign_to_me"
                                value="{{ old('assign_to_me') ? '1' : '' }}">

                            <div class="asset-form-grid">
                                <div class="asset-col-12" id="assign-staff-wrapper">
                                    <label for="staff_id" class="asset-label">
                                        Assign to Staff <span class="text-danger">*</span>
                                    </label>
                                    <select
                                        name="staff_id"
                                        id="staff_id"
                                        class="asset-select select2 @error('staff_id') asset-invalid is-invalid @enderror">
                                        <option value="">Select Staff</option>
                                        @foreach ($staffs as $staff)
                                            @if($staff->user_id != Auth::id())
                                                <option value="{{ $staff->id }}" {{ old('staff_id') == $staff->id ? 'selected' : '' }}>
                                                    {{ $staff->first_name . ' ' . $staff->last_name }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                    @error('staff_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label for="student_ids_direct" class="asset-label">
                                        Assign Students (Direct)
                                    </label>
                                    <select
                                        name="student_ids_direct[]"
                                        id="student_ids_direct"
                                        multiple
                                        class="asset-select select2 @error('student_ids_direct') asset-invalid is-invalid @enderror @error('student_ids_direct.*') asset-invalid is-invalid @enderror"
                                        data-placeholder="Search student by name or phone">
                                        @foreach (($directAssignableStudents ?? collect()) as $student)
                                            @php
                                                $studentName = trim(($student->full_name ?? '') ?: (($student->first_name ?? '') . ' ' . ($student->last_name ?? '')));
                                                $mobile = $student->getRawOriginal('mobile');
                                                $anotherMobile = $student->getRawOriginal('another_mobile');
                                                $phones = collect([$mobile, $anotherMobile])->filter()->unique()->implode(' / ');
                                            @endphp
                                            <option value="{{ $student->id }}" {{ in_array((string) $student->id, collect(old('student_ids_direct', []))->map(fn($v) => (string) $v)->all(), true) ? 'selected' : '' }}>
                                                {{ $studentName ?: ('Student #' . $student->id) }}{{ $phones ? ' - ' . $phones : '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('student_ids_direct')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    @error('student_ids_direct.*')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <div class="asset-select2-wrap">
                                        @include('dashboard.tasks.schedule-demo-student-modal')
                                     </div>

                                    @error('student_ids')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Schedule</h5>
                                <p class="form-section__sub mb-0">
                                    Set the timeline for the task including start, due, and optional reminder date.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-4">
                                    <label for="start_date" class="asset-label">
                                        Start Date <span class="text-danger">*</span>
                                    </label>
                                    <input
                                        type="date"
                                        name="start_date"
                                        id="start_date"
                                        class="asset-input @error('start_date') asset-invalid @enderror"
                                        value="{{ old('start_date') }}"
                                        required>
                                    @error('start_date')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-4">
                                    <label for="due_date" class="asset-label">
                                        Due Date <span class="text-danger">*</span>
                                    </label>
                                    <input
                                        type="date"
                                        name="due_date"
                                        id="due_date"
                                        class="asset-input @error('due_date') asset-invalid @enderror"
                                        value="{{ old('due_date') }}"
                                        required>
                                    @error('due_date')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-4">
                                    <label for="reminder" class="asset-label">Reminder Date</label>
                                    <input
                                        type="date"
                                        name="reminder"
                                        id="reminder"
                                        class="asset-input @error('reminder') asset-invalid @enderror"
                                        value="{{ old('reminder') }}">
                                    @error('reminder')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Attachments</h5>
                                <p class="form-section__sub mb-0">
                                    Upload one or more files to support the task details or related work items.
                                </p>
                            </div>

                            <div class="upload-box">
                                <div class="upload-box__title">Task Files</div>
                                <div class="upload-box__text">
                                    You can upload multiple attachments in one go.
                                </div>

                                <input
                                    type="file"
                                    name="attachments[]"
                                    id="attachments"
                                    class="asset-input @error('attachments') asset-invalid @enderror @error('attachments.*') asset-invalid @enderror"
                                    multiple>

                                @error('attachments')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror

                                @error('attachments.*')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="asset-actions">
                        <a href="{{ url()->previous() }}" 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>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            $('.select2').select2({
                allowClear: true,
                width: '100%'
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const assignToMeInput = document.getElementById('assign_to_me');
            const assignStaffWrapper = document.getElementById('assign-staff-wrapper');
            const staffSelect = document.getElementById('staff_id');
            const assignmentModeInputs = document.querySelectorAll('input[name="assignment_mode"]');

            function toggleAssignStaff() {
                const selectedMode = document.querySelector('input[name="assignment_mode"]:checked')?.value;

                if (selectedMode === 'me') {
                    assignStaffWrapper.style.display = 'none';
                    assignToMeInput.value = '1';
                    if (staffSelect) {
                        staffSelect.value = '';
                        $(staffSelect).trigger('change');
                    }
                } else {
                    assignStaffWrapper.style.display = 'block';
                    assignToMeInput.value = '';
                }
            }

            toggleAssignStaff();

            assignmentModeInputs.forEach((input) => {
                input.addEventListener('change', toggleAssignStaff);
            });
        });
    </script>
@endpush