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

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

        </div>
        <div class="content">
            <div class="row">
                <div class="col-12">
                    <div class="page-header">
                        <h3>Dependencies</h3>
                        <ul>
                            <li class="text-primary">Project Management </li>
                            <li><a href="javascript:;">Dependencies</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>
                                                    @foreach ($projects as $row)
                                                        <option value="{{ $row->id }}"
                                                            @if (session('project_id') == $row->id) selected @endif>
                                                            {{ $row->project_name . ' - ' . $row->project_id }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </li>
                                        @if (Auth::user()->hasPermission('dependencies', 'create'))
                                            <li>
                                                <a class="btn btn-primary" id="dependency-click" href="javascript:;"><i
                                                        class="fe fe-plus me-2"></i>New Dependency</a>
                                            </li>
                                        @endif
                                        <li>
                                        <a href="{{ url('dependencies/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="dependency_table">
                                    <thead>
                                        <tr>
                                            <th>Dependency Id</th>
                                            <th>Identified</th>
                                            <th>Critical dependencies</th>
                                            <th>Type</th>
                                            <th>Last update</th>
                                            <th>Impact Level</th>
                                            <th>Action</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() {
            // Check if a tab was saved in the session
           
            localStorage.setItem('activeDependencyTab', '#nav-critical');
            const activeTab = "#nav-critical";
            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')
    <div class="modal fade modal-customization adddependencymodal" id="manage-dependency" 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 Dependencies</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fe fe-x"></i>
                    </button>
                </div>
                <form id="manage_dependency_form">
                    <input type="hidden" name="dependency_id" value="">
                    <input type="hidden" name="page" value="dependency_list" id="page">
                    <div class="modal-body">
                        <div class="row">
                            {{-- <div class="col-lg-4 col-md-6 col-12">
                            <div class="mb-3">
                                <label class="form-label">Dependency ID</label>
                                <input type="text" class="form-control" value="#D00199" readonly>
                            </div>
                        </div> --}}
                            <div class="col-lg-4 col-md-6  col-md-12 ">
                                <div class="mb-3">
                                    <label class="form-label">Date Identified <span class="manitory">*</span></label>
                                    <div class="cal-icon">
                                        <input type="text" class="form-control datepicker" placeholder="DD-MM-YYYY"
                                            name="identified_on">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-12">
                                <div class="mb-3" id="identifydiv">
                                    <label class="form-label">Identified by <span class="manitory">*</span></label>
                                    <select class="select" name="identified_by">
                                        <option value="">Select User</option>
                                        @if (!$identify->isEmpty())
                                            @foreach ($identify as $identi)
                                                <option value="{{ $identi->id }}">
                                                    {{ $identi->first_name . ' ' . $identi->last_name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-12">
                                <div class="mb-3" id="ownerdiv">
                                    <label class="form-label">Owner <span class="manitory">*</span></label>
                                    <select class="select" name="owner">
                                        <option value="">Select User</option>
                                        @if (!$owner->isEmpty())
                                            @foreach ($owner as $own)
                                                <option value="{{ $own->id }}">
                                                    {{ $own->first_name . ' ' . $own->last_name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label class="form-label">Description <span class="manitory">*</span></label>
                                    <textarea class="form-control"
                                        placeholder="Please give a short description that should not be more than 255 characters." name="description"></textarea>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-12">
                                <div class="mb-3">
                                    <label class="form-label">Dependency type</label>
                                    <select class="select" name="depend_type" id="depend_type">
                                        <option value="Inbound">Inbound</option>
                                        <option value="Outbound">Outbound</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-12">
                                <div class="mb-3" id="impactdiv">
                                    <label class="form-label">Impact level <span class="manitory">*</span></label>
                                    <select class="select" name="impact_level">
                                        @if (!$impact->isEmpty())
                                            @foreach ($impact as $pact)
                                                <option value="{{ $pact->id }}">
                                                    {{ $pact->impact_name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-6 col-md-12 ">
                                <div class="mb-3" id="statusdiv">
                                    <label class="form-label">Status <span class="manitory">*</span></label>
                                    <select class="select" name="depend_status" id="depend_status">
                                        @if (!$statuses->isEmpty())
                                            @foreach ($statuses as $stsdata)
                                                <option value="{{ $stsdata->id }}">
                                                    {{ $stsdata->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label">Action taken <span class="manitory">*</span></label>
                                    <textarea class="form-control" placeholder="Please give a short action taken description that should not be more than 255 characters."
                                        name="action_taken"></textarea>
                                </div>
                            </div>

                            <div class="priority-cal">
                                <label class="form-label">Critical dependencies <span class="manitory">*</span></label>
                            </div>
                            <div class="priority-div" id="criticaldiv">
                                <div class="row">
                                    <table class="table">
                                        <tbody>
                                            <tr>
                                                <td style="width:1%">Task</td>
                                                <td>
                                                    <div class="d-flex align-items-center" id="taskdiv">
                                                        <input type="checkbox" class="dependency_type" data-id="task" name="critical_type[]" value="Task">
                                                        <select class="select dependency_select" disabled multiple name="critical_task[]" id="critical_task">
                                                        </select>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Risk</td>
                                                <td>
                                                    <div class="d-flex align-items-center" id="riskdiv">
                                                        <input type="checkbox" class="dependency_type" data-id="risk" name="critical_type[]" value="Risk">
                                                        <select class="select dependency_select" disabled multiple name="critical_risk[]" id="critical_risk">
                                                        </select>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Issues</td>
                                                <td>
                                                    <div class="d-flex align-items-center" id="issuediv">
                                                        <input type="checkbox" class="dependency_type" data-id="issue" name="critical_type[]" value="Issue">
                                                        <select class="select dependency_select" disabled multiple name="critical_issue[]" id="critical_issue"></select>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Incident</td>
                                                <td>
                                                    <div class="d-flex align-items-center" id="incidentdiv">
                                                        <input type="checkbox" class="dependency_type" data-id="incident" name="critical_type[]" value="Incident">
                                                        <select class="select dependency_select" disabled multiple name="critical_incident[]" id="critical_incident">
                                                       </select>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Milestone</td>
                                                <td>
                                                    <div class="d-flex align-items-center" id="milestonediv">
                                                        <input type="checkbox" class="dependency_type" data-id="milestone" name="critical_type[]" value="Milestone">
                                                        <select class="select dependency_select" disabled multiple name="critical_milestone[]" id="critical_milestone">
                                                        </select>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Create New</button>
                        <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
                <style>
                    .select2-search__field { width: auto !important; }
                </style>
            </div>
        </div>
    </div>
@endsection