@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Departments & Designations'))
@section('content')
    @include('admin.Department_Designation.partials.styles')
    <div class="container-fluid dept-desig-wrap">
        <div class="row mt-3 mb-4">
            <div class="col-12">
                <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                    <div>
                        <h4 class="page-title mb-0">{{ __('Departments & Designations') }}</h4>
                        <p class="text-muted mb-0 small">{{ __('Organize staff by department and job designation with seniority ordering for reports.') }}</p>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-6 col-md-3 mb-2 mb-md-0">
                        <div class="dept-desig-stat">
                            <div class="num">{{ $departments->total() }}</div>
                            <div class="lbl">{{ __('Departments') }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2 mb-md-0">
                        <div class="dept-desig-stat">
                            <div class="num">{{ $designations->total() }}</div>
                            <div class="lbl">{{ __('Designations') }}</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6 mb-3 mb-lg-0">
                        <div class="card">
                            <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                                <div>
                                    <span><i class="fas fa-sitemap mr-1 text-muted"></i> {{ __('Departments') }}</span>
                                </div>
                                @can('Department-create')
                                    <button type="button" class="btn btn-sm btn-primary" onclick="department_setup_add()">
                                        <i class="fas fa-plus mr-1"></i> {{ __('Add New') }}
                                    </button>
                                @endcan
                            </div>
                            <div class="card-body p-2">
                                <div class="table-responsive">
                                    <table class="table table-hover dept-desig-table mb-0">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>{{ __('Department Name') }}</th>
                                            <th>{{ __('Assigned') }}</th>
                                            <th class="text-right">{{ __('Actions') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @forelse($departments as $department)
                                            <tr>
                                                <td class="font-weight-semibold">{{ $department->name }}</td>
                                                <td>
                                                    <span class="dept-desig-badge">{{ $department->staff_count ?? 0 }}</span>
                                                </td>
                                                <td class="text-right">
                                                    <div class="dept-desig-actions">
                                                        @can('Department-edit')
                                                            <button type="button" class="btn btn-sm btn-outline-primary btn-dept-edit"
                                                                    data-id="{{ $department->id }}"
                                                                    data-name="{{ $department->name }}">
                                                                <i class="fas fa-edit"></i>
                                                            </button>
                                                        @endcan
                                                        @can('Department-delete')
                                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                                    onclick="openDeleteModal('{{ route('department.destroy', $department->id) }}')">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        @endcan
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="dept-desig-empty">{{ __('No departments yet.') }}</td>
                                            </tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            @if($departments->hasPages())
                                <div class="card-footer">
                                    {{ $departments->appends(request()->except('department_page'))->links() }}
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                                <div>
                                    <span><i class="fas fa-id-badge mr-1 text-muted"></i> {{ __('Designations') }}</span>
                                    <small class="d-block text-muted font-weight-normal mt-1">{{ __('Lower seniority order = higher rank in reports') }}</small>
                                </div>
                                @can('Designation-create')
                                    <button type="button" class="btn btn-sm btn-primary" onclick="designation_setup_add()">
                                        <i class="fas fa-plus mr-1"></i> {{ __('Add New') }}
                                    </button>
                                @endcan
                            </div>
                            <div class="card-body p-2">
                                <div class="table-responsive">
                                    <table class="table table-hover dept-desig-table mb-0">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>{{ __('Rank') }}</th>
                                            <th>{{ __('Designation Name') }}</th>
                                            <th>{{ __('Assigned') }}</th>
                                            <th class="text-right">{{ __('Actions') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @forelse($designations as $designation)
                                            <tr>
                                                <td><span class="dept-desig-rank">{{ $designation->seniority_order ?? 0 }}</span></td>
                                                <td class="font-weight-semibold">{{ $designation->name }}</td>
                                                <td>
                                                    <span class="dept-desig-badge">{{ $designation->staff_count ?? 0 }}</span>
                                                </td>
                                                <td class="text-right">
                                                    <div class="dept-desig-actions">
                                                        @can('Designation-edit')
                                                            <button type="button" class="btn btn-sm btn-outline-primary btn-desig-edit"
                                                                    data-id="{{ $designation->id }}"
                                                                    data-name="{{ $designation->name }}"
                                                                    data-seniority="{{ (int) ($designation->seniority_order ?? 0) }}">
                                                                <i class="fas fa-edit"></i>
                                                            </button>
                                                        @endcan
                                                        @can('Designation-delete')
                                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                                    onclick="openDeleteModal('{{ route('designation.destroy', $designation->id) }}')">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        @endcan
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="4" class="dept-desig-empty">{{ __('No designations yet.') }}</td>
                                            </tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            @if($designations->hasPages())
                                <div class="card-footer">
                                    {{ $designations->appends(request()->except('designation_page'))->links() }}
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    @include('modals.delete_modal')

    <div class="modal fade dept-desig-modal" id="Department_setup_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <form action="{{ route('department.store') }}" method="POST">
            @csrf
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Add Department') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group mb-0">
                            <label class="dept-desig-form-label">{{ __('Department Name') }}</label>
                            <input class="form-control" type="text" name="name" required placeholder="{{ __('Enter department name') }}">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade dept-desig-modal" id="Department_setup_update_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <form action="{{ route('department.update') }}" method="POST">
            @csrf
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Update Department') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="id" id="id">
                        <div class="form-group mb-0">
                            <label class="dept-desig-form-label">{{ __('Department Name') }}</label>
                            <input class="form-control" type="text" id="department" name="name" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade dept-desig-modal" id="Designation_setup_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <form action="{{ route('designation.store') }}" method="POST">
            @csrf
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Add Designation') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="dept-desig-form-label">{{ __('Designation Name') }}</label>
                            <input class="form-control" type="text" name="name" required placeholder="{{ __('Enter designation name') }}">
                        </div>
                        <div class="form-group mb-0">
                            <label class="dept-desig-form-label">{{ __('Seniority order') }}</label>
                            <input class="form-control" type="number" min="0" max="99999" step="1" name="seniority_order" value="0">
                            <small class="text-muted">{{ __('Lower number = senior rank (top of report)') }}</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade dept-desig-modal" id="Designation_setup_update_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <form action="{{ route('designation.update') }}" method="POST">
            @csrf
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Update Designation') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="id" id="ids">
                        <div class="form-group">
                            <label class="dept-desig-form-label">{{ __('Designation Name') }}</label>
                            <input class="form-control" type="text" id="shift" name="name" required>
                        </div>
                        <div class="form-group mb-0">
                            <label class="dept-desig-form-label">{{ __('Seniority order') }}</label>
                            <input class="form-control" type="number" min="0" max="99999" step="1" id="designation_seniority_order" name="seniority_order" value="0">
                            <small class="text-muted">{{ __('Lower number = senior rank (top of report)') }}</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        function department_setup_add() {
            $('#Department_setup_modal').modal('show');
        }

        function department_setup_update(id, name) {
            $('#id').val(id);
            $('#department').val(name);
            $('#Department_setup_update_modal').modal('show');
        }

        function designation_setup_add() {
            $('#Designation_setup_modal').modal('show');
        }

        function designation_setup_update(id, name, seniorityOrder) {
            $('#ids').val(id);
            $('#shift').val(name);
            $('#designation_seniority_order').val(seniorityOrder ?? 0);
            $('#Designation_setup_update_modal').modal('show');
        }

        function openDeleteModal(url) {
            $('#delete-link').attr('href', url);
            $('#delete-modal').modal('show');
        }

        $(function () {
            $('.btn-dept-edit').on('click', function () {
                department_setup_update($(this).data('id'), $(this).data('name'));
            });
            $('.btn-desig-edit').on('click', function () {
                designation_setup_update($(this).data('id'), $(this).data('name'), $(this).data('seniority'));
            });
        });
    </script>
@endsection