@extends('layouts.front.shell')

@section('cssdefine')

<script src="{{ asset('css/page/gantt-master/codebase/sources/dhtmlxgantt.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/page/gantt-master/codebase/sources/dhtmlxgantt.css') }}" type="text/css">

@endsection

@section('content')

<div id="content_area" class="shrink">
    <div class="w-100 content_layer rounded_lv4">
        <div class="container-fluid">
            <div class="row">
                <div class="col-auto">
                    <div class="cursor_pointer btn_icon_word icon_sm" onclick="history.back();" style="z-index: 1;">
                        <i class="fas fa-arrow-left"></i>
                    </div>
                </div>
                <div class="col main_title mb-3 mb-lg-0">[專案名稱]－甘特圖</div>
                <div class="col-auto">
                    <div class="row">
                        <div class="col-auto">
                            <div class="form-row">
                                <div class="col-auto">
                                    <button class="btn_text text_sm btn_primary" onclick="location.href=''"><i class="fa-solid fa-plus"></i>&ensp;建立會議</button>
                                </div>
                                <div class="col-auto">
                                    <button class="btn_text text_sm btn_primary"><i class="fa-solid fa-clipboard-list"></i>&ensp;會議記錄</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <button class="btn_text text_sm btn_primary" onclick="location.href='log_list.php';"><i class="fa-solid fa-book"></i>&ensp;工作日誌</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-4 justify-content-between">
                <div class="col-auto">
                    <div class="d-inline-flex align-items-center cursor_pointer" data-toggle="modal" data-target="#participant_modal">
                        <div>參與人：&ensp;</div>
                        <div class="crew_image shadow-sm">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                        <div class="crew_image shadow-sm">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                        <div class="crew_image shadow-sm">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                        <div class="more_count">+5</div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="d-inline-flex align-items-center cursor_pointer" data-toggle="modal" data-target="#principal_modal">
                        <div>負責人：&ensp;</div>
                        <div class="crew_image shadow-sm">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                        <div class="crew_image shadow-sm">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                        <div class="crew_image shadow-sm">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                        <div class="more_count">+5</div>
                    </div>
                </div>
            </div>
            <div id="gantt_here" class="mt-4" style='width:100%; min-height:50vh;'></div>
        </div>
    </div>

</div>

<div class="modal fade modal_style" id="participant_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">[專案名稱]-參與人</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="modal-body scrollbar_y">
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade modal_style" id="principal_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">[專案名稱]-負責人</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="modal-body scrollbar_y">
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
                <div class="row align-items-center crew_item">
                    <div class="col-auto">
                        <div class="crew_image shadow-sm border">
                            <img src="{{ asset('img/crew.jpg') }}" class="h-100 w-100 object_fit_cover rounded-circle">
                        </div>
                    </div>
                    <div class="col">[姓名]</div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection


@section('jsdefine')

<script>
    gantt.config.date_format = "%Y-%m-%d %H:%i";
    gantt.init("gantt_here");
    gantt.parse({
        data: [{
                id: 1,
                text: "專案 #1",
                start_date: null,
                duration: null,
                parent: 0,
                progress: 0,
                open: true
            },
            {
                id: 2,
                text: "任務 #1",
                start_date: "2022-11-11 00:00",
                duration: 5,
                parent: 1,
                progress: 1
            },
            {
                id: 3,
                text: "任務 #2",
                start_date: "2022-11-26 00:00",
                duration: 2,
                parent: 1,
                progress: 0.5
            },
            {
                id: 4,
                text: "任務 #3",
                start_date: null,
                duration: null,
                parent: 1,
                progress: 0.8,
                open: true
            },
            {
                id: 5,
                text: "任務 #3.1",
                start_date: "2022-11-19 00:00",
                duration: 2,
                parent: 4,
                progress: 0.2
            },
            {
                id: 6,
                text: "任務 #3.2",
                start_date: "2022-11-21 00:00",
                duration: 1,
                parent: 4,
                progress: 0
            }
        ],
        links: [{
                id: 1,
                source: 2,
                target: 3,
                type: "0"
            },
            {
                id: 2,
                source: 3,
                target: 4,
                type: "0"
            },
            {
                id: 3,
                source: 5,
                target: 6,
                type: "0"
            }
        ]
    });

    gantt.i18n.setLocale({
        labels: {
            new_task: "新任務",
            icon_save: "儲存",
            icon_cancel: "取消",
            icon_details: "詳細",
            icon_edit: "編輯",
            icon_delete: "刪除",
            gantt_save_btn: "新標籤",
            gantt_cancel_btn: "新標籤",
            gantt_delete_btn: "新標籤",
            confirm_closing: "", // Your changes will be lost, are you sure?
            confirm_deleting: "此任務將永久被刪除, 仍確定要刪除嗎?",
            section_description: "描述",
            section_time: "時間段",
            section_type: "Type",

            /* grid columns */
            column_wbs: "WBS",
            column_text: "任務名稱",
            column_start_date: "開始時間",
            column_duration: "期間",
            column_add: "",
        }
    });
</script>

@endsection