<!-- Shipping Details Modal -->
<div class="modal fade" id="shippingDetailsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content shadow-lg border-0">
            <div class="modal-header bg-gradient-primary text-white py-2">
                <h6 class="modal-title mb-0">
                    <i class="fas fa-shipping-fast"></i> <span data-translate="shippingDetailsTitle">Shipping & Order Details</span>
                </h6>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body p-3" style="max-height: 70vh; overflow-y: auto;">
                <form id="shippingDetailsForm">
                    
                    <!-- Purchase Order Details Section -->
                    <div class="card mb-3">
                        <div class="card-header bg-light py-2">
                            <h6 class="mb-0 text-primary">
                                <i class="fas fa-file-alt"></i> <span data-translate="purchaseOrderDetails">Purchase Order Details</span>
                            </h6>
                        </div>
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-md-6 mb-2">
                                    <label class="small font-weight-bold mb-1">
                                        <i class="fas fa-hashtag text-info"></i> <span data-translate="purchaseOrderNo">Purchase Order No.</span>
                                    </label>
                                    <input type="text" class="form-control form-control-sm" id="purchaseOrderNo" 
                                           placeholder="Enter PO Number">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label class="small font-weight-bold mb-1">
                                        <i class="fas fa-calendar text-success"></i> <span data-translate="purchaseOrderDate">Purchase Order Date</span>
                                    </label>
                                    <input type="date" class="form-control form-control-sm" id="purchaseOrderDate">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Billing Address Section (Read-Only Reference) -->
                    <div class="card mb-3">
                        <div class="card-header bg-light py-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0 text-secondary">
                                    <i class="fas fa-file-invoice"></i> <span data-translate="billingAddress">Billing Address</span>
                                </h6>
                                <small class="text-muted"><span data-translate="customerDetails">(Customer Details)</span></small>
                            </div>
                        </div>
                        <div class="card-body p-3 bg-light">
                            <div id="billingAddressDisplay" class="text-muted">
                                <p class="mb-1"><strong id="billCustomerName">-</strong></p>
                                <p class="mb-1" id="billAddress">-</p>
                                <p class="mb-0">
                                    <span id="billCity">-</span>, 
                                    <span id="billState">-</span> - 
                                    <span id="billPinCode">-</span>
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Shipping Address Section -->
                    <div class="card mb-3">
                        <div class="card-header bg-light py-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0 text-success">
                                    <i class="fas fa-shipping-fast"></i> <span data-translate="shippingAddress">Shipping Address</span>
                                </h6>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="btnCopyBillingToShipping">
                                    <i class="fas fa-copy"></i> <span data-translate="copyFromBilling">Copy from Billing</span>
                                </button>
                            </div>
                        </div>
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-md-12 mb-2">
                                    <label class="small font-weight-bold mb-1">
                                        <i class="fas fa-map-marker-alt text-danger"></i> <span data-translate="address">Address</span>
                                    </label>
                                    <input type="text" class="form-control form-control-sm" id="shippingAddress" 
                                           placeholder="Enter shipping address">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-2">
                                    <label class="small font-weight-bold mb-1">
                                        <i class="fas fa-city text-primary"></i> <span data-translate="city">City</span>
                                    </label>
                                    <input type="text" class="form-control form-control-sm" id="shippingCity" 
                                           placeholder="City">
                                </div>
                                <div class="col-md-4 mb-2">
                                    <label class="small font-weight-bold mb-1">
                                        <i class="fas fa-map text-info"></i> <span data-translate="state">State</span>
                                    </label>
                                    <input type="text" class="form-control form-control-sm" id="shippingState" 
                                           placeholder="State">
                                </div>
                                <div class="col-md-4 mb-2">
                                    <label class="small font-weight-bold mb-1">
                                        <i class="fas fa-mail-bulk text-secondary"></i> <span data-translate="pinCode">Pin Code</span>
                                    </label>
                                    <input type="text" class="form-control form-control-sm" id="shippingPinCode" 
                                           placeholder="Pin Code" maxlength="10">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Transport & Notes Section -->
                    <div class="card mb-3">
                        <div class="card-header bg-light py-2">
                            <h6 class="mb-0 text-info">
                                <i class="fas fa-truck"></i> <span data-translate="transportAndNotes">Transport & Additional Details</span>
                            </h6>
                        </div>
                        <div class="card-body p-3">
                            <div class="row">
                                <!-- Transport Amount -->
                                <div class="col-md-6 mb-2">
                                    <label class="small font-weight-bold mb-1">
                                        <i class="fas fa-rupee-sign text-success"></i> <span data-translate="transportAmount">Transport Amount</span>
                                    </label>
                                    <div class="input-group input-group-sm">
                                        <input type="number" id="shippingTransportAmount" class="form-control form-control-sm" 
                                               placeholder="0.00" step="0.01" min="0" value="0">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-outline-secondary btn-sm" id="btnShippingTransportGST" 
                                                    title="Configure GST for Transport">
                                                <i class="fas fa-cog"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <small class="form-text text-muted">
                                        <span data-translate="transportAmountHelp">Transportation/delivery charges</span>
                                    </small>
                                </div>

                                <!-- Notes -->
                                <div class="col-md-6 mb-2">
                                    <label class="small font-weight-bold mb-1">
                                        <i class="fas fa-sticky-note text-warning"></i> <span data-translate="notes">Notes</span>
                                    </label>
                                    <textarea id="shippingNotes" class="form-control form-control-sm" rows="3" 
                                              placeholder="Enter any additional notes..." data-translate-placeholder="enterNotes"></textarea>
                                    <small class="form-text text-muted">
                                        <span data-translate="notesHelp">Additional instructions or remarks</span>
                                    </small>
                                </div>
                            </div>

                            <!-- Transport Details (from main Transport GST Modal) -->
                            <div id="transportDetailsDisplay" class="alert alert-light border mt-2" style="display: none;">
                                <div class="row">
                                    <div class="col-md-6">
                                        <small class="text-muted"><strong>Transport Name:</strong> <span id="displayTransportName">-</span></small>
                                    </div>
                                    <div class="col-md-6">
                                        <small class="text-muted"><strong>Vehicle Number:</strong> <span id="displayVehicleNumber">-</span></small>
                                    </div>
                                </div>
                                <div class="row mt-1">
                                    <div class="col-md-6">
                                        <small class="text-muted"><strong>GST %:</strong> <span id="displayTransportGSTPercent">0</span>%</small>
                                    </div>
                                    <div class="col-md-6">
                                        <small class="text-muted"><strong>GST Type:</strong> <span id="displayTransportGSTType">-</span></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Info Alert -->
                    <div class="alert alert-info mb-0">
                        <i class="fas fa-info-circle"></i> 
                        <small data-translate="shippingInfoNote">
                            If shipping address is empty when saving, the billing address will be used automatically.
                        </small>
                    </div>
                </form>
            </div>
            <div class="modal-footer py-2 bg-light">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times"></i> <span data-translate="cancel">Cancel</span>
                </button>
                <button type="button" class="btn btn-sm btn-danger" id="btnClearShipping">
                    <i class="fas fa-eraser"></i> <span data-translate="clear">Clear</span>
                </button>
                <button type="button" class="btn btn-sm btn-success" id="btnSaveShippingDetails">
                    <i class="fas fa-save"></i> <span data-translate="save">Save Details</span>
                </button>
            </div>
        </div>
    </div>
</div>
