@extends('Admin.layout')
<link rel="stylesheet" href="{{ asset('assets/css/form.css') }}">
@section('content')


<div class="d-flex align-items-center gap-3 mb-4">
    <a href="{{ route('category') }}"
        class="btn btn-icon btn-white border rounded-3 d-flex align-items-center justify-content-center btn-back shadow-sm"
        style="width: 42px; height: 42px; transition: all .2s ease;">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left" style="transition: stroke .2s ease;">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M15 6l-6 6l6 6"></path>
        </svg>
    </a>
    <h5 class="mb-0 fw-bold border-start border-4 border-brand ps-3">Category</h5>
</div>

<div class="row justify-content-center">
    <div class="col-lg-6">
        <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
    <div class="card-header bg-brand-gradient border-0 py-4 px-4">
        <h4 class="mb-1 text-white fw-bold">Add Category</h4>
    </div>

    <div class="card-body p-4">
<form action="{{ route('store_category') }}" method="POST" id="categoryForm">
    @csrf

    <div class="row g-4 form-narrow">

        <div class="col-12">
            <span class="text-brand text-uppercase small fw-bold">Category</span>
            <hr class="mt-1 mb-0" style="border-color: rgba(var(--primary-rgb), .15);">
        </div>

        <div class="col-12">
            <label class="form-label small text-uppercase fw-semibold text-muted">
                Category Name <span class="text-danger">*</span>
            </label>

            <input
                type="text"
                name="name"
                class="form-control rounded-3 @error('name') is-invalid @enderror"
                placeholder="Enter Category Name"
                value="{{ old('name') }}">

            @error('name')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
            @enderror
        </div>

        <div class="col-12 text-center mt-4 pt-3 border-top">
            <button
                type="submit"
                class="btn btn-brand rounded-3 px-4 py-2 fw-semibold shadow-sm"
                id="submitBtn">

                <i class="ti tabler-device-floppy me-1"></i>
                <span id="submitText">Submit</span>

            </button>
        </div>

    </div>
</form>
    </div>
</div>
    </div>
</div>
<script>
document.getElementById('categoryForm').addEventListener('submit', function () {

    document.getElementById('submitBtn').disabled = true;

    document.getElementById('submitText').innerText = 'Processing...';

});
</script>
@endsection