@extends('layouts.appv2')

@section('content')

  

    <h1 class="mb-6 gradient-text">Manage Grade </h1>  			
    @if ($message = Session::get('success'))
        <div class="alert alert-success" role="alert">
            {{ $message }}
        </div>
    @endif

    @if ($message = Session::get('error'))
        <div class="alert alert-danger" role="alert">
            {{ $message }}
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger" role="alert">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Manage Grade Category -->
    <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); margin-top: 20px;">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center mb-0">
                <h5>Manage Grade Category</h5>
                <div class="btn-toolbar">
                     <a href="#" data-toggle="modal" data-target="#jobGradeModal" class="btn-sm btn-outline-primary ml-2" 
                        style="border-radius: 50px; font-weight: bolder;"><i class="fa-solid fa-plus"></i>
                        Add Grade Category</a>
                </div>
            </div>                                    
        </div>

        <div class="card-body">
            <div class="dt-responsive table-responsive">
                <table class="table table-bordered">
                    <thead class="thead-dark">
                        <tr>
                            <th class="col-1 text-center">No</th>
                            <th class="col-1 text-center">Job Grade Code</th>
                            <th class="col-1 text-center">Job Grade Name</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            @foreach ($gradeCode as $gradeCode)
                            <tr>
                                <td class="col-1 text-center">{{ $gradeCode->id }}</td>
                                <td class="col-1 text-center">{{ $gradeCode->gradecat_code }}</td>
                                <td class="col-1 text-center">{{ $gradeCode->gradecat_name }}</td>
                                <td class="col-1 text-center">
                                  <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#category" onclick="categoryEdit({{ $gradeCode->id }})">
                                   <i class="fa-solid fa-pen-to-square"></i> Edit
                                  </button>
                                  <form action="{{ route('delete.category', ['id' => $gradeCode->id]) }}" method="POST" 
                                        onsubmit="return confirm('Are you sure you want to delete this grade?');" style="display:inline;"> 
                                        @csrf
                                    <button type="submit" class="btn btn-sm btn-danger"> 
                                        <i class="fas fa-trash"></i>Delete
                                    </button> 
                                  </form> 
                                </td>
                            </tr>
                            @endforeach 
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Manage Grade -->
    <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center mb-0">
                <h5>Manage Grade</h5>
                <div class="btn-toolbar">
                    <a class="btn-sm btn-outline-primary ml-2" href="{{ route('admins.gradeadd')}}" 
                        style="border-radius: 50px; font-weight: bolder;" title="Add Grade">
                        <i class="fa-solid fa-plus"></i> Add New Grade
                    </a>
                </div>
            </div>                                    
        </div>

        <div class="card-body">
              <!-- Filter & Search Controls -->
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 20px;">
            <!-- Per Page Dropdown -->
            <form method="GET" action="{{ route('admins.gradelist') }}" id="perpage-form" style="display: flex; align-items: center; gap: 8px;">
                <select name="perpage" onchange="document.getElementById('perpage-form').submit();"
                        style="padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;">
                    <option value="10" {{ $perpage == 10 ? 'selected' : '' }}>10</option>
                    <option value="25" {{ $perpage == 25 ? 'selected' : '' }}>25</option>
                    <option value="50" {{ $perpage == 50 ? 'selected' : '' }}>50</option>
                    <option value="100" {{ $perpage == 100 ? 'selected' : '' }}>100</option>
                </select>
                <span style="color: #666; font-size: 14px;">entries per page</span>
                @if($search)
                    <input type="hidden" name="search" value="{{ $search }}">
                @endif
            </form>

            <!-- Search Input -->
            <form method="GET" action="{{ route('admins.gradelist') }}" style="display: flex; align-items: center; gap: 10px;">
                <label for="search" style="color: #333; font-weight: 500; white-space: nowrap;">Search:</label>
                <input type="text" 
                       id="search" 
                       name="search" 
                       placeholder="Grade name, code, level..." 
                       value="{{ $search }}"
                       style="padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; width: 300px; font-size: 14px;">
                <input type="hidden" name="perpage" value="{{ $perpage }}">
                <button type="submit" class="btn btn-sm btn-primary" style="border-radius: 4px;">Search</button>
                @if($search)
                    <a href="{{ route('admins.gradelist') }}" class="btn btn-sm btn-secondary" style="border-radius: 4px;">Clear</a>
                @endif
            </form>
        </div>
            <div class="dt-responsive table-responsive">
                <table class="table table-bordered" id="gradeTable">
                    <thead class="thead-dark">
                        <tr>
                            <th class="col-1 text-center">@sortablelink('grade_name', 'Grade Name')</th>
                            <th class="col-1 text-center">@sortablelink('grade_level', 'Grade Level')</th>
                            <th class="col-1 text-center">@sortablelink('job_grade', 'Job Grade')</th>
                            <th class="col-1 text-center">@sortablelink('grade_code', 'Grade Code')</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($grades as $grade)
                        <tr>
                            <td class="col-1 text-center">{{ $grade->grade_name }}</td>
                            <td class="col-1 text-center">{{ $grade->grade_level }}</td>
                            <td class="col-1 text-center">{{ $grade->job_grade }}</td>
                            <td class="col-1 text-center">{{ $grade->grade_code }}</td>
                            <td class="col-1 text-center">
                                <a class="btn btn-sm btn-info" href="{{ route('admins.gradeedit', ['grade_id' => $grade->grade_id]) }}">
                                    <i class="fa-solid fa-pen-to-square"></i> Edit
                                </a>
                                <form action="{{ route('admins.gradedelete', ['grade_id' => $grade->grade_id]) }}" method="POST" 
                                    onsubmit="return confirm('Are you sure you want to delete this grade?');" style="display: inline;">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-danger">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center">No grades found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
                   {{ $grades->links() }}
        </div>
    </div>

    <!-- Manage Type -->
    <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center mb-0">
                <h5>Manage Type</h5>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <a class="btn-sm btn-outline-primary" href="{{ route('admins.typeadd')}}" style="border-radius: 50px; font-weight:bolder;"title="Add employee">
                        <i class="fa-solid fa-plus" style="border-radius: 20px;"></i> Add
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="dt-responsive table-responsive">
                <table class="table table-bordered">
                    <thead class="thead-dark">
                        <tr>
                            <th class="col-1 text-center">Type Code</th>
                            <th class="col-1 text-center">Type Name</th>
                            <th class="col-1 text-center">Description</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($types as $types)
                            <tr>
                                <td class="col-1 text-center">{{$types -> emptype_code}}</td>
                                <td class="col-1 text-center">{{$types -> emptype_name}}</td>
                                <td class="col-1 text-center">{{$types -> emptype_description}}</td>

                                <td class="col-1 text-center">
                                    <a class="btn btn-sm btn-info" href="{{ route('admins.typeedit', ['emptype_id' => $types->emptype_id]) }}">
                                        <i class="fa-solid fa-pen-to-square"></i> Edit
                                    </a>
                                    <div class="mt-1 mb-1"style="display: inline-block;">
                                        <form action="{{ route('admins.typedelete', ['emptype_id' => $types->emptype_id]) }}" method="POST" 
                                            onsubmit="return confirm('Are you sure you want to delete this type?');" style="display: inline;">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-danger">
                                                <i class="fas fa-trash"></i> Delete
                                            </button>
                                        </form>
                                    </div>                                                                   
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Add -->
    <div class="modal fade" id="jobGradeModal" tabindex="-1" role="dialog" aria-labelledby="jobGradeModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form method="POST" action="{{ route('admins.jobgrade.store') }}">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="jobGradeModalLabel">Add Job Grade</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="gradecat_code">Job Grade Code</label>
                            <input type="text" class="form-control @error('gradecat_code') is-invalid @enderror" name="gradecat_code" id="gradecat_code" required>
                        </div>
                        @error('gradecat_code')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-group">
                            <label for="gradecat_name">Job Grade Name</label>
                            <input type="text" class="form-control @error('gradecat_name') is-invalid @enderror" name="gradecat_name" id="gradecat_name" required>
                        </div>
                        @error('gradecat_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

     <!-- Modal Edit -->
  <div class="modal fade" id="category" tabindex="-1" role="dialog" aria-labelledby="jobGradeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="POST" action="{{ route('update.category') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="jobGradeModalLabel">Edit Job Grade</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="category_id" id="edit_gradecat_id">
                    <div class="form-group">
                        <label for="edit_gradecat_code">Job Grade Code</label>
                        <input type="text" class="form-control @error('gradecat_code') is-invalid @enderror" name="gradecat_code" id="edit_gradecat_code" required>
                    </div>
                    @error('gradecat_code')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <div class="form-group">
                        <label for="edit_gradecat_name">Job Grade Name</label>
                        <input type="text" class="form-control @error('gradecat_name') is-invalid @enderror" name="gradecat_name" id="edit_gradecat_name" required>
                    </div>
                    @error('gradecat_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script> 
function categoryEdit(id) {
    $.ajax({
        type: 'GET', 
        url: '/edit/category/' + id, 
        dataType: 'json', 

        success: function(data) {
            console.log(data); 
            $('#edit_gradecat_code').val(data.gradecat_code);  
            $('#edit_gradecat_name').val(data.gradecat_name);  
            $('#edit_gradecat_id').val(data.id);              
        },
        error: function(xhr, status, error) {
            console.log('Error: ' + error);
            console.log('Response: ' + xhr.responseText);
        }
    });
}
</script>
@endsection