@php 
$pageName = "training"; 
$subpageName = "traning-setup";
$activeTab = session('active_tab', '#solid-tab1');
session()->forget('active_tab'); // Clear it after reading
@endphp
@extends('layouts.app')
@section('content')
<div class="content">
    <div class="page-header">
        <div class="add-item d-flex">
            <div class="page-title">
                <h4 class="fw-bold">Training Program Management</h4>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-divide mb-0">
                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="#">Training Program Management</a></li>
                            
                        <li class="breadcrumb-item active" aria-current="page">Settings</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
        	<!-- /product list -->
         
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Training Setup</h5>
                </div>
                <div class="card-body">
                    <ul class="nav nav-tabs nav-tabs-solid mb-3">
                        <li class="nav-item"><a class="nav-link active" href="#solid-tab1" data-bs-toggle="tab">Classification</a></li>
                        <li class="nav-item"><a class="nav-link" href="#solid-tab2" data-bs-toggle="tab">Category</a></li>
                        <li class="nav-item"><a class="nav-link" href="#solid-tab3" data-bs-toggle="tab">Type</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane show active" id="solid-tab1">
                           <div class="row">
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header justify-content-between">
                                        <div class="card-title">
                                           Add Training Classification
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <form enctype="multipart/form-data" method="POST" action="{{ route('add-classification-process') }}">
                                            @csrf
                                            <div class="row">
                                                <div class=" mb-3">
                                                    <label class="form-label"> Name</label>
                                                    <input type="text" name="name" class="form-control" placeholder="Enter Classification Name">
                                                    @error('name') <small style="color:red"> {{ $message}}</small> @enderror
                                                </div>
                                                <div class=" mb-3">
                                                    <label class="form-label"> Description</label>
                                                    <input type="text" name="description" class="form-control" placeholder="Enter Description">
                                                </div>
                                                <div class="col-md-12">
                                                    <button type="submit" class="btn btn-primary">Add Classification</button>
                                                </div>
                                                
                                            </div>
                                             <input type="hidden" name="active_tab" class="active_tab" value="{{ $activeTab }}">
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header justify-content-between">
                                        <div class="card-title">
                                           List Classifications
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            
                                            <div class="table-responsive no-search">
                                                <table class="table" id="myTable">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Name</th>
                                                            <th>Status</th>
                                                            <th>Action</th>
                                                             
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($listclass as $list)
                                                            
                                                        
                                                        <tr>
                                                            <td>{{ $loop->iteration}}</td>
                                                            <td>{{ $list->name}}</td>
                                                            <td>{{ $list->status}}</td>
                                                            <td>
                                                                <a  data-url="{{ route('classification-id',$list->id)  }}"  data-bs-toggle="modal" data-bs-target="#standard-modal"  class="btn btn-sm btn-success showclassmodal"><i class="fa fa-edit"></i></a>
                                                            </td>
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                           </div>
                        </div>
                        <div class="tab-pane" id="solid-tab2">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header justify-content-between">
                                            <div class="card-title">
                                            Add Training Category
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <form enctype="multipart/form-data" method="POST" action="{{ route('add-category-process') }}">
                                                @csrf
                                                <div class="row">
                                                    <div class=" mb-3">
                                                        <label class="form-label"> Name</label>
                                                        <input type="text" name="category_name" class="form-control" placeholder="Enter Category Name">
                                                        @error('category_name') <small style="color:red"> {{ $message}}</small> @enderror
                                                    </div>
                                                    <div class=" mb-3">
                                                        <label class="form-label"> Classification</label>
                                                        <select class="form-control" name="classification">
                                                            <option value="" selected disabled>--Choose Classification--</option>
                                                            @foreach ($listclass as $list)
                                                                <option value="{{ $list->id }}">{{ $list->name}}</option>
                                                            @endforeach
                                                        </select>
                                                        @error('classification') <small style="color:red"> {{ $message}}</small> @enderror
                                                    </div>
                                                    <div class=" mb-3">
                                                        <label class="form-label"> Description</label>
                                                        <input type="text" name="description" class="form-control" placeholder="Enter Description">
                                                    </div>
                                                
                                                    <div class="col-md-12">
                                                        <button type="submit" class="btn btn-primary">Add Category</button>
                                                    </div>
                                                    
                                                </div>
                                                    <input type="hidden" name="active_tab" class="active_tab" value="{{ $activeTab }}">

                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header justify-content-between">
                                            <div class="card-title">
                                            List Categories
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                
                                                <div class="table-responsive no-search">
                                                    <table class="table" id="classificationTable">
                                                        <thead class="thead-light">
                                                            <tr>
                                                                <th>#</th>
                                                                <th>Name</th>
                                                                <th>Classification
                                                                <th>Status</th>
                                                                <th>Action</th>
                                                                
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($listcat as $lists)
                                                                
                                                            
                                                            <tr>
                                                                <td>{{ $loop->iteration}}</td>
                                                                <td>{{ $lists->name}}</td>
                                                                <td>{{ $lists->classname->name}}</td>
                                                                <td>{{ $lists->status}}</td>
                                                                <td>
                                                                    <a  data-url="{{ route('category-id',$lists->id)  }}"  data-bs-toggle="modal" data-bs-target="#standard-modalCat"  class="btn btn-sm btn-success showcatmodal"><i class="fa fa-edit"></i></a>
                                                                </td>
                                                            </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="solid-tab3">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header justify-content-between">
                                            <div class="card-title">
                                            Add Training Type
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <form enctype="multipart/form-data" method="POST" action="{{ route('add-type-process') }}">
                                                @csrf
                                                <div class="row">
                                                    <div class=" mb-3">
                                                        <label class="form-label"> Name</label>
                                                        <input type="text" name="type_name" class="form-control" placeholder="Enter Name">
                                                        @error('type_name') <small style="color:red"> {{ $message}}</small> @enderror
                                                    </div>
                                                    <div class=" mb-3">
                                                        <label class="form-label"> Classification</label>
                                                        <select class="form-control changeclass" name="classification_id">
                                                            <option value="" selected disabled>--Choose Classification--</option>
                                                            @foreach ($listclass as $list)
                                                                <option value="{{ $list->id }}">{{ $list->name}}</option>
                                                            @endforeach
                                                        </select>
                                                        @error('classification_id') <small style="color:red"> {{ $message}}</small> @enderror
                                                    </div>
                                                    <div class=" mb-3">
                                                        <label class="form-label"> Category</label>
                                                        <select class="form-control catname" name="category">
                                                            
                                                        </select>
                                                        @error('category') <small style="color:red"> {{ $message}}</small> @enderror
                                                    </div>
                                                    <div class=" mb-3">
                                                        <label class="form-label"> Description</label>
                                                        <input type="text" name="description" class="form-control" placeholder="Enter Description">
                                                    </div>
                                                
                                                    <div class="col-md-12">
                                                        <button type="submit" class="btn btn-primary">Add Type</button>
                                                    </div>
                                                    
                                                </div>
                                                   <input type="hidden" name="active_tab" class="active_tab" value="{{ $activeTab }}">
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header justify-content-between">
                                            <div class="card-title">
                                            List Types
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                
                                                <div class="table-responsive no-search">
                                                    <table class="table" id="TypeTable">
                                                        <thead class="thead-light">
                                                            <tr>
                                                                <th>#</th>
                                                                <th>Name</th>
                                                                <th>Classification
                                                                <th>Status</th>
                                                                <th>Action</th>
                                                                
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($listtype as $listtype)
                                                                
                                                            
                                                            <tr>
                                                                <td>{{ $loop->iteration}}</td>
                                                                <td>{{ $listtype->name}}</td>
                                                                <td>{{ $listtype->classname->name}}</td>
                                                                <td>{{ $lists->status}}</td>
                                                                <td>
                                                                    <a data-url="{{ route('type-id',$lists->id)  }}"  data-bs-toggle="modal" data-bs-target="#standard-modalType" class="btn btn-sm btn-success showtypemodal"><i class="fa fa-edit"></i></a>
                                                                </td>
                                                            </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
         
    </div>
        
