@extends('layouts.sneat')

@section('content')
<div class="container">
    <h4 class="mb-4">CSF PRO Audit Checklist & Category Management</h4>
    @once
    @php
    if (!function_exists('renderOptions')) {
    function renderOptions($categories, $selectedId = null, $level = 0) {
    foreach ($categories as $category) {
    $isSelected = $category->id == $selectedId ? 'selected' : '';
    echo '<option value="' . $category->id . '" ' . $isSelected . '>'
        . str_repeat('--', $level) . ' ' . $category->name .
        '</option>';

    if ($category->children && $category->children->count() > 0) {
    renderOptions($category->children, $selectedId, $level + 1);
    }
    }
    }
    }

    @endphp
    @endonce

    <!-- Category Management -->
<div class="card mb-4 shadow-sm">
  <div class="card-header d-flex align-items-center justify-content-between">
    <h5 class="mb-0">
      <i class="bx bx-category me-1"></i> Add Category / Subcategory
    </h5>
  </div>

  <div class="card-body">
    <form action="{{ route('isms.category.store') }}" method="POST">
      @csrf
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label">Category Name</label>
          <input
            type="text"
            name="name"
            class="form-control"
            placeholder="Enter category name"
            required
          >
        </div>
        <div class="col-md-6">
          <label class="form-label">Parent Category (Optional)</label>
          <select name="parent_id" class="form-select">
            <option value="">Select Parent</option>
            @php renderOptions($iscategories); @endphp
          </select>
        </div>
      </div>

      <div class="mt-3">
        <button class="btn btn-primary">
          <i class="bx bx-plus me-1"></i> Add Category
        </button>
      </div>
    </form>
  </div>
</div>


    <!-- Existing Categories -->
    <h5>Existing Categories</h5>
    <div class="accordion tree-view" id="categoryAccordion">
        @include('isms.category-tree', ['iscategories' => $iscategories])
    </div>
    <!-- Custom CSS -->
    <style>
        .tree-view .accordion-item {
            border-left: 3px solid #0d6efd;
            margin-bottom: 5px;
            border-radius: 5px;
        }

        .tree-view .level-2 {
            border-color: #198754;
            margin-left: 20px;
        }

        .tree-view .level-3 {
            border-color: #ffc107;
            margin-left: 40px;
        }

        .tree-view .accordion-button {
            font-weight: 500;
        }

        .tree-view .accordion-body form {
            margin-right: 10px;
        }
    </style>
    <hr>
    <div class="modal fade" id="addChecklistModal" tabindex="-1" aria-labelledby="addChecklistModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title" id="addChecklistModalLabel">Add Checklist Item</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Modal Body -->
                <div class="modal-body">
                    <form action="{{ route('isms.checklist.store') }}" method="POST">
                        @csrf
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label>Category</label>
                                <select name="category_id" class="form-control" required>
                                    <option value="">Select Category</option>
                                    @php renderOptions($iscategories); @endphp
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label>Assessment Questionnaire</label>
                                <input type="text" name="assessment_questionnaire" class="form-control" required>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label>Answer</label>
                                <select name="answer" class="form-control" required>
                                    <option value="">Select Answer</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label>Control Ref No</label>
                                <input type="text" name="control_reference_number" class="form-control">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label>Evidence</label>
                            <textarea name="evidence" class="form-control"></textarea>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Add Checklist</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
    <!-- Checklist Table -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Existing Checklists</h5>
            <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addChecklistModal">
                Add Checklist Item
            </button>
        </div>

        <div class="card-body">
            <!-- Category Tabs -->
            <ul class="nav nav-tabs" id="checklistTabs" role="tablist">
                @foreach($iscategories as $index => $category)
                @if($index < 3)
                    <li class="nav-item" role="presentation">
                    <button
                        class="nav-link {{ $index === 0 ? 'active' : '' }}"
                        id="tab-{{ $category->id }}"
                        data-bs-toggle="tab"
                        data-bs-target="#content-{{ $category->id }}"
                        type="button"
                        role="tab"
                        aria-controls="content-{{ $category->id }}"
                        aria-selected="{{ $index === 0 ? 'true' : 'false' }}">
                        {{ $category->name }}
                    </button>
                    </li>
                    @elseif($index === 3)
                    <!-- "More" Dropdown Start -->
                    <li class="nav-item dropdown">
                        <button
                            class="nav-link dropdown-toggle"
                            id="moreTabsDropdown"
                            data-bs-toggle="dropdown"
                            type="button"
                            role="tab"
                            aria-expanded="false">
                            More
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="moreTabsDropdown">
                            <li>
                                <button
                                    class="dropdown-item"
                                    id="tab-{{ $category->id }}"
                                    data-bs-toggle="tab"
                                    data-bs-target="#content-{{ $category->id }}"
                                    type="button"
                                    role="tab"
                                    aria-controls="content-{{ $category->id }}">
                                    {{ $category->name }}
                                </button>
                            </li>
                            @else
                            <li>
                                <button
                                    class="dropdown-item"
                                    id="tab-{{ $category->id }}"
                                    data-bs-toggle="tab"
                                    data-bs-target="#content-{{ $category->id }}"
                                    type="button"
                                    role="tab"
                                    aria-controls="content-{{ $category->id }}">
                                    {{ $category->name }}
                                </button>
                            </li>
                            @endif
                            @endforeach

                            @if(count($iscategories) > 3)
                        </ul>
                    </li>
                    @endif
            </ul>
            <!-- Tab Content -->
            <div class="tab-content mt-3" id="checklistTabContent">
                @foreach($iscategories as $index => $category)
                <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}" id="content-{{ $category->id }}" role="tabpanel" aria-labelledby="tab-{{ $category->id }}">

                    @php
                    // Get all checklists under this main category (including its subcategories)
                    $categoryIds = collect($category->children)->pluck('id')->push($category->id)->toArray();
                    $categoryChecklists = $checklists->whereIn('category_id', $categoryIds);
                    @endphp

                    @if($categoryChecklists->count() > 0)
                    <table class="table table-bordered align-middle">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Questionnaire</th>
                                <th>Answer</th>
                                <th>Control Ref</th>
                                <th>Standard</th>
                                <th>Evidence</th>
                                <th>Category</th>
                                <th>Status</th>
                                <th>Remarks</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($categoryChecklists as $index2 => $item)
                            <tr>
                                <td>{{ $index2 + 1 }}</td>
                                <td>{{ $item->assessment_questionnaire }}</td>
                                <td>{{ $item->answer ?? '-' }}</td>
                                <td>{{ $item->control_reference_number ?? '-' }}</td>
                                <td>{{ $item->iso_standard ?? '-' }}</td>
                                <td>{{ $item->evidence ?? '-' }}</td>
                                <td>{{ $item->category->name ?? '-' }}</td>
                                <td>{{ $item->status ?? '-' }}</td>
                                <td>{{ $item->remarks ?? '-' }}</td>
                                <td>
                                    <!-- Edit Button -->
                                    <button class="btn btn-icon" type="button"
                                        data-bs-toggle="offcanvas"
                                        data-bs-target="#editChecklist{{ $item->id }}"
                                        aria-controls="editChecklist{{ $item->id }}">
                                        <i class="bx bx-edit"></i>
                                    </button>

                                    <!-- Delete -->
                                    <form action="{{ route('isms.checklist.destroy', $item->id) }}"
                                        method="POST" class="d-inline"
                                        onsubmit="return confirm('Are you sure?')">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-icon"> <i class="bx bx-trash"></i></button>
                                    </form>
                                </td>
                            </tr>

                            <!-- Edit Offcanvas -->
                            <div class="offcanvas offcanvas-end" tabindex="-1"
                                id="editChecklist{{ $item->id }}"
                                aria-labelledby="editChecklistLabel{{ $item->id }}">
                                <div class="offcanvas-header">
                                    <h5 class="offcanvas-title" id="editChecklistLabel{{ $item->id }}">Edit Checklist</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
                                </div>
                                <div class="offcanvas-body">
                                    <form action="{{ route('isms.checklist.update', $item->id) }}" method="POST">
                                        @csrf
                                        @method('PUT')

                                        <div class="mb-3">
                                            <label class="form-label">Questionnaire</label>
                                            <input type="text" name="assessment_questionnaire" class="form-control"
                                                value="{{ $item->assessment_questionnaire }}" required>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Answer</label>
                                            <input type="text" name="answer" class="form-control" value="{{ $item->answer }}">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Control Ref</label>
                                            <input type="text" name="control_reference_number" class="form-control" value="{{ $item->control_reference_number }}">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">ISO Standard</label>
                                            <input type="text" name="iso_standard" class="form-control" value="{{ $item->iso_standard }}">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Evidence</label>
                                            <input type="text" name="evidence" class="form-control" value="{{ $item->evidence }}">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Category</label>
                                            <select name="category_id" class="form-control" required>
                                                <option value="">Select Category</option>
                                                @php renderOptions($iscategories, $item->category_id); @endphp
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Status</label>
                                            <input type="text" name="status" class="form-control" value="{{ $item->status }}">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Remarks</label>
                                            <textarea name="remarks" class="form-control">{{ $item->remarks }}</textarea>
                                        </div>

                                        <button type="submit" class="btn btn-success">Update</button>
                                    </form>
                                </div>
                            </div>
                            @endforeach
                        </tbody>
                    </table>
                    @else
                    <div class="alert alert-info mb-0">No checklist items found under {{ $category->name }}.</div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection