@model LittleShop.DTOs.CreateShippingRateDto

@{
    ViewData["Title"] = "Create Shipping Rate";
}

<div class="row mb-4">
    <div class="col">
        <h1><i class="fas fa-plus"></i> Create Shipping Rate</h1>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                <form method="post" asp-area="Admin" asp-controller="ShippingRates" asp-action="Create">
                    @Html.AntiForgeryToken()
                    @if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count > 0)
                    {
                        <div class="alert alert-danger" role="alert">
                            @foreach (var error in ViewData.ModelState[""].Errors)
                            {
                                <div>@error.ErrorMessage</div>
                            }
                        </div>
                    }
                    
                    <div class="mb-3">
                        <label for="Name" class="form-label">Rate Name</label>
                        <input name="Name" id="Name" class="form-control" required 
                               placeholder="e.g., Royal Mail First Class" />
                    </div>
                    
                    <div class="mb-3">
                        <label for="Description" class="form-label">Description (Optional)</label>
                        <textarea name="Description" id="Description" class="form-control" rows="2" 
                                  placeholder="Additional information about this shipping method"></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label for="Country" class="form-label">Country</label>
                        <input name="Country" id="Country" class="form-control" value="United Kingdom" required />
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="MinWeight" class="form-label">Minimum Weight (grams)</label>
                                <input name="MinWeight" id="MinWeight" type="number" step="0.01" class="form-control" required />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="MaxWeight" class="form-label">Maximum Weight (grams)</label>
                                <input name="MaxWeight" id="MaxWeight" type="number" step="0.01" class="form-control" required />
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="Price" class="form-label">Price (£)</label>
                        <input name="Price" id="Price" type="number" step="0.01" class="form-control" required />
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="MinDeliveryDays" class="form-label">Minimum Delivery Days</label>
                                <input name="MinDeliveryDays" id="MinDeliveryDays" type="number" class="form-control" value="1" required />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="MaxDeliveryDays" class="form-label">Maximum Delivery Days</label>
                                <input name="MaxDeliveryDays" id="MaxDeliveryDays" type="number" class="form-control" value="3" required />
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input name="IsActive" type="checkbox" class="form-check-input" checked value="true" />
                            <input name="IsActive" type="hidden" value="false" />
                            <label for="IsActive" class="form-check-label">Active</label>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="@Url.Action("Index")" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Shipping Rates
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Create Shipping Rate
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-info-circle"></i> Weight Guidelines</h5>
            </div>
            <div class="card-body">
                <h6>Common Weight Ranges (in grams):</h6>
                <ul class="list-unstyled">
                    <li><strong>Letter:</strong> 0 - 100g</li>
                    <li><strong>Large Letter:</strong> 100 - 750g</li>
                    <li><strong>Small Parcel:</strong> 750 - 2000g</li>
                    <li><strong>Medium Parcel:</strong> 2000 - 10000g</li>
                    <li><strong>Large Parcel:</strong> 10000 - 30000g</li>
                </ul>
                <hr>
                <h6>Delivery Time Examples:</h6>
                <ul class="list-unstyled">
                    <li><strong>First Class:</strong> 1-3 days</li>
                    <li><strong>Second Class:</strong> 2-5 days</li>
                    <li><strong>Express:</strong> 1 day</li>
                    <li><strong>International:</strong> 5-10 days</li>
                </ul>
            </div>
        </div>
    </div>
</div>