@extends('layouts.app')

@section('title', 'Home Page')

@section('header', 'Dashboard')

@section('content')
    <style>
        .bg-holder {
            position: absolute;
            width: 100%;
            min-height: 100%;
            top: 0;
            left: 0;
            background-size: cover;
            background-position: center;
            overflow: hidden;
            will-change: transform, opacity, filter;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            background-repeat: no-repeat;
            z-index: 0;
        }

        .badge-phoenix-warning {
            background: #ffefca;
            color: #bc3803;
            border-color: #ffcc85;
        }

        .badge-phoenix {
            text-transform: uppercase;
            padding: 2px 8px;
            background-color: #ffefca;
            color: #bc3803;
            border: 1px solid #ffcc85;
        }
        .border-1 {
            border: 1px solid #cbd0dd !important;
        }
        /* .gantt-roadmap-chart {
          height: 300px;
        } */
    </style>
    <div class="container">
        <!-- Display Success Message -->
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <!-- Display Error Messages -->
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Main Content -->
        <div class="row">
            <div class="col-md-9 col-auto">
                <h2 class="mb-2 text-body-emphasis">Projects Dashboard</h2>
                <p class="text-body-tertiary">Here’s what’s going on at your business right now</p>
            </div>
            <div class="col-md-3 col-auto">
             <div class="input-group" id="datepicker-container">
              <input type="text" class="form-control" id="datetimepicker" />
              <span class="input-group-text" id="calendar-icon">
                {{-- <i class="bi bi-calendar-event"></i> --}}
                <span class="uil uil-calendar-alt flatpickr-icon text-body-tertiary"></span>
              </span>
            </div>
            </div>
        </div>
        <div class="row mb-3 mt-4">
            <div class="col-12 col-xxl-2">
                <div class="row align-items-center h-100 align-content-between">
                    <div class="col-12 col-sm-6 col-md-3 col-lg-6 col-xl-3 col-xxl-12">
                        <div class="d-flex align-items-center"><span class="fs-1 uil uil-books text-primary-dark"></span>
                            <div class="ms-2">
                                <div class="d-flex align-items-end">
                                    <h2 class="mb-0 me-2 text-body-emphasis">32</h2><span class="fs-7">Projects</span>
                                </div>
                                <p class="text-body-secondary fs-9 mb-0">Awating processing</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 col-lg-6 col-xl-3 col-xxl-12">
                        <div class="d-flex align-items-center"><span
                                class="fs-1 lh-1 uil uil-users-alt text-success-dark"></span>
                            <div class="ms-2">
                                <div class="d-flex align-items-end">
                                    <h2 class="mb-0 me-2 text-body-emphasis">94</h2><span class="fs-7">Members</span>
                                </div>
                                <p class="text-body-secondary fs-9 mb-0">Working hard</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 col-lg-6 col-xl-3 col-xxl-12">
                        <div class="d-flex align-items-center"><span
                                class="fs-1 lh-1 uil uil-invoice text-warning-dark"></span>
                            <div class="ms-2">
                                <div class="d-flex align-items-end">
                                    <h2 class="mb-0 me-2 text-body-emphasis">23</h2><span class="fs-7">Invoices</span>
                                </div>
                                <p class="text-body-secondary fs-9 mb-0">Soon to be cleared</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 col-lg-6 col-xl-3 col-xxl-12">
                        <div class="d-flex align-items-center"><span
                                class="fs-1 lh-1 uil uil-refresh text-danger-dark"></span>
                            <div class="ms-2">
                                <div class="d-flex align-items-end">
                                    <h2 class="mb-0 me-2 text-body-emphasis">3</h2><span class="fs-7">Refunds</span>
                                </div>
                                <p class="text-body-secondary fs-9 mb-0">Fresh start</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-6 col-xxl-5">
                <div class="mx-xxl-0">
                    <h3 class="text-body-emphasis">Project: zero Roadmap</h3>
                    <p class="text-body-tertiary">Phase 2 is now ongoing</p>
                    <div class="gantt-container">
                        <div class="row g-2 flex-between-center mb-3 justify-content-between">
                            <div class="col-12 col-sm-auto">
                                <div class="d-flex">
                                    <div class="d-flex align-items-end me-3"><label class="form-check-label me-2 text-body"
                                            for="progress">Progress</label>
                                        <div class="form-check form-switch min-h-auto mb-0"><input class="form-check-input"
                                                id="progress" type="checkbox" checked=""
                                                data-gantt-progress="data-gantt-progress"></div>
                                    </div>
                                    <div class="d-flex align-items-end flex-1"><label
                                            class="form-check-label me-2 text-body" for="links">Links</label>
                                        <div class="form-check form-switch min-h-auto flex-1 mb-0"><input
                                                class="form-check-input" id="links" type="checkbox" checked=""
                                                data-gantt-links="data-gantt-links"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-auto">
                                <div class="btn-group" role="group" data-gantt-scale="data-gantt-scale"><input
                                        class="btn-check" id="weekView" type="radio" name="scaleView" value="week"
                                        checked=""><label
                                        class="btn btn-phoenix-secondary bg-body-highlight-hover fs-10 py-1 mb-0 px-4"
                                        for="weekView">Week</label><input class="btn-check" id="monthView" type="radio"
                                        name="scaleView" value="month"><label
                                        class="btn btn-phoenix-secondary bg-body-highlight-hover fs-10 py-1 mb-0 px-4"
                                        for="monthView">Month</label><input class="btn-check" id="yearView" type="radio"
                                        name="scaleView" value="year"><label
                                        class="btn btn-phoenix-secondary bg-body-highlight-hover fs-10 py-1 mb-0 px-4"
                                        for="yearView">Year</label></div>
                            </div>
                        </div>
                        <div class="gantt-roadmap-chart" id="gantt-roadmap-chart" style="width:100%; height:250px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-6 col-xxl-5">
                <div class="card border-1 h-100 w-100 overflow-hidden">
                    <div class="bg-holder d-block"
                        style="background-image:url(https://prium.github.io/phoenix/v1.22.0/assets/img/spot-illustrations/32.png);background-position: top right;">
                    </div>
                    <!--/.bg-holder-->
                    <div class="d-dark-none">
                        <div class="bg-holder"
                            style="background-image:url(	https://prium.github.io/phoenix/v1.22.0/assets/img/spot-illustrations/21.png);background-position: bottom right; background-size: auto;">
                        </div>
                        <!--/.bg-holder-->
                    </div>
                    <div class="card-body px-5 position-relative">
                        <div class="badge badge-phoenix fs-10 badge-phoenix-warning mb-4"><span class="fw-bold">Coming
                                soon</span><svg class="svg-inline--fa fa-award ms-1" style="height: 13px;" aria-hidden="true" focusable="false"
                                data-prefix="fas" data-icon="award" role="img" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 384 512" data-fa-i2svg="">
                                <path fill="currentColor"
                                    d="M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 
                                    6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3
                                     25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 
                                     14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 
                                     366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5
                                      301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 
                                      156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 
                                      18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3
                                       441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 
                                       10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 
                                       .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 
                                       1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 
                                       49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z">
                                </path>
                            </svg><!-- <span class="fa-solid fa-award ms-1"></span> Font Awesome fontawesome.com --></div>
                        <h3 class="mb-5 text-body-emphasis">Early bird gets the warm leads!</h3>
                        <p class="fs-5">CRM Dashboard is coming to market <br>
                           soon for fulfilling your every <br>
                          CRM related needs. </p>
                    </div>
                    <div class="card-footer border-0 py-0 px-5 z-1" style="background-color:rgb(255 255 255 / 3%);">
                        {{-- <p class="fs-5">Follow <a href="https://themewagon.com/">ThemeWagon
                            </a>at <br class="d-none d-xxl-block">Bootstrap Marketplace for updates.</p> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
<script src="{{ asset('assets/libs/dhtmlxgantt/dhtmlxgantt.js') }}"></script>
    <script>
        $(document).ready(function () {
          $('#datetimepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true,
          });

          // Open datepicker when calendar icon is clicked
          $('#calendar-icon').click(function () {
            $('#datetimepicker').datepicker('show');
          });
          
        // const tasks = [
        //     {
        //         id: 'Task 1',
        //         name: '	Planning',
        //         start: '2019-08-01',
        //         end: '2019-08-04',
        //         progress: 30,
        //         dependencies: ''
        //     },
        //     {
        //         id: 'Task 2',
        //         name: 'Research',
        //         start: '2019-08-02',
        //         end: '2019-08-07',
        //         progress: 10,
        //         dependencies: 'Task 1'
        //     },
        //     {
        //         id: 'Task 3',
        //         name: '	Design',
        //         start: '2019-08-02',
        //         end: '2019-08-12',
        //         progress: 10,
        //         dependencies: 'Task 2'
        //     },
        //     {
        //         id: 'Task 4',
        //         name: '	Review',
        //         start: '2019-08-05',
        //         end: '2019-08-10',
        //         progress: 10,
        //         dependencies: 'Task 2'
        //     },
        //     {
        //         id: 'Task 5',
        //         name: 'Develop',
        //         start: '2019-08-06',
        //         end: '2019-08-16',
        //         progress: 10,
        //         dependencies: 'Task 3'
        //     },
        // ];

        // new Gantt("#gantt-roadmap-chart", tasks);

        // second way
          if (window.gantt) {
            zeroRoadmapChartInit();
          } else {
            console.error("Gantt library not loaded");
          }

              
                });
        const zeroRoadmapChartInit = () => {
          const e = document.querySelector("#gantt-roadmap-chart");
          if (e) {
            const a = e;

            window.gantt.plugins({ tooltip: true });
            window.gantt.config.date_format = "%Y-%m-%d %H:%i";
            window.gantt.config.scale_height = 0;
            window.gantt.config.row_height = 36;
            window.gantt.config.bar_height = 12;
            window.gantt.config.drag_move = false;
            window.gantt.config.drag_progress = false;
            window.gantt.config.drag_resize = false;
            window.gantt.config.drag_links = false;
            window.gantt.config.details_on_dblclick = false;
            window.gantt.config.click_drag = false;
            window.gantt.config.rtl = false;

            const zoomLevels = {
              levels: [
                {
                  name: "month",
                  scales: [
                    { unit: "month", format: "%F, %Y" },
                    { unit: "week", format: "Week #%W" },
                  ],
                },
                {
                  name: "year",
                  scales: [{ unit: "year", step: 1, format: "%Y" }],
                },
                {
                  name: "week",
                  scales: [
                    {
                      unit: "week",
                      step: 1,
                      format: (date) => {
                        const formatFunc = window.gantt.date.date_to_str("%d %M");
                        const start = window.gantt.date.add(date, -6, "day");
                        return (
                          "#" +
                          window.gantt.date.date_to_str("%W")(date) +
                          ", " +
                          formatFunc(date) +
                          " - " +
                          formatFunc(start)
                        );
                      },
                    },
                    { unit: "day", step: 1, format: "%j %D" },
                  ],
                },
              ],
            };

            gantt.ext.zoom.init(zoomLevels);
            gantt.ext.zoom.setLevel("week");
            gantt.ext.zoom.attachEvent("onAfterZoom", (oldLevel, newLevel) => {
              const input = document.querySelector(`input[name=scaleView][value='${newLevel.name}']`);
              if (input) input.checked = true;
            });

            gantt.config.columns = [{ name: "text", width: 56, resize: true }];
            gantt.templates.task_class = (start, end, task) => task.task_class;
            gantt.timeline_cell_class = () => "weekend";
            gantt.templates.task_text = () => "";

            // gantt.templates.timeline_cell_class = function(date){
            //   if (date.getDay() === 0 || date.getDay() === 6) {
            //     return "weekend";
            //   }
            //   return "";
            // };
            
            window.gantt.init(a);

            window.gantt.parse({
              data: [
                { id: 1, text: "Planning", start_date: "2019-08-01 00:00", duration: 3, progress: 1, task_class: "planning" },
                { id: 2, text: "Research", start_date: "2019-08-02 00:00", duration: 5, progress: 0.5, task_class: "research" },
                { id: 3, text: "Design", start_date: "2019-08-02 00:00", duration: 10, progress: 0.4, task_class: "design" },
                { id: 4, text: "Review", start_date: "2019-08-05 00:00", duration: 5, progress: 0.8, task_class: "review" },
                { id: 5, text: "Develop", start_date: "2019-08-06 00:00", duration: 10, progress: 0.3, open: true, task_class: "develop" },
                { id: 6, text: "Review II", start_date: "2019-08-10 00:00", duration: 4, progress: 0.02, task_class: "review-2" },
              ],
              links: [
                { id: 1, source: 1, target: 2, type: "0" },
                { id: 2, source: 1, target: 3, type: "0" },
                { id: 3, source: 3, target: 4, type: "0" },
                { id: 4, source: 6, target: 5, type: "3" },
              ],
            });

            // Setup UI controls for toggles and zoom scale
            const progressCheckbox = document.querySelector("[data-gantt-progress]");
            const linksCheckbox = document.querySelector("[data-gantt-links]");
            const scaleRadios = document.querySelectorAll("input[name=scaleView]");

            if (progressCheckbox) {
              progressCheckbox.addEventListener("change", (e) => {
                window.gantt.config.show_progress = e.target.checked;
                window.gantt.render();
              });
            }

            if (linksCheckbox) {
              linksCheckbox.addEventListener("change", (e) => {
                window.gantt.config.show_links = e.target.checked;
                window.gantt.render();
              });
            }

            scaleRadios.forEach((radio) => {
              radio.addEventListener("click", (e) => {
                window.gantt.ext.zoom.setLevel(e.target.value);
              });
            });
          }
        };

    </script>
    @endsection('scripts')