@extends('Admin.layout')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    /* Select2 - match other inputs */
    #assign_to+.select2-container,
    #project+.select2-container {
        width: 100% !important;
    }

    #assign_to+.select2-container .select2-selection--single,
    #project+.select2-container .select2-selection--single {
        height: 38px;
        border: 1px solid #d9dee3;
        border-radius: 0.375rem;
        padding: 5px 12px;
        background-color: #fff;
    }

    #assign_to+.select2-container .select2-selection__rendered,
    #project+.select2-container .select2-selection__rendered {
        line-height: 26px;
        color: #697a8d;
    }

    #assign_to+.select2-container .select2-selection__arrow,
    #project+.select2-container .select2-selection__arrow {
        height: 36px;
    }
</style>
@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="#"> <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 Task
            </h5>
        </div>
    </div>
    <div class="col-12 d-flex justify-content-between gap-2">
        <div>
            <h6>Tasks</h6>
        </div>
        <a href="#">
            <button class="btn buttons-collection btn-primary" type="button" aria-haspopup="dialog" aria-expanded="false">
                <span class="d-flex align-items-center gap-2">
                    <i class="icon-base ti tabler-plus icon-xs me-sm-1"></i>
                    <span class="d-sm-inline-block">Create Module</span>
                </span>
            </button>
        </a>
    </div>
    <div class="card p-4">
        <h6>Create Tasks</h6>
        <form action="{{ route('add_task') }}" method="post" id="task_form">
            @csrf
            <div class="row">
                <div class="col-lg-6 mb-3 mt-2">
                    <label class="form-label">
                        Project<span class="text-danger">*</span>
                    </label>

                    <select id="project" name="project" class="form-select select2" required>
                        <option value="">Select Project</option>

                        @foreach ($projects as $project)
                            <option value="{{ $project->project_name }}"
                                data-project-id="{{ $project->id }}"
                                {{ old('project') == $project->project_name ? 'selected' : '' }}>
                                {{ $project->project_name }}
                            </option>
                        @endforeach
                    </select>

                    {{-- Actual project ID sent to controller --}}
                    <input type="hidden" name="project_id" id="project_id" value="{{ old('project_id') }}">

                    @error('project_id')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="col-lg-6 mb-3 mt-2">
                    <label class="form-label">Task Type<span class="text-danger">*</span></label>
                    <select class="form-select" name="task_type">
                        <option value="">Select Type</option>
                        <option value="ip" selected>IP</option>
                        <option value="bug">Bug</option>
                        <option value="cr">CR</option>
                        <option value="update">Update</option>
                    </select>
                    @error('task_type')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-6 mb-3 mt-2">
                    <label class="form-label">
                        Module Type<span class="text-danger">*</span>
                    </label>

                    <select id="module_type" class="form-select" name="module_type" required>
                        <option value="">Select Module Type</option>
                    </select>

                    @error('module_type')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="col-lg-6 mb-3 mt-2">
                    <label class="form-label">
                        Module Name<span class="text-danger">*</span>
                    </label>

                    <select id="module_name" name="module_id" class="form-select" required>
                        <option value="">Select Module Name</option>
                    </select>

                    {{-- Module name required by session_add_task() --}}
                    <input type="hidden" name="module_name" id="module_name_value">

                    @error('module_id')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="col-lg-6 mb-3 mt-2">
                    <label class="form-label">Task<span class="text-danger">*</span></label>
                    <input class="form-control" name="task_name" placeholder="Enter Task"
                        rows="4">{{ old('task_name') }}</input>
                    @error('task_name')
                        <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>
                <div class="col-lg-4 mb-3 mt-2">
                    <label class="form-label">Estimated Hours</label>
                    <input type="text" class="form-control" name="estimated_time" value="{{ old('estimated_time', 1) }}">
                    @error('estimated_time')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <!-- Start Date -->
                <div class="col-lg-4 mb-3 mt-2">
                    <label class="form-label"> Start Date<span class="text-danger">*</span></label>
                    <input type="date" class="form-control" name="start_date"
                        value="{{ old('start_date', date('Y-m-d')) }}">
                    @error('start_date')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <!-- Due Date -->
                <div class="col-lg-4 mb-3 mt-2">
                    <label class="form-label">Due Date<span class="text-danger">*</span></label>
                    <input type="date" class="form-control" name="due_date" value="{{ old('due_date', date('Y-m-d')) }}">
                    @error('due_date')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <!-- Assign To -->
                <div class="col-lg-6 mb-3 mt-2">
                    <label class="form-label">Assign To</label>
                    <select id="assign_to" class="form-select" name="assign_to">
                        <option value="">Select Staff</option>
                        @foreach ($staffs as $staff)
                            <option value="{{ $staff->id }}">{{ $staff->name }}</option>
                        @endforeach
                    </select>
                    @error('assign_to')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-6 mb-3 mt-2">
                    <label class="form-label">Select Tester</label>

                    <select name="tester_id" class="form-select">
                        <option value="">Select Tester</option>

                        @foreach($testers as $tester)
                            <option value="{{ $tester->id }}">
                                {{ $tester->name }}
                            </option>
                        @endforeach

                    </select>

                    @error('tester_id')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-6 mb-3 mt-2">
                    <label class="form-label">Priority<span class="text-danger">*</span></label>
                    <select class="form-select" name="priority">
                        <option value="">Select Type</option>
                        <option value="high" selected>High</option>
                        <option value="low">Low</option>
                        <option value="medium">Medium</option>
                    </select>
                    @error('task_type')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <!-- Task Name -->
                <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>
    <!-- <div class="modal fade" id="submit" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
                                                                    <div class="modal-dialog modal-sm modal-dialog-centered">
                                                                        <div class="modal-content rounded-4 text-center p-4 py-5">
                                                                            <h5 class="fw-bold mb-2">Are you sure!!</h5>
                                                                            <p class="text-muted">Are you confirm to submit ?</p>
                                                                            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                                                                                <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">
                                                                                    Cancel
                                                                                </button>
                                                                                <button type="submit" class="btn btn-primary p-3 fw-semibold " id="finalsubmit">
                                                                                    Yes, Sure
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </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 src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#assign_to').select2({
                placeholder: 'Select Staff',
                allowClear: true,
                width: '100%'
            });

            $('#project').select2({
                placeholder: '-- Select Project --',
                allowClear: true,
                width: '100%'
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Initialize DataTable
            new DataTable('#task', {
                language: {
                    search: "",
                    searchPlaceholder: "Search",
                    lengthMenu: "_MENU_"
                },
                lengthMenu: [
                    [10, 25, 50, 100, -1], // actual values
                    ["10", "25", "50", "100", "All"] // labels shown to user
                ]
            });
        });
        document.getElementById('finalsubmit').addEventListener('click', function (e) {
            e.preventDefault();
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('task_form').submit();
        });
        document.getElementById("exp").addEventListener("click", function () {
            let table = document.getElementById("task");
            if (!table) {
                alert("Table not found!");
                return;
            }
            // Get all table rows
            let rows = Array.from(table.querySelectorAll("tr"));
            // Build CSV content
            let csv = rows.map(row => {
                let cells = Array.from(row.querySelectorAll("th, td"));
                return cells.map(cell => {
                    let text = cell.innerText.trim(); // Remove extra spaces
                    // Optional: handle quotes inside text
                    text = text.replace(/"/g, '""');
                    return `"${text}"`;
                }).join(",");
            }).join("\n");
            // Create a blob and download
            let blob = new Blob([csv], {
                type: "text/csv;charset=utf-8;"
            });
            let url = URL.createObjectURL(blob);
            let a = document.createElement("a");
            a.href = url;
            a.download = "tasks.csv"; // File name
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });
    </script>
    <script>
$(document).ready(function () {

    let $project = $('#project');
    let $projectId = $('#project_id');
    let $moduleType = $('#module_type');
    let $moduleName = $('#module_name');
    let $moduleNameValue = $('#module_name_value');

    // When Project changes
    $project.on('change', function () {

        let selectedOption = $(this).find('option:selected');

        let projectName = $(this).val();
        let projectId = selectedOption.data('project-id');

        // Set project ID for session_add_task()
        $projectId.val(projectId || '');

        // Reset module dropdowns
        $moduleType.html(
            '<option value="">Select Module Type</option>'
        );

        $moduleName.html(
            '<option value="">Select Module Name</option>'
        );

        $moduleNameValue.val('');

        if (!projectName) {
            return;
        }

        $.ajax({
            url: "{{ route('create_task_separate') }}",
            type: "GET",
            data: {
                project: projectName
            },

            success: function (response) {

                let moduleTypes = [];

                $.each(response, function (index, module) {

                    if (
                        module.module_type &&
                        !moduleTypes.includes(module.module_type)
                    ) {

                        moduleTypes.push(module.module_type);

                        $moduleType.append(
                            '<option value="' +
                            module.module_type +
                            '">' +
                            module.module_type +
                            '</option>'
                        );
                    }
                });
            },

            error: function (xhr) {

                console.error(xhr.responseText);

                $moduleType.html(
                    '<option value="">Select Module Type</option>'
                );
            }
        });
    });


    // When Module Type changes
    $moduleType.on('change', function () {

        let moduleType = $(this).val();
        let projectName = $project.val();

        $moduleName.html(
            '<option value="">Loading...</option>'
        );

        $moduleNameValue.val('');

        if (!moduleType || !projectName) {

            $moduleName.html(
                '<option value="">Select Module Name</option>'
            );

            return;
        }

        $.ajax({
            url: "{{ route('create_task_separate') }}",
            type: "GET",

            data: {
                project: projectName,
                module_type: moduleType
            },

            success: function (response) {

                $moduleName.html(
                    '<option value="">Select Module Name</option>'
                );

                $.each(response, function (index, module) {

                    $moduleName.append(
                        '<option value="' +
                        module.id +
                        '" data-module-name="' +
                        module.module_name +
                        '">' +
                        module.module_name +
                        '</option>'
                    );
                });
            },

            error: function (xhr) {

                console.error(xhr.responseText);

                $moduleName.html(
                    '<option value="">Select Module Name</option>'
                );
            }
        });
    });


    // When Module Name is selected
    $moduleName.on('change', function () {

        let moduleName = $(this)
            .find('option:selected')
            .data('module-name');

        $moduleNameValue.val(moduleName || '');
    });

});

    </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