@extends('layouts/layoutMaster')

@section('title', __('Departments'))

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/select2/select2.js',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.js'
])
@endsection

@section('page-script')
<script>
const pageData = {
  urls: {
    datatable: @json(route('departments.datatable')),
    store: @json(route('departments.store')),
    show: @json(route('departments.show', ':id')),
    update: @json(route('departments.update', ':id')),
    destroy: @json(route('departments.destroy', ':id')),
    toggleStatus: @json(route('departments.toggleStatus', ':id')),
    parentDepartments: @json(route('departments.parentDepartments'))
  },
  labels: {
    departments: @json(__('Departments')),
    addDepartment: @json(__('Add Department')),
    editDepartment: @json(__('Edit Department')),
    name: @json(__('Name')),
    code: @json(__('Code')),
    description: @json(__('Description')),
    parentDepartment: @json(__('Parent Department')),
    selectParentDepartment: @json(__('Select Parent Department')),
    noParent: @json(__('No Parent')),
    status: @json(__('Status')),
    actions: @json(__('Actions')),
    active: @json(__('Active')),
    inactive: @json(__('Inactive')),
    activate: @json(__('Activate')),
    deactivate: @json(__('Deactivate')),
    edit: @json(__('Edit')),
    delete: @json(__('Delete')),
    confirmStatusChange: @json(__('Change Status?')),
    confirmActivate: @json(__('This will activate the department.')),
    confirmDeactivate: @json(__('This will deactivate the department.')),
    yesChange: @json(__('Yes, change it!')),
    statusUpdated: @json(__('Status updated successfully.')),
    save: @json(__('Save')),
    cancel: @json(__('Cancel')),
    saving: @json(__('Saving...')),
    confirmDelete: @json(__('Are you sure?')),
    confirmDeleteText: @json(__('You will not be able to revert this!')),
    yesDelete: @json(__('Yes, delete it!')),
    deleted: @json(__('Deleted!')),
    departmentDeleted: @json(__('Department has been deleted.')),
    success: @json(__('Success!')),
    error: @json(__('Error!')),
    departmentCreated: @json(__('Department created successfully.')),
    departmentUpdated: @json(__('Department updated successfully.')),
    genericError: @json(__('Something went wrong. Please try again.')),
    na: @json(__('N/A')),
    searchDepartment: @json(__('Search department...')),
    processing: @json(__('Processing...')),
    noData: @json(__('No data available')),
    search: @json(__('Search')),
    lengthMenu: @json(__('Show _MENU_ entries')),
    info: @json(__('Showing _START_ to _END_ of _TOTAL_ entries')),
    infoEmpty: @json(__('Showing 0 to 0 of 0 entries')),
    infoFiltered: @json(__('(filtered from _MAX_ total entries)')),
    zeroRecords: @json(__('No matching records found')),
    paginate: {
      first: @json(__('First')),
      last: @json(__('Last')),
      next: @json(__('Next')),
      previous: @json(__('Previous'))
    }
  }
};
</script>
@vite(['resources/assets/js/app/department-index.js'])
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  {{-- Breadcrumb --}}
  <x-breadcrumb
    :title="__('Departments')"
    :breadcrumbs="[
      ['name' => __('Departments'), 'url' => '']
    ]"
    :home-url="url('/')"
  />

  {{-- Departments List Card --}}
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">{{ __('Departments') }}</h5>
      <button type="button" class="btn btn-primary" id="btnAddDepartment" data-bs-toggle="offcanvas"
              data-bs-target="#offcanvasDepartment">
        <i class="bx bx-plus me-1"></i>{{ __('Add Department') }}
      </button>
    </div>
    <div class="card-datatable table-responsive">
      <table class="table" id="departmentsTable">
        <thead>
          <tr>
            <th>{{ __('ID') }}</th>
            <th>{{ __('Name') }}</th>
            <th>{{ __('Code') }}</th>
            <th>{{ __('Parent Department') }}</th>
            <th>{{ __('Description') }}</th>
            <th>{{ __('Status') }}</th>
            <th>{{ __('Actions') }}</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

{{-- Add/Edit Department Offcanvas --}}
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasDepartment" aria-labelledby="offcanvasDepartmentLabel">
  <div class="offcanvas-header border-bottom">
    <h5 id="offcanvasDepartmentLabel" class="offcanvas-title">{{ __('Add Department') }}</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <form id="departmentForm">
      <input type="hidden" name="id" id="departmentId">

      <div class="mb-4">
        <label class="form-label" for="departmentName">{{ __('Name') }} <span class="text-danger">*</span></label>
        <input type="text" class="form-control" id="departmentName" name="name" placeholder="{{ __('Enter department name') }}">
        <div class="invalid-feedback"></div>
      </div>

      <div class="mb-4">
        <label class="form-label" for="departmentCode">{{ __('Code') }} <span class="text-danger">*</span></label>
        <input type="text" class="form-control" id="departmentCode" name="code" placeholder="{{ __('Enter department code') }}">
        <div class="invalid-feedback"></div>
      </div>

      <div class="mb-4">
        <label class="form-label" for="parentDepartment">{{ __('Parent Department') }}</label>
        <select class="form-select select2" id="parentDepartment" name="parent_id">
          <option value="">{{ __('Select Parent Department') }}</option>
        </select>
      </div>

      <div class="mb-4">
        <label class="form-label" for="departmentNotes">{{ __('Description') }}</label>
        <textarea class="form-control" id="departmentNotes" name="notes" rows="3" placeholder="{{ __('Enter description') }}"></textarea>
      </div>

      <div class="d-flex justify-content-end gap-2">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">{{ __('Cancel') }}</button>
        <button type="submit" class="btn btn-primary" id="btnSaveDepartment">{{ __('Save') }}</button>
      </div>
    </form>
  </div>
</div>
@endsection