</div> 
@include('training.edit-classification-modal')   
@include('training.edit-category-modal') 
@include('training.edit-type-modal') 
@endsection
@section('scripts')
 <script>
   document.addEventListener('DOMContentLoaded', function () {
    let activeTab = "{{ $activeTab }}";

    if (activeTab) {
        let trigger = document.querySelector(
            'a[data-bs-toggle="tab"][href="' + activeTab + '"]'
        );
        if (trigger) {
            new bootstrap.Tab(trigger).show();
        }
    }

    // Set all hidden inputs to current active tab on page load
    document.querySelectorAll('.active_tab').forEach(input => {
        input.value = activeTab;
    });

    // Update all hidden inputs when user switches tabs
    document.querySelectorAll('a[data-bs-toggle="tab"]').forEach(tab => {
        tab.addEventListener('shown.bs.tab', function (e) {
            document.querySelectorAll('.active_tab').forEach(input => {
                input.value = e.target.getAttribute('href');
            });
        });
    });
});


</script>

 <script>
$(document).ready(function() {
    $(document).on('change', '.changeclass', function() {
        var cat_id = $(this).val();
        
        // ✅ 1. Validate input (prevent unnecessary AJAX calls)
        if (!cat_id || cat_id <= 0) {
            $(".catname").html('<option value="0" selected disabled>--Choose  Category--</option>');
            return;
        }

        // ✅ 2. Show loading state (better UX)
        var $typeSelect = $(".catname");
        $typeSelect.prop('disabled', true).html('<option value="">Loading...</option>');

        $.ajax({
            type: 'GET',
            url: '{!! URL::to('findCategoryData') !!}',
            data: { 'id': cat_id },
            dataType: 'json', // ✅ 3. Explicitly expect JSON
            success: function(data) {
                var op = '<option value="0" selected disabled>--Choose  Category--</option>';
                
                // ✅ 4. Check if data exists and is an array
                if (Array.isArray(data) && data.length > 0) {
                    data.forEach(function(type) {
                        op += `<option value="${type.id}">${type.name}</option>`;
                    });
                } else {
                    op = '<option value="0" selected disabled>No  Category available</option>';
                }
                
                $typeSelect.html(op).prop('disabled', false);
            },
            error: function(xhr, status, error) {
                // ✅ 5. Proper error handling
                console.error("AJAX Error:", error);
                $typeSelect.html('<option value="0" selected disabled>Error loading  Category</option>')
                           .prop('disabled', false);
            }
        });
    });
});

