{% extends "base.html" %}
{% block content %}

<div class="container-fluid">

    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="fw-bold mb-1">
                <i class="bi bi-person-plus-fill text-success me-2"></i>
                Add New Subcontractor
            </h3>
            <p class="text-muted mb-0">
                Enter the subcontractor details below.
            </p>
        </div>

        <a href="{{ url_for('subcontractor.subcontractor_list') }}"
           class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-2"></i>
            Back to List
        </a>
    </div>

    <div class="card shadow border-0">

        <div class="card-header bg-success text-white">
            <h5 class="mb-0">
                <i class="bi bi-building-fill-add me-2"></i>
                Subcontractor Information
            </h5>
        </div>

        <div class="card-body">

            <form action="{{ url_for('subcontractor.save_subcontractor') }}"
                  method="POST"
                  class="loading-form">

                <div class="row g-4">

                    <!-- Subcontractor Name -->
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-building me-1"></i>
                            Subcontractor Name
                            <span class="text-danger">*</span>
                        </label>

                        <input type="text"
                               class="form-control"
                               name="subcontractor_name"
                               placeholder="Enter Subcontractor Name"
                               required>
                    </div>

                    <!-- Contact Person -->
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-person-fill me-1"></i>
                            Contact Person
                        </label>

                        <input type="text"
                               class="form-control"
                               name="contact_person"
                               placeholder="Enter Contact Person">
                    </div>

                    <!-- Mobile -->
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-telephone-fill me-1"></i>
                            Mobile Number
                        </label>

                        <input type="text"
                               class="form-control"
                               name="mobile_no"
                               maxlength="10"
                               placeholder="Enter Mobile Number">
                    </div>

                    <!-- Email -->
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-envelope-fill me-1"></i>
                            Email Address
                        </label>

                        <input type="email"
                               class="form-control"
                               name="email_id"
                               placeholder="Enter Email Address">
                    </div>

                    <!-- GST -->
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-receipt-cutoff me-1"></i>
                            GST Number
                        </label>

                        <input type="text"
                            class="form-control"
                            name="gst_no"
                            placeholder="Enter GST Number">
                    </div>

                    <!-- PAN -->
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-credit-card-2-front-fill me-1"></i>
                            PAN Number
                        </label>

                        <input type="text"
                            class="form-control"
                            name="pan_no"
                            placeholder="Enter PAN Number">
                    </div>

                    <!-- Address -->
                    <div class="col-12">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-geo-alt-fill me-1"></i>
                            Address
                        </label>

                        <textarea class="form-control"
                                  rows="4"
                                  name="address"
                                  placeholder="Enter Complete Address"></textarea>
                    </div>

                </div>

                <hr class="my-4">

                <div class="d-flex justify-content-end gap-2">

                    <button type="reset"
                            class="btn btn-outline-warning">
                        <i class="bi bi-arrow-clockwise me-2"></i>
                        Reset
                    </button>

                    <a href="{{ url_for('subcontractor.subcontractor_list') }}"
                       class="btn btn-outline-secondary">
                        <i class="bi bi-x-circle me-2"></i>
                        Cancel
                    </a>

                    <button type="submit"
                            class="btn btn-success">
                        <i class="bi bi-check-circle-fill me-2"></i>
                        Save Subcontractor
                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

{% endblock %}