@extends('layouts.app')
@section('title','Add New Mill')

@section('content')
<div class="ml-wrap">
  <div class="ml-panel">
    <div class="ml-head">
      <div class="ml-head-left">
        <i class="fa fa-cog"></i>
        <span>Add New Mill</span>
      </div>
      <a href="{{ route('products.mills.index') }}" class="ml-head-link">
        <i class="fa fa-list"></i> Mill List
      </a>
    </div>

    <div class="ml-body">
      <form action="{{ route('products.mills.store') }}" method="POST" autocomplete="off">
        @csrf

        {{-- Mill Name --}}
        <div class="ml-row @error('name') has-error @enderror">
          <div class="ml-label">Mill Name <span class="req">*</span></div>
          <div class="ml-control">
            <input type="text" name="name" class="ml-input"
                   value="{{ old('name') }}" placeholder="Enter The Mill Name" required>
            @error('name') <div class="ml-help">{{ $message }}</div> @enderror
          </div>
        </div>

        {{-- Status --}}
        <div class="ml-row @error('status') has-error @enderror">
          <div class="ml-label">Status</div>
          <div class="ml-control">
            <select name="status" class="ml-select">
              <option value="1" {{ old('status','1')=='1' ? 'selected' : '' }}>Active</option>
              <option value="0" {{ old('status')==='0' ? 'selected' : '' }}>Inactive</option>
            </select>
            @error('status') <div class="ml-help">{{ $message }}</div> @enderror
          </div>
        </div>

        <div class="ml-actions">
          <button type="submit" class="btn-ico btn-green">
            <i class="fa fa-save"></i> Save
          </button>
          <button type="reset" class="btn-ico btn-gray">
            <i class="fa fa-refresh"></i> Reset
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- scoped styles (same look) --}}
<style>
.ml-wrap{padding:10px}
.ml-panel{border:1px solid #d9d9d9;border-radius:2px;background:#fff}
.ml-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #e6e6e6;background:linear-gradient(#f7f7f7,#ececec)}
.ml-head-left{display:flex;gap:8px;align-items:center;color:#2b78c5;font-weight:600}
.ml-head-link{border:1px solid #c7d7ea;background:#f3f8ff;color:#2b78c5;padding:6px 10px;border-radius:2px;text-decoration:none}
.ml-head-link i{margin-right:6px}

.ml-body{padding:18px}
.ml-row{display:flex;align-items:center;margin-bottom:16px}
.ml-label{width:160px;min-width:160px;background:#f0f2f5;border:1px solid #d9d9d9;border-right:none;border-radius:3px 0 0 3px;padding:10px 14px;text-align:center;font-weight:600;color:#666}
.ml-control{flex:1}
.ml-input,.ml-select{width:100%;height:36px;border:1px solid #d9d9d9;border-radius:0 3px 3px 0;padding:9px 12px;background:#fff;line-height:1.4}
.ml-actions{text-align:right;margin-top:12px}
.btn-ico{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:3px;border:1px solid transparent;font-weight:600;cursor:pointer}
.btn-green{background:#7dbd71;border-color:#6fb064;color:#fff}
.btn-gray{background:#e7edf3;border-color:#d4dbe2;color:#3b4b5c}
.btn-ico i{font-size:14px}
.req{color:#e23b3b}
.ml-help{margin-top:6px;color:#a94442}
.has-error .ml-input,.has-error .ml-select{border-color:#a94442}
</style>
@endsection