$(document).ready(function () {
    $('#classificationTable').DataTable();
    $('#TypeTable').DataTable();
});

  $(document).ready(function(){
   

    $('body').on('click', '.showclassmodal', function(){
        var userUrl = $(this).data('url');
        console.log('Fetching URL:', userUrl); // Debug: Check URL

        $.get(userUrl, function(data){
            console.log('Data received:', data); // Debug: See exact data structure
            
            // Check if elements exist before setting values
            console.log('classID element:', $('#classID').length);
            console.log('classname element:', $('#classname').length);
            console.log('classdesc element:', $('#classdesc').length);
            console.log('classstatus element:', $('#classstatus').length);
             
            
            // Set the values
            $('#classID').val(data.id);
            $('#classname').val(data.name);
            $('#classdesc').val(data.description);
            $('#classstatus').val(data.status);
             
            
            // Verify values were set
            console.log('Set classname value:', $('#classname').val());
            console.log('Set classdesc value:', $('#classdesc').val());
             console.log('Set classstatus value:', $('#classstatus').val());
           
            
            // Show the modal
            $('#standard-modal').modal('show');
        }).fail(function(error) {
            console.log('Error:', error);
        });
    });

    
});


 $(document).ready(function(){
   

    $('body').on('click', '.showcatmodal', function(){
        var userUrl = $(this).data('url');
        console.log('Fetching URL:', userUrl); // Debug: Check URL

        $.get(userUrl, function(data){
            console.log('Data received:', data); // Debug: See exact data structure
            
            // Check if elements exist before setting values
            console.log('catID element:', $('#catID').length);
            console.log('catname element:', $('#catname').length);
            console.log('catdesc element:', $('#catdesc').length);
            console.log('catstatus element:', $('#catstatus').length);
            console.log('catclass element:', $('#catclass').length);
             
            
            // Set the values
            $('#catID').val(data.id);
            $('#catname').val(data.name);
            $('#catdesc').val(data.description);
            $('#catstatus').val(data.status);
            $('#catclass').val(data.class_id);
             
            
            // Verify values were set
            console.log('Set catname value:', $('#catname').val());
            console.log('Set catdesc value:', $('#catdesc').val());
            console.log('Set catstatus value:', $('#catstatus').val());
            console.log('Set catclass value:', $('#catclass').val());
           
            
            // Show the modal
            $('#standard-modalCat').modal('show');
        }).fail(function(error) {
            console.log('Error:', error);
        });
    });

    
});


$(document).ready(function(){
   

    $('body').on('click', '.showtypemodal', function(){
        var userUrl = $(this).data('url');
        console.log('Fetching URL:', userUrl); // Debug: Check URL

        $.get(userUrl, function(data){
            console.log('Data received:', data); // Debug: See exact data structure
            
            // Check if elements exist before setting values
            console.log('typeID element:', $('#typeID').length);
            console.log('typename element:', $('#typename').length);
            console.log('typedesc element:', $('#typedesc').length);
            console.log('typestatus element:', $('#typestatus').length);
            console.log('typeclass element:', $('#typeclass').length);
            console.log('typecat element:', $('#typecat').length);
             
            
            // Set the values
            $('#typeID').val(data.id);
            $('#typename').val(data.name);
            $('#typedesc').val(data.description);
            $('#typestatus').val(data.status);
            $('#typeclass').val(data.class_id);
            $('#typecat').val(data.cat_id);
             
            
            // Verify values were set
            console.log('Set typename value:', $('#typename').val());
            console.log('Set typedesc value:', $('#typedesc').val());
            console.log('Set typestatus value:', $('#typestatus').val());
            console.log('Set typeclass value:', $('#typeclass').val());
             console.log('Set typecat value:', $('#typecat').val());
           
            
            // Show the modal
            $('#standard-modalType').modal('show');
        }).fail(function(error) {
            console.log('Error:', error);
        });
    });

    
});
</script>
@endsection