@extends('backend.layouts.app')

@section('store-name', $store->name)
@section( 'content' )
    

        <div class="kanban-board">

            <div class="kanban-block" id="todo" ondrop="drop(event)" ondragover="allowDrop(event)">
                <strong>Orders</strong>
                <div class="task-button-block">
                    <button id="task-button" onclick="createTask()">Create new task</span>
                </div>
                <div class="task" id="task1" draggable="true" ondragstart="drag(event)">
                    <span>Task 1</span>
                </div>
                <div class="task" id="task2" draggable="true" ondragstart="drag(event)">
                    <span>Task 2</span>
                </div>
                <div class="task" id="task3" draggable="true" ondragstart="drag(event)">
                    <span>Task 3</span>
                </div>
                <div class="task" id="task4" draggable="true" ondragstart="drag(event)">
                    <span>Task 4</span>
                </div>
                <div class="task" id="task5" draggable="true" ondragstart="drag(event)">
                    <span>Task 5</span>
                </div>
                <div class="task" id="task6" draggable="true" ondragstart="drag(event)">
                    <span>Task 6</span>
                </div>
            </div>

            <div class="kanban-block" id="inprogress" ondrop="drop(event)" ondragover="allowDrop(event)">
                <strong>Queue</strong>
            </div>

            <div class="kanban-block" id="done" ondrop="drop(event)" ondragover="allowDrop(event)">
                <strong>Acknowledge</strong>
            </div>
            <div class="create-new-task-block" id="create-new-task-block">
                <strong>New Task</strong>
                <span class="form-row">
                    <label class="form-row-label" for="task-name">Task</label>
                    <input class="form-row-input" type="text" name="task-name" id="task-name">
                </span>
                <span class="form-row">
                    <label class="form-row-label" for="task-name">Description</label>
                    <textarea class="form-row-input" name="task-description" id="task-description" cols="70" rows="10"></textarea>
                </span>
                <span class="form-row">
                    <label class="form-row-label" for="task-name">Status</label>
                    <select class="form-row-input" name="task-status" id="task-status">
                        <option value="todo">To Do</option>
                        <option value="inprogress">In Progress</option>
                        <option value="done">Done</option>
                    </select>
                </span>
                <span class="form-row-buttons">
                    <button id="edit-button" onclick="editTask()">Edit</span>
                    <button id="save-button" onclick="saveTask()">Save</span>
                    <button id="cancel-button" onclick="createTask()">Cancel</span>
                </span>
            </div>
        </div>

@endsection
    {{-- <script src="{{ asset( 'argon/vendor/jquery/jquery-3.2.1.min.js' ) }}"></script> --}}
    {{-- <script src="{{ asset( 'argon/vendor/jquery/jquery-ui.min.js' ) }}"></script> --}}
    
@section('after-scripts')
    <script src="{{ asset( 'js/store/store.js' ) }}" type="text/javascript"></script>
    <script src="{{ asset( 'js/order/order-kanban.js' ) }}" type="text/javascript"></script>
@endsection