{{>header}}
<title>Price Estimation</title>

<style>
    .btn.btn-primary {
        background-color: #083c30 !important;
        border: none;
        color: #ffffff !important;
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        padding: 10px 30px;
        border-radius: 25px;
        transition: all 0.3s ease;
        box-shadow: 0 3px 8px rgba(8, 60, 48, 0.3);
    }

    .btn.btn-primary:hover {
        background-color: #0b5242 !important;
        box-shadow: 0 4px 12px rgba(8, 60, 48, 0.45);
        transform: translateY(-2px);
    }

    .btn.btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(8, 60, 48, 0.3);
    }


    .container {
        max-width: 900px;
    }

    h3 {
        font-weight: 600;
        color: #333;
        letter-spacing: 0.5px;
    }

    h3.text-center {
        font-family: 'Poppins', sans-serif;
        font-size: 28px;
        font-weight: 600;
        color: #083c30;
        text-transform: capitalize;

    }

    /* Stylish underline effect */
    h3.text-center::after {
        content: "";
        display: block;
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, #083c30, #083c30);
        margin: 10px auto 0;
        border-radius: 3px;
    }

    /*.mb-0{
    background-color: #48b64a;
}*/


    .card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    }

    .card-header {
        border-bottom: none;
        border-radius: 12px 12px 0 0 !important;
        background-color: #083c30 !important;

    }

    .card-header h5 {
        font-weight: 500;
        color: white;
    }

    label {
        font-weight: 500;
        color: #555;
    }

    input.form-control,
    select.form-control {
        border-radius: 8px;
        padding: 10px;
        border: 1px solid #ccc;
        transition: all 0.3s ease;
    }

    input.form-control:focus,
    select.form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
    }

    .btn {
        border-radius: 25px;
        font-weight: 500;
        transition: all 0.3s ease;
    }


    .alert {
        border-radius: 8px;
        padding: 10px 15px;
        font-size: 14px;
    }

    .alert-success {
        background-color: #e8f5e9;
        color: #2e7d32;
        border: none;
    }

    .alert-danger {
        background-color: #ffebee;
        color: #c62828;
        border: none;
    }

    .text-center button {
        padding: 8px 30px;
    }

    .mt-5 {
        margin-top: 3rem !important;
    }

    .mb-4 {
        margin-bottom: 1.5rem !important;
    }

    @media (max-width: 768px) {
        .container {
            padding: 0 15px;
        }

        .card {
            margin-bottom: 20px;
        }

        .text-center button {
            width: 100%;
        }
    }
</style>

<div class="container mt-5">

    <h3 class="mb-4 text-center">Price Estimation Settings</h3>

    <!-- Flash Messages -->
    {{#if success_msg}}
    <div class="alert alert-success">{{success_msg}}</div>
    {{/if}}
    {{#if error_msg}}
    <div class="alert alert-danger">{{error_msg}}</div>
    {{/if}}

    <!-- Price Configuration Form -->
    <div class="card mb-4">
        <div class="card-header bg-light">
            <h5 class="mb-0">Update Price Configuration</h5>
        </div>
        <div class="card-body">
            <form action="/admin/updatepriceestimation" method="POST">
                <div class="row">

                    <div class="col-md-6 mb-3">
                        <label>Base Fare (₹)</label>
                        <input type="text" name="baseFare" value="{{existingData.baseFare}}" class="form-control" />
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Per KM Charge</label>
                        <input type="text" name="perKMCharge" value="{{existingData.perKMCharge}}"
                            class="form-control" />
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Per KG Charge</label>
                        <input type="text" name="perKGCharge" value="{{existingData.perKGCharge}}"
                            class="form-control" />
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Fragile Handling Fee</label>
                        <input type="text" name="fragileHandlingFee" value="{{existingData.fragileHandlingFee}}"
                            class="form-control" />
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Surge Price</label>
                        <input type="text" name="surgePrice" value="{{existingData.surgePrice}}" class="form-control" />
                    </div>

                    {{!-- <div class="col-md-6 mb-3">
                        <label>Height</label>
                        <input type="text" name="height" value="{{existingData.height}}" class="form-control" />
                    </div> --}}

                    {{!-- <div class="col-md-6 mb-3">
                        <label>Width</label>
                        <input type="text" name="width" value="{{existingData.width}}" class="form-control" />
                    </div> --}}

                </div>

                <div class="text-center mt-3">
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>

    {{!-- <div class="text-center mb-4">
        <form action="/admin/cloneconfig" method="POST" style="display:inline;">
            <button type="submit" class="btn btn-warning">Clone Previous Config</button>
        </form>

        <form action="/admin/rollbackconfig" method="POST" style="display:inline;">
            <button type="submit" class="btn btn-danger">Rollback to Previous Config</button>
        </form>
    </div> --}}

    <!-- Preview Estimation Form -->
    <div class="card">
        <div class="card-header bg-light">
            <h5 class="mb-0">Preview Estimation</h5>
        </div>
        <div class="card-body">
            <form action="/admin/previewestimation" method="POST">
                <div class="row">

                    <div class="col-md-6 mb-3">
                        <label>Distance (KM)</label>
                        <input type="number" name="distance" class="form-control" />
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Weight (KG)</label>
                        <input type="number" name="weight" class="form-control" />
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Fragile Item?</label>
                        <select name="isFragile" class="form-control">
                            <option value="false">No</option>
                            <option value="true">Yes</option>
                        </select>
                    </div>

                </div>

                <div class="text-center mt-2">
                    <button type="submit" class="btn btn-primary">Preview Estimation</button>
                </div>
            </form>
        </div>
    </div>

</div>

{{>footer}}