@extends('layouts.master')

@section('mainContent')
    <div class="page-wrapper">
        <div class="page-header-link">
            <a href="javascript:;" class="show-menuheader">
                Project Menus
                <i class="fas fa-align-left ms-auto"></i>
            </a>
        </div>
        <div class="page-menu">
            <div class="page-menu-header">
                <h2>Project Menu</h2>
                <a href="javascript:;" class="close-header-menu"> <i class="fas fa-close"></i></a>
            </div>
            <input type="hidden" name="page" value="{{ $page }}" id="page">

            @include('layouts.tenants.project-header-menu')

        </div>
        <div class="content">
            <div class="row">
                <div class="col-12">
                    <div class="page-header">
                        <h3>Milestones</h3>
                        <ul>
                            <li class="text-primary">Project Management</li>
                            <li><a href="javascript:;">Milestones</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 d-flex widget-path widget-service">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="datatable-search"></div>
                                </div>
                                <div class="col-lg-8">
                              
                                <ul class="btn-header-split"> 
                                        <li>
                                        <div class="project_lists">
                                            <select class="select" name="project_id" id="project_id">
                                                <option value="">Select Project</option>   
                                                @if(!empty($projects))
                                                    @foreach($projects as $row)
                                                        <option value="{{ $row->id }}" @selected(session('project_id')==$row->id)>{{ $row->project_name.' - '.$row->project_id }}</option>
                                                    @endforeach 
                                                @endif
                                               </select>
                                            </div>
                                            </li>
                                            <li>

                                        @if(Auth::user()->hasPermission('milestones','create')) 
                                        <a href="#" class="btn btn-primary" id="add-milestone-click"><i class="fe fe-plus me-2"></i>New Milestones</a>
                                        @endif
                                        <!-- data-bs-toggle="modal" data-bs-target="#add-milestone"  -->
                                        </li>
                                        <li>
                                        <a href="{{ url('milestone/export/excel') }}" class="btn btn-secondary-outline">Export<i class="fe fe-copy ms-2"></i></a>
                                        </li> 
                                    
                                    </ul>
                                </div>
                            </div>
                        <div class="table-responsive">
                            <table class="table" id="milestone_table">
                                <thead>
                                    <tr>
                                    <th>Milestone Name</th>
                                    <th>Category</th>
                                    <th>Owner</th>
                                    <th>Start date</th>
                                    <th>End date</th>
                                    <th>Priority</th>
                                    <th>Completion</th>
                                    <th>Status</th> 
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="datatable-paginate"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
        document.addEventListener('DOMContentLoaded', function() {
           
            localStorage.setItem('activeTab', '#nav-task');

            // Check if a tab was saved in the session
            const activeTab = "#nav-task";
            if (activeTab) {
            //     // Remove 'active' class from all tabs and tab panes
                document.querySelectorAll('.nav-link').forEach(tab => tab.classList.remove('active'));
                document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('show', 'active'));

            //     // Add 'active' class to the saved tab and its corresponding pane
                const savedTab = document.getElementById(activeTab);
                if (savedTab) {
                    savedTab.classList.add('active');
                    const targetPane = savedTab.getAttribute('data-bs-target');
                    if (targetPane) {
                        document.querySelector(targetPane).classList.add('show', 'active');
                    }
                }
            }
        });
        </script>
@endsection

@section('customModal')
<!-- Add -->
<div class="modal fade modal-customization" id="add-milestone" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Add Milestone</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fe fe-x"></i>
              </button>
            </div>
            <div id="form_message"> 
            <form id="milestoneForm">
            <div class="modal-body"> 
                <div class="row">
                    <div class="col-lg-6 col-12">
                        <div class="mb-3" id="milestone_name_div">
                            <label class="form-label">Milestone name <span class="manitory">*</span></label>
                            <input type="text" class="form-control" name="milestone_name" id="milestone_name" placeholder="Design phase">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6  col-md-12 ">                        
                        <div class="mb-3" id="category_div">
                            <label class="form-label">Category <span class="manitory">*</span></label> 
                           <select class="select" name="category" id="category" >
                           <option value="">Select</option>
                           @if($category->count()>0) 
                                @foreach($category as $row)
                                    <option value="{{ $row->id }}">{{ $row->name }}</option>
                                @endforeach     
                            @endif  
                            </select>    
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6  col-md-12 ">
                        <div class="mb-3" id="start_date_div">
                            <label class="form-label">Start date <span class="manitory">*</span></label>
                            <div class="cal-icon">
                                <input type="text" name="start_date" id="start_date" class="form-control datepicker" placeholder="DD-MM-YYYY">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6  col-md-12 ">
                        <div class="mb-3" id="end_date_div">
                            <label class="form-label">End date <span class="manitory">*</span></label>
                            <div class="cal-icon">
                                <input type="text" class="form-control datepicker" name="end_date" id="end_date" placeholder="DD-MM-YYYY">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6  col-md-12 ">
                        <div class="mb-3" id="action_by_div">
                            <label class="form-label">Action by <span class="manitory">*</span></label>
                            <select class="select" name="action_by" id="action_by">
                            <option value="">Select</option>
                            @if($users->count()>0) 
                                @foreach($users as $row)
                                    <option value="{{ $row->id }}" {{ auth()->user()->id==$row->id?'selected':'' }}>{{ $row->first_name.' - '.$row->last_name }}</option>
                                @endforeach 
                            @endif
                            </select>
                             <!-- <input type="text" name="action_by" id="action_by" class="form-control" placeholder="Admin">  -->
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-12">
                        <div class="mb-3" id="priority_div">
                            <label class="form-label">Priority <span class="manitory">*</span></label>
                            <select class="select" name="priority" id="priority">
                            <option value="">Select</option>
                            @if($priority->count()>0) 
                                @foreach($priority as $row)
                                    <option value="{{ $row->id }}">{{ $row->name }}</option>
                                @endforeach   
                            @endif   
                            </select>   
                            </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" id="add_milestone_save">Create New</button>
              <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Cancel</button>
            </div>
        </form>
          </div>
        </div>
    </div>
</div>
<!-- /Add -->
<!-- Edit -->
 
<!-- /Edit -->



@endsection