@extends('newDashboard.index')

@section('css')
    <link rel="stylesheet" href="{{ asset('metronic/css/data-table.css') }}">
@endsection

@section('main-content')
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-package"></i>
                </span> {{ __('Departments') }}
            </h3>
        </div>
        <div class="row">
            <div id="success_message"></div>
            <div class="buttons-container">
                <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal"
                        data-bs-target="#addModal">{{ __('Add Department') }}</button>
            </div>

            <div class="table-responsive customscroll">
                <table class="table datatable text-center" id="table">
                    <thead>
                    <tr>
                        <th>{{ __('Department Name') }}</th>
                        <th>{{ __('Actions') }}</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Add Department Modal -->
    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Add Department') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="addDepartmentForm" action="{{route('hr.departments.store')}}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="name">{{ __('Department Name') }}</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                    </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">{{ __('Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Department Modal -->
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Edit Department') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="editDepartmentForm" method="POST" action="{{route("hr.departments.index")}}">
                    @csrf
                    @method("PATCH")
                    <input type="hidden" id="edit_id">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="edit_name">{{ __('Department Name') }}</label>
                            <input type="text" class="form-control" id="edit_name" name="name">
                        </div>
                    </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">{{ __('Update') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        var translations = {
            'Are you sure?': '{{ __("Are you sure?") }}',
            'You wont be able to revert this!': '{{ __("You wont be able to revert this!") }}',
            'Yes, delete it!': '{{ __("Yes, delete it!") }}',
            'Cancel': '{{ __("Cancel") }}',
            'Deleted!': '{{ __("Deleted!") }}',
            'Error!': '{{ __("Error!") }}',
            'Something went wrong while deleting.': '{{ __("Something went wrong while deleting.") }}',

        };
    </script>
    <script src="{{asset("/metronic/js/pages/hr/department.js")}}"></script>
@endsection