@extends('layouts.app')

@section('content')
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{ __('measurement_units.title') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted">
                    <a href="{{ url('/') }}" class="text-muted text-hover-primary">{{ __('common.home') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-500 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">{{ __('measurement_units.title') }}</li>
            </ul>
        </div>
        <div class="d-flex align-items-center gap-2 gap-lg-3">
            @can('Create:MeasurementUnit')
                <a href="{{ route('measurement-units.create') }}" class="btn btn-sm fw-bold btn-primary">{{ __('measurement_units.add_unit') }}</a>
            @endcan
        </div>
    </div>
</div>

<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="card-title">
                    <!--begin::Search-->
                    <form action="{{ route('measurement-units.index') }}" method="GET" class="d-flex align-items-center position-relative my-1">
                        <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5"><span class="path1"></span><span class="path2"></span></i>
                        <input type="text" name="search" value="{{ request('search') }}" class="form-control form-control-solid w-250px ps-13" placeholder="{{ __('measurement_units.search') }}" />
                        @if(request('sort'))
                            <input type="hidden" name="sort" value="{{ request('sort') }}">
                        @endif
                        @if(request('direction'))
                            <input type="hidden" name="direction" value="{{ request('direction') }}">
                        @endif
                    </form>
                    <!--end::Search-->
                </div>
            </div>
            <div class="card-body pt-0">
                <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_measurement_units_table">
                    <thead>
                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                            <th class="min-w-125px">
                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'name', 'direction' => request('sort') === 'name' && request('direction') === 'asc' ? 'desc' : 'asc']) }}" class="text-gray-500 text-hover-primary d-flex align-items-center">
                                    {{ __('measurement_units.unit_name') }}
                                    @if(request('sort') === 'name')
                                        <i class="ki-duotone ki-arrow-{{ request('direction') === 'asc' ? 'up' : 'down' }} ms-1 fs-7"><span class="path1"></span><span class="path2"></span></i>
                                    @endif
                                </a>
                            </th>
                            <th class="min-w-125px">{{ __('measurement_units.uuid') }}</th>
                            <th class="text-end min-w-70px">{{ __('common.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="fw-semibold text-gray-600">
                        @foreach($units as $unit)
                        <tr>
                            <td>{{ $unit->name }}</td>
                            <td>{{ $unit->uuid }}</td>
                                <td class="text-end">
                                    <div class="d-inline-flex align-items-center gap-2 justify-content-end">
                                        @can('Update:MeasurementUnit')
                                            <a href="{{ route('measurement-units.edit', ['measurement_unit' => $unit]) }}" 
                                               class="btn btn-icon btn-sm btn-light-warning"
                                               title="{{ __('common.edit') }}">
                                                <i class="ki-outline ki-notepad-edit fs-4"></i>
                                            </a>
                                        @endcan
                                        @can('Delete:MeasurementUnit')
                                            <form action="{{ route('measurement-units.destroy', ['measurement_unit' => $unit]) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" 
                                                        class="btn btn-icon btn-sm btn-light-danger"
                                                        title="{{ __('common.delete') }}">
                                                    <i class="ki-outline ki-trash fs-4"></i>
                                                </button>
                                            </form>
                                        @endcan
                                    </div>
                                </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="d-flex flex-stack flex-wrap pt-10">
                    <div class="fs-6 fw-semibold text-gray-700">
                        {{ __('measurement_units.showing_entries', ['from' => $units->firstItem() ?? 0, 'to' => $units->lastItem() ?? 0, 'total' => $units->total()]) }}
                    </div>
                    <ul class="pagination">
                        {{ $units->links('pagination::bootstrap-5') }}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection