@extends('layouts/layoutMaster')

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

@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('designations.datatable')),
    store: @json(route('designations.store')),
    show: @json(route('designations.show', ':id')),
    update: @json(route('designations.update', ':id')),
    destroy: @json(route('designations.destroy', ':id')),
    toggleStatus: @json(route('designations.toggleStatus', ':id')),
    departments: @json(route('departments.parentDepartments'))
  },
  labels: {
    designations: @json(__('Designations')),
    addDesignation: @json(__('Add Designation')),
    editDesignation: @json(__('Edit Designation')),
    name: @json(__('Name')),
    code: @json(__('Code')),
    description: @json(__('Description')),
    department: @json(__('Department')),
    selectDepartment: @json(__('Select Department')),
    noDepartment: @json(__('No Department')),
    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 designation.')),
    confirmDeactivate: @json(__('This will deactivate the designation.')),
    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!')),
    designationDeleted: @json(__('Designation has been deleted.')),
    success: @json(__('Success!')),
    error: @json(__('Error!')),
    designationCreated: @json(__('Designation created successfully.')),
    designationUpdated: @json(__('Designation updated successfully.')),
    genericError: @json(__('Something went wrong. Please try again.')),
    na: @json(__('N/A')),
    searchDesignation: @json(__('Search designation...')),
    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/designation-index.js'])
@endsection

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

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

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

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

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

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

      <div class="mb-4">
        <label class="form-label" for="designationNotes">{{ __('Description') }}</label>
        <textarea class="form-control" id="designationNotes" 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="btnSaveDesignation">{{ __('Save') }}</button>
      </div>
    </form>
  </div>
</div>
@endsection
