@extends('layout.master')
@push('plugin-styles')
    <link href="{{ asset('assets2/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush
@section('title', __('dashboard.about_services'))
@section('content')
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
      <!--<h6 class="fw-semibold mb-0">{{ __('dashboard.products') }}</h6>-->
      <ul class="d-flex align-items-center gap-2">
        <li class="fw-medium">
          <a href="{{ route('home') }}" class="d-flex align-items-center gap-1 hover-text-primary">
            <iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
            {{ __('dashboard.main menu') }}
          </a>
        </li>
        <li>-</li>
        <li class="fw-medium">{{ __('dashboard.about_services') }}</li>
      </ul>
    </div>
    <div class="card">
        <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="d-flex flex-wrap align-items-center gap-3">
                <h5 class="card-title mb-0">{{ __('dashboard.about_services') }}</h5>
                <div class="d-flex align-items-center gap-2">
                
                </div>
                <div class="icon-field">
                
                </div>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-3">
                <a href="{{ route('about_services.create') }}" class="btn btn-sm btn-primary-600"><i
                    class="ri-add-line"></i>{{ __('dashboard.Add a new about_service') }}</a>
            </div>
        </div>
        <div class="card-body" style="overflow-x: auto;">
        <table class="table bordered-table mb-0" id="dataTableExample" style="width: 100%">
            <thead>
            <tr style="text-align:center !important;">
                <!--<th scope="col" style="text-align:center !important;">-->
                <!--    <div class="form-check style-check d-flex-->
                <!--        align-items-center">-->
                <!--        <input class="form-check-input" type="checkbox" value=""-->
                <!--        id="checkAll">-->
                <!--        <label class="form-check-label" for="checkAll">-->
                <!--        #-->
                <!--        </label>-->
                <!--    </div>-->
                <!--</th>-->
                <!--<th scope="col" style="text-align:center !important;">{{ __('dashboard.type') }}</th>-->
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.name') }} </th>
                <!--<th scope="col" style="text-align:center !important;">{{ __('dashboard.name') }} EN</th>-->
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.description') }} </th>
                <!--<th scope="col" style="text-align:center !important;">{{ __('dashboard.description') }} En</th>-->
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.price') }}</th>
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.status') }}</th>
                <th scope="col" style="text-align:center !important;">{{ __('dashboard.action') }}</th>
               
            </tr>
            </thead>
            <tbody>
            @foreach ($about_services as $about_service)
            <tr>
                <!--<td>{{ __('dashboard.'.$about_service->type) }}</td>-->
                <td>{{ session()->get('lang') == 'en' ? $about_service->name_en : $about_service->name }}</td>
                <!--<td>{{ $about_service->title_en }}</td>-->
                <td>