{% extends "base.html" %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">

    <div>

        <h2>
            <i class="bi bi-box-plus text-primary"></i>
            New Material
        </h2>

        <p class="text-muted">
            Register a new engineering material in the system.
        </p>

    </div>

    <a href="/materials" class="btn btn-secondary">

        <i class="bi bi-arrow-left"></i>

        Back

    </a>

</div>

<form method="POST" action="/materials/new">

<div class="card shadow-sm">

<div class="card-header bg-primary text-white">

<h5>Material Information</h5>

</div>

<div class="card-body">

<div class="row">

<div class="col-md-8 mb-3">

<label>Description *</label>

<input type="text" class="form-control" name="description" required>

</div>

<div class="col-md-4 mb-3">

<label>Category</label>

<select class="form-select" name="category">

    <option value="">Select Category...</option>

    <option value="Electrical">Electrical</option>

    <option value="Mechanical">Mechanical</option>

    <option value="Civil">Civil</option>

    <option value="HVAC">HVAC</option>

    <option value="Instrumentation">Instrumentation</option>

    <option value="Plumbing">Plumbing</option>

    <option value="General">General</option>

</select>

</div>

<div class="col-md-4 mb-3">

<label>Supplier</label>

<input type="text" class="form-control" name="supplier">

</div>

<div class="col-md-4 mb-3">

<label>Manufacturer</label>

<input type="text" class="form-control" name="manufacturer">

</div>

<div class="col-md-4 mb-3">

<label>Part Number</label>

<input type="text" class="form-control" name="part_number">

</div>

<div class="col-md-3 mb-3">

<label>Unit</label>

<select class="form-select" name="unit">

    <option value="Each">Each</option>

    <option value="Metre">Metre</option>

    <option value="Roll">Roll</option>

    <option value="Kg">Kg</option>

    <option value="Box">Box</option>

    <option value="Litre">Litre</option>

    <option value="Set">Set</option>

    <option value="Pair">Pair</option>

</select>

</div>

<div class="col-md-3 mb-3">

<label>Current Price</label>

<input type="number" step="0.01" class="form-control" name="current_price" value="0">

</div>

<div class="col-md-3 mb-3">

<label>Minimum Stock</label>

<input type="number" step="0.01" class="form-control" name="minimum_stock" value="0">

</div>

<div class="col-md-3 mb-3">

<label>Reorder Level</label>

<input type="number" step="0.01" class="form-control" name="reorder_level" value="0">

</div>

<div class="col-md-6 mb-3">

<label>Store Location</label>

<input type="text" class="form-control" name="location" placeholder="Main Store">

</div>

<div class="col-md-6 mb-3">

<label>Status</label>

<select class="form-select" name="status">

    <option value="Active">Active</option>

    <option value="Inactive">Inactive</option>

    <option value="Discontinued">Discontinued</option>

</select>

</div>

</div>

</div>

</div>

<br>

<button class="btn btn-success btn-lg">

<i class="bi bi-check-circle"></i>

Save Material

</button>

</form>

{% endblock %}