@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.add') }}</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">
                    <a href="{{ route('measurement-units.index') }}" class="text-muted text-hover-primary">{{ __('measurement_units.title') }}</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.add') }}</li>
            </ul>
        </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 card-flush h-lg-100">
            <form id="kt_measurement_unit_create_form" class="form" action="{{ route('measurement-units.store') }}" method="POST">
                @csrf
                <div class="card-header pt-7">
                    <div class="card-title">
                        <h2>{{ __('measurement_units.unit_details') }}</h2>
                    </div>
                </div>
                <div class="card-body pt-5">
                    <div class="fv-row mb-7">
                        <label class="fs-6 fw-semibold form-label mt-3">
                            <span class="required">{{ __('measurement_units.unit_name') }}</span>
                            <span class="ms-1" data-bs-toggle="tooltip" title="Example: cm, inch, meter">
                                <i class="ki-duotone ki-information fs-7">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                    <span class="path3"></span>
                                </i>
                            </span>
                        </label>
                        <input type="text" class="form-control form-control-solid @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" placeholder="e.g. cm" />
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end py-6 px-9">
                    <a href="{{ route('measurement-units.index') }}" class="btn btn-light btn-active-light-primary me-2">{{ __('common.cancel') }}</a>
                    <button type="submit" name="action" value="save_create_new" class="btn btn-light-primary me-2">
                        {{ __('common.save_and_create_new') }}
                    </button>
                    <button type="submit" name="action" value="save" class="btn btn-primary" id="kt_measurement_unit_submit">
                        <span class="indicator-label">{{ __('measurement_units.save') }}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection