@extends('Admin.layout')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="d-flex justify-content-between align-items-center mb-1">
    <!-- Left side -->
    <div class="d-flex align-items-center">
        <h5 class="mb-0">
            <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('view_pretask') }}"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            Create PreTask
        </h5>
    </div>
</div>

<div class="card p-4">

    <form action="{{ route('submit_pretask_form') }}" method="POST" id="submitForm">
        @csrf

        <div class="row">

            <!-- Project -->
            <div class="col-md-6 mb-3">
                <label>Project</label>

                <input type="text"
                    class="form-control"
                    value="{{ $projects->where('id', 13)->first()?->project_name }}"
                    readonly>

                <input type="hidden"
                    name="project"
                    value="13">
            </div>

            <!-- Module -->
            <!-- <div class="col-md-6 mb-3">
                <label>Module</label>
                <select name="module" class="form-select" required>
                    @foreach($modules as $module)
                    <option value="{{ $module->id }}"
                        {{ $module->id == 87 ? 'selected' : '' }}>
                        {{ $module->module_name }}
                    </option>
                    @endforeach
                </select>
            </div> -->
            <div class="col-md-6 mb-3">
                <label>Module</label>

                <input type="text"
                    class="form-control"
                    value="{{ $modules->where('id', 87)->first()?->module_name }}"
                    readonly>

                <input type="hidden"
                    name="module"
                    value="87">
            </div>

            <!-- Title -->
            <div class="col-md-6 mb-3">
                <label>Title</label>
                <input type="text" name="task_title"
                    value="{{old('task_title')}}"
                    class="form-control" placeholder="Enter Title" required>
                        @error('task_title')
            <small class="text-danger">{{ $message }}</small>
            @enderror
            </div>
        

            <!-- Days -->
            <div class="col-md-6 mb-3">
                <label>Days</label>
                <input type="number" name="days" min="1" value="{{ old('days', 45) }}" class="form-control" required>
            </div>

            <!-- Description -->
            <!-- <div class="col-md-12 mb-3">
                <label>Description</label>
                <textarea name="task_description" rows="5" class="form-control" placeholder="Type description...." required>{{ old('task_description') }}</textarea>
                    @error('task_description')
            <small class="text-danger">{{ $message }}</small>
            @enderror
            </div> -->

             <div class="col-lg-12 mb-3 mt-2">
                    <label class="form-label">Task Description<span class="text-danger">*</span></label>
                    <textarea class="form-control" id="task_description" name="task_description" rows="5"
                        placeholder="Enter Task Description">{{ old('task_description') }}</textarea>
                    @error('task_description')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
          




            <!-- Type -->
            <div class="col-md-6 mb-3">
                <label>Type</label>
                <select name="task_type" class="form-select" required>
                    <option value="">Select Type</option>
                    @foreach($roles as $role)
                    <option value="{{ $role->role }}" {{ old('task_type') == $role->role ? 'selected' : '' }}>
                        {{ ucfirst($role->role) }}
                    </option>
                    @endforeach
                </select>
                 @error('task_type')
            <small class="text-danger">{{ $message }}</small>
            @enderror
            </div>

            <!-- Tester -->
            <div class="col-md-6 mb-3">
                <label>Tester</label>

                @php
                $defaultTester = $testers->where('id', 16)->first();
                @endphp

                <input type="text"
                    class="form-control"
                    value="{{ $defaultTester?->name }}"
                    readonly>

                <input type="hidden"
                    name="tester"
                    value="16">
            </div>
            <!-- <div class="col-md-6 mb-3">
                <label>Tester</label>
                <select name="tester" class="form-select" required>
                    @foreach($testers as $tester)
                    <option value="{{ $tester->id }}"
                        {{ $tester->id == 16 ? 'selected' : '' }}>
                        {{ $tester->name }}
                    </option>
                    @endforeach
                </select>
            </div> -->
            <div class="mt-4">
                <button class="btn btn-primary me-3" id="finalsubmit" type="submit">Create Task</button>
                <button class="btn btn-secondary" type="reset">Discard</button>
            </div>

        </div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"
    integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous">
</script>
<script>
    document.getElementById('finalsubmit').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('submitForm').submit();
    });
</script>

<script src="https://cdn.ckeditor.com/ckeditor5/40.2.0/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#task_description'))
        .catch(error => {
            console.error(error);
        });
</script>
@endsection